{"id":453,"date":"2026-07-05T06:04:18","date_gmt":"2026-07-04T21:04:18","guid":{"rendered":"http:\/\/studiomic2026.local\/?p=453"},"modified":"2026-07-05T06:04:18","modified_gmt":"2026-07-04T21:04:18","slug":"css-grid-fr-%e3%81%a8%e3%81%84%e3%81%86%e5%8d%98%e4%bd%8d%e3%81%ae%e5%a6%a5%e5%bd%93%e6%80%a7","status":"publish","type":"post","link":"https:\/\/www.studiomic.net\/?p=453","title":{"rendered":"CSS Grid : fr \u3068\u3044\u3046\u5358\u4f4d\u306e\u59a5\u5f53\u6027"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Web\u30da\u30fc\u30b8\u3092\u3064\u304f\u308b\u3068\u304d\u306b\u3001\u6a2a\u306b\u5747\u7b493\u5206\u5272\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u304a\u304d\u305f\u304f\u3066100 \u00f7 3 = 33.3333333&#8230;\u3068\u96fb\u5353\u3067\u53e9\u3044\u305f\u3053\u3068\u306e\u3042\u308b\u30d2\u30c8\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5747\u7b49\u306a3\u5206\u5272\u3092\u63cf\u753b\u3059\u308b\u306b\u306f\u300110\u306e\u8981\u7d20\uff08\u5024\uff09\u304c\u5fc5\u8981\u306a\u306e\u30673\u3067\u5272\u3063\u3066\u3082\u610f\u5473\u304c\u306a\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u5de6\u53f3\u306e\u4f59\u767d\u3068\u3044\u3046\u5024\u304c\u3044\u308b\u3002<code>$1G<\/code>\u304c\u53f3\u3068\u5de6\u306b2\u3064\u3001<code>\uff5c\uff5c1\u30fb2\u30fb3\uff5c\uff5c<\/code><br>3\u3064\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u9593\u306b\u306f2\u3064\u9593\u9694\u304c\u3044\u308b\u3002<code>$1MP<\/code>\u304c2\u756a\u76ee\u306e\u5de6\u53f3\u306b2\u3064\u3001\u3000<code>1\uff5c\uff5c2\uff5c\uff5c3<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">100%\u3067\u306f\u306a\u304f10\u5272\u3067\u8003\u3048\u308b\u3068\u3001\u6b8b\u3063\u3066\u3044\u308b\u306e\u306f10 &#8211; 4 = 6\u3000\u3042\u307e\u308a\u306b\u308f\u304b\u308a\u3084\u3059\u30443\u306e\u500d\u6570\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1G\u306f$Gutter\u30011MP\u306f$Gap\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u306f$Content \u3068\u3057\u305f\u5834\u5408<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1Gutter \/ <strong>2Content<\/strong> \/ 1Gap \/ <strong>2Content<\/strong> \/ 1Gap \/ <strong>2Content<\/strong> \/ 1Gutter<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">1 + 2 + 1 + 2 &#8230; = 10\u3000\u3068\u6570\u3048\u3066\u3082 2 + 2 + 2 \u00d7 3 = 10\u3000\u3068\u8a08\u7b97\u3057\u3066\u3082\u826f\u3044\u3051\u3069\u3001\u5f8c\u8005\u304c\u308f\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u306d\u3001\u5de6\u53f3\u30fb\u9593\u30fb\u4e2d\u8eab\u306f3\u3064<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6587\u8108\u306b\u305d\u3063\u305f\u6570\u5f0f\u306f\u3000<strong><code>2 + 2 + 3n = 10<\/code><\/strong>\u3000\u3053\u306e\u3068\u304dn\u306f2<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u969b\u306b\u306f <code><strong>2G + 2MP + 3n = 100<\/strong><\/code>\u3092\u6210\u7acb\u3055\u305b\u305f\u3044\u3068\u304d\u306b\u3001\u4f59\u767d\u3082\u9593\u9694\u3082\u30bc\u30ed\u3067\u304e\u3063\u3061\u304e\u3061\u306b\u5747\u7b49\u306a3\u5206\u5272\u3092\u3057\u305f\u3044\u3068\u304d\u3060\u3051<br>0 + 0 + 3n = 100\u3000\u3068\u3044\u3046\u7406\u5c48\u3067\u30013n = 100\u3000\u3068\u306a\u308a\u3001\u306f\u3058\u3081\u3066n = 33.3333333\u3068\u96fb\u5353\u3092\u53e9\u3044\u305f\u4e0a\u3067\u3001\u5c0f\u6570\u70b9\u4ee5\u4e0b\u306e\u6570\u5024\u3092\u3069\u3053\u3067\u4e38\u3081\u308b\u304b\u3001\u771f\u30f3\u4e2d\u306e\u7bb1\u3060\u305134\uff05\u306b\u3042\u305f\u308b\u30d4\u30af\u30bb\u30eb\u5024\u3064\u3051\u3066\u3082\u3001\u4eba\u9593\u306e\u76ee\u306b\u533a\u5225\u306a\u3093\u304b\u3064\u304b\u3093\u3060\u308d\u3046\u30fc\u300233\uff05\uff5c34\uff05\uff5c33\uff05<br>\u306f\u3044\u3001\u3053\u308c\u3067100\uff05\u6210\u7acb\u3063\uff01\uff08\u307f\u305f\u3044\u306a\u3053\u3068\u3092\u5927\u6614\u3084\u3063\u3066\u305f\u6c17\u304c\u3059\u308b\uff09<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5730\u7344\u306b\u843d\u3061\u308b\u308f\u3088<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uff08Powered by\uff1aNetflix\u30aa\u30ea\u30b8\u30ca\u30eb\u30b7\u30ea\u30fc\u30ba\uff09<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u3044\u3084\u306f\u3084\u3002\u5730\u7344\u306b\u6cbc\u3063\u3066\u3044\u305f\u8aac\u660e\u304c\u9577\u5f15\u3044\u305f\u3051\u3069\u3082\u3001\u3069\u308c\u307b\u3069 <strong>Grid layout<\/strong> \u304c\u5929\u56fd\u306b\u8fd1\u3044\u5cf6\u3001\u5730\u4e0a\u306e\u697d\u5712\u3001\u81f3\u4e0a\u547d\u984c\u306e\u5230\u9054\u70b9\u3067\u3042\u308b\u304b\u306e\u8a71\u3092\u3057\u305f\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u308c\u306f\u3001n = 33.333\u3000\u3092\u8a08\u7b97\u306e\u5f97\u610f\u306a\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u304c\u52dd\u624b\u306b\u4e38\u3081\u3066\u304f\u308c\u308b\u3068\u3044\u3046\u8a71\u3067\u306f\u6c7a\u3057\u3066\u306a\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u79c1\u306f\u3088\u304f\u300cWeb\u30c7\u30b6\u30a4\u30ca\u30fc\u306b\u306f\u3069\u3093\u306a\u30d2\u30c8\u304c\u5411\u3044\u3066\u3044\u308b\u306e\u304b\u300d\u3068\u8a0a\u304b\u308c\u3066\u3001\u300c\u76f8\u5bfe\u30d1\u30b9\u3068\u7d76\u5bfe\u30d1\u30b9\u306e\u5dee\u304c\u308f\u304b\u308b\u30d2\u30c8\u306a\u3089\u8ab0\u3067\u3082\u300d\u3068\u5fdc\u3048\u3001\u304a\u305d\u3089\u304f\uff08\u306a\u3093\u3068\u306a\u304f\u7159\u306b\u5dfb\u3044\u305f\u308f\u306d\u3001\u5730\u7344\u306b\u5815\u3061\u308c\u3070\u3044\u3044\uff09\u3068\u601d\u308f\u308c\u3066\u304d\u305f\u3001\u304b\u3082\u3057\u308c\u306a\u3044\u3002\u304c\u3001\u3053\u308c\u771f\u5263\u306b\u8fd4\u4e8b\u3057\u3066\u3044\u308b\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u76f8\u5bfe\u5024\u3068\u7d76\u5bfe\u5024\u306e\u5dee\u304c\u308f\u304b\u3089\u306a\u3044\u4eba\u7269\u304c\u3001\u3053\u306e\u66d6\u6627\u6a21\u7cca\u3068\u3057\u305f\u30d6\u30e9\u30a6\u30b6\u3068\u306e\u6226\u4e89\u306b\u52a0\u62c5\u3057\u305f\u3089\u5730\u7344\u306b\u5815\u3061\u307e\u3063\u305b\u3002<br>\u3068\u3044\u3046\u306e\u3082\u4e00\u7247\u306e\u771f\u5b9f\u3002<br>\u307e\u305f\u3001\u6280\u8853\u5237\u65b0\u304c\u76ee\u307e\u3050\u308b\u3057\u3044\u305f\u3081\uff08\u52c9\u5f37\u306b\u3064\u3044\u3066\u3044\u304f\u306e\u304c\u5927\u5909\uff09\u3068\u96e2\u8077\u7387\u304c\u9ad8\u3044\u8077\u696d\u3067\u3082\u3042\u308b\u3089\u3057\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305f\u3060\u79c1\u304b\u3089\u3059\u308b\u3068\u3001\u30ef\u30fc\u30eb\u30c9\u30ef\u30a4\u30c9\u30a6\u30a7\u30d6\u3092\u652f\u3048\u308b\u6280\u8853\u8005\u305f\u3061\u306f\u81ea\u5206\u3088\u308a\u9065\u304b\u306b\u9065\u304b\u306b\u512a\u79c0\u306a\u9762\u3005\u3067\u3001\u3044\u3064\u306e\u307e\u306b\u304b\u554f\u984c\u306f\u4e00\u3064\u3001\u307e\u305f\u4e00\u3064\u3068\u89e3\u6d88\u3055\u308c\u3066\u3044\u304d\u3001\u300c\u679c\u5831\u306f\u5bdd\u3066\u5f85\u3066\u300d\u3092\u5730\u3067\u884c\u3051\u308b\u3001\u307e\u3063\u305f\u304f\u98fd\u304d\u306a\u3044\u5546\u3044\u306a\u306e\u3067\u3042\u308b\u3002<br>\u8a00\u3044\u63db\u3048\u308b\u3068\u30fc\u65e7\u614b\u4f9d\u7136\u30fc\u304c\u307e\u3063\u305f\u304f\u306a\u3044\u4ee3\u308f\u308a\u306b\u5b89\u7a4f\u3082\u5b89\u5be7\u3082\u306d\u3047\u3002\u3067\u3001\u3044\u3044\u304b\u3002<br>\u3068\u3001\u307e\u308b\u3067\u30b9\u30ea\u30ea\u30f3\u30b0\u306a\u30d7\u30ed\u30dd\u30fc\u30ba\u307f\u305f\u3044\u3067\u3059\u308f\u306d\u3002\u3060\u304c\u65ad\u3089\u306a\u3044\u3002\uff08\u9006\uff1a\u5cb8\u8fba\u9732\u4f34\uff09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7f6b\u7dda\u306e\u8a71<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7f6b\u7dda\u3068\u3044\u3046\u3068\u3001\u30b3\u30af\u30e8Campus\u30ce\u30fc\u30c8\u306e\u3088\u3046\u306a\u6a2a\u7f6b\u30ce\u30fc\u30c8\u3092\u601d\u3044\u6d6e\u304b\u3079\u308b\u304c\u3001\u56fd\u8a9e\u306e\u6388\u696d\u3067\u306f\u7e26\u7f6b\u7dda\u306e\u53f3\u958b\u304d\u30ce\u30fc\u30c8\u3092\u4f7f\u3063\u3066\u3044\u305f\u3002\u81ea\u7531\u5e33\u306e\u3088\u3046\u306a\u767d\u7d19\u30ce\u30fc\u30c8\u306f\u30b9\u30b1\u30c3\u30c1\u30d6\u30c3\u30af\u3067\u3082\u306a\u3093\u3067\u3082\u753b\u5bb6\u3084\u5929\u624d\u304c\u4f7f\u3048\u3070\u3048\u3047\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3051\u3069\u8a2d\u8a08\u306b\u306f\u65b9\u773c\u304c\u8981\u308a\u307e\u3059\u3084\u306d\u3001\u3092\u304b\u3064\u3066\u8ab0\u3060\u304b\u77e5\u3089\u306a\u3044\u5049\u5927\u306a\u308b\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u5b9f\u88c5\u3057\u3066\u307f\u305b\u305f\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Table Design<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u3067\u306f\u5730\u7344\u306e\u9580\u304c\u958b\u3044\u305f\u77ac\u9593\u306e\u3088\u3046\u306a\u8a9e\u3089\u308c\u53e3\u3092\u3057\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u9ece\u660e\u671f\u306e\u7b11\u3044\u8a71\u306e\u3088\u3046\u306a\u6271\u3044\u3092\u3055\u308c\u308bTable Design\u3001Table layout\u3001\u3069\u3063\u3061\u304c\u6b63\u3057\u3044\u547c\u79f0\u3084\u306d\u3093\u3001\u3068\u3044\u3046\u307b\u3069\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u306b\u7279\u5316\u3057\u305f\u3053\u306e\u82e6\u3057\u7d1b\u308c\u306e\u624b\u6cd5\u3002\u91d1\u306e\u5375\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5927\u304d\u306a\u753b\u50cf\u304c\u91cd\u3044\u306e\u306a\u3089\u3070\u5207\u308c\u3070\u3044\u3044\uff08\u30b9\u30e9\u30a4\u30b9\uff09\u3001\u7d75\u306e\u4e2d\u306b\u6587\u5b57\u3092\u7f6e\u304d\u305f\u3044\u306a\u3089\u90e8\u5206\u7684\u306b\u80cc\u666f\u753b\u50cf\u306b\u3059\u308c\u3070\u3044\u3044\u3001\u3068\u3093\u3067\u3082\u306a\u3044\u601d\u3044\u3064\u304d\u3067\u3059\u3088\u306d\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6240\u8a6eHTML\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306a\u3093\u3084\u304b\u3089\u3001\u5de6\u4e0a\u304b\u3089\u53f3\u4e0b\u306e\u9685\u3092\u76ee\u6307\u3057\u3066\u66f8\u3051\u3070\u3088\u308d\u3057\u3002\u753b\u50cf\u3082\u968f\u6240\u306b\u633f\u308c\u305f\u3089\u7d20\u6575\u306a\u30b9\u30af\u30e9\u30c3\u30d7\u30d6\u30c3\u30af\u8abf\u306b\u306a\u308b\u308f\u3044\u306d\u3002\u3068\u30d6\u30e9\u30a6\u30b6\u5074\u304c\u601d\u3063\u3066\u3044\u305f\u6642\u4ee3\u306b\u3001\u751f\u7c8b\u306e\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u3001\u30b9\u30af\u30e9\u30c3\u30d7\u3092\u3064\u304f\u308b\u3064\u3082\u308a\u306a\u3069\u306a\u3044\u3002\u3068\u7e26\u3068\u6a2a\u306e\u7f6b\u7dda\u3092\u63cf\u304f\u552f\u4e00\u306e\u624b\u6bb5\u3060\u3063\u305fTable\u30bf\u30b0\u3092\u99c6\u4f7f\u3057\u3066\u3001\u3084\u3063\u3061\u3083\u3063\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u306d\u3002\u5929\u624d\u306f\u767d\u7d19\u306e\u30ce\u30fc\u30c8\u306b\u3001\u51c4\u3044\u7d75\u3092\u63cf\u304f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305f\u3076\u3093\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30c4\u30fc\u30eb\u306b\u300c\u30b9\u30e9\u30a4\u30b9\u300d\u306a\u3093\u3066\u6982\u5ff5\u306f\u306a\u304f\u3066\u3001Table Design\u3092\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u304c\u8ffd\u3063\u304b\u3051\u3066\u6a5f\u80fd\u8ffd\u52a0\u3057\u305f\u306e\u3067\u306f\u3068\u601d\u3046\u3002\u4e2d\u56fd\u306e\u5947\u66f8\u300c\u897f\u904a\u8a18\u300d\u306f2026\u5e74\u73fe\u5728\u306b\u306a\u3063\u3066\u3082\u30c9\u30e9\u30de\u3084\u6620\u753b\u3084\u6f2b\u753b\u306e\u539f\u4f5c\u3001\u3042\u308b\u3044\u306f\u7ffb\u6848\u3082\u306e\u3068\u3057\u3066\u5927\u52e2\u306e\u4eba\u3005\u3092\u4eca\u3067\u3082\u98df\u308f\u305b\u3066\u3044\u308b\u30fb\u30fb\u30fb\u3068\u6642\u3005\u6050\u308c\u5165\u308b\u306e\u3060\u304c\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Table Design\u306f\u3001Web\u3067\u79c1\u304c\u306f\u3058\u3081\u3066\u898b\u305f\u5996\u602a\u3060\u3063\u305f\u3002\u305d\u306e\u3042\u3068\u3001\u6a2a\u7f6b\u30ce\u30fc\u30c8\u306f\u30d0\u30b1\u30e2\u30ce\u3092\u51fa\u73fe\u3055\u305b\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3067\u306f\u306a\u3044\u7684\u306a\u9a12\u304e\u3092W3C\u304cHTML4\u3042\u305f\u308a\u3067\u8d77\u3053\u3057\u305f\u3088\u3046\u306a\u3001\u3042\u307e\u308a\u306b\u304f\u3060\u3089\u306a\u304f\u3066\u61b6\u3048\u3066\u306a\u3044\u3088\u3046\u306a\u3002\u3068\u306b\u304b\u304fHTML5\u304c\u767b\u5834\u3059\u308b\u307e\u3067\u306f\u606f\u82e6\u3057\u304f\u3066\u306d\u3002\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30afWeb\u3001\u5927\u4e8b\u3067\u3059\u3051\u3069\u3082\u3001\u5bfe\uff1aTable Design\u3068\u3057\u3066\u8a9e\u3089\u308c\u308b\u3068\u304d\u306f\u3001\u5358\u306a\u308b\u9326\u306e\u5fa1\u65d7\u3001\u90fd\u5408\u3088\u304f\u6301\u3061\u51fa\u3057\u3066\u304d\u3084\u304c\u3063\u305f\u30fb\u30fb\u30fb\u3068\u5185\u5fc3\u3064\u3044\u611f\u3058\u308b\u306e\u306f\u5426\u3081\u306a\u304b\u3063\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3060\u3063\u3066\u306d\u3047\u3002\u308f\u305f\u304f\u3057\u300c\u751f\u7c8b\u306e\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30c7\u30b6\u30a4\u30ca\u30fc\u305f\u3061\u300d\u3057\u304bWeb\u30c7\u30b6\u30a4\u30f3\u3092\u51fa\u6765\u308b\u30d2\u30c8\u304c\u3044\u306a\u3044\u6642\u4ee3\u306b\u3001\u7d1b\u308c\u8fbc\u3093\u3060\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u91ce\u90ce\u3060\u3063\u305f\u308f\u3051\u3067\u3002HTML\u306e\u66f8\u304d\u65b9\u306f\u5b66\u3093\u3067\u3044\u308b\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u6bdb\u304c\u751f\u3048\u305f\u3082\u306e\u3092\u3064\u304f\u308c\u308b\u3001\u305d\u306e\u30cb\u30c3\u30c1\u306a\u5834\u6240\u304b\u3089\u3001\u30c7\u30b6\u30a4\u30ca\u30fc\u305f\u3061\u304c\u8a2d\u8a08\u601d\u60f3\u3092\u3082\u3063\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3057\u3066\u3044\u304f\u306e\u3092\u898b\u3066\u3044\u305f\u3002<br>\u305d\u306e\u30bd\u30fc\u30b9\u306fHTML\u3068\u3057\u3066\uff08\u3069\u3046\u306a\u3093\u3060\u308d\u3046\uff09\u3068\u611f\u3058\u305f\u3068\u3057\u3066\u3082\u3001\u6210\u679c\u7269\u306e\u5916\u89b3\u304c\u52a3\u3063\u3066\u3044\u308b\u3001\u6a5f\u68b0\u3068\u3057\u304b\u304a\u8a71\u3057\u3067\u304d\u306a\u3044\u3001\u3067\u306f\u4ed5\u65b9\u306a\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3068\u3001\u81ea\u5206\u306e\u6614\u8a71\u306f\u3069\u3046\u3067\u3082\u3044\u3044\u3093\u3060\u3051\u3069\u3082\u3002<strong>Flexbox<\/strong> \u3068\u3084\u305f\u3089\u3068\u6bd4\u8f03\u3055\u308c\u308b&nbsp;<strong>Grid layout<\/strong>\u3001\u521d\u624b\u304b\u3089\u9593\u9055\u3063\u3066\u3044\u308b\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3001\u6cbc\u308b\u306a\u3041\u3068\u611f\u3058\u3066\u307e\u3057\u3066\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u6d77\u5916\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u30b5\u30a4\u30c8\u304c\u3001\u30a4\u30f3\u30c8\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u3067\u3001Table Design\u30fb\u30fb\u30fbFloat\u30fb\u30fb\u30fbFlexbox\u30fb\u30fb\u30fb\u305d\u3057\u3066\uff08\u6e80\u3092\u6301\u3057\u3066\uff09<strong>Grid layout<\/strong> \u3068\u6642\u4ee3\u306e\u5909\u9077\u304b\u3089\u66f8\u304d\u51fa\u3057\u3066\u3044\u308b\u306e\u306f\u3001CSS Grid\u306fTable Design\u306e\u5b50\u3001\u3068\u6b63\u3057\u304f\u8a8d\u77e5\u3057\u3066\u3044\u308b\u304b\u3089\u3060\u3068\u601d\u3044\u307e\u3059\u3002<br>\u6b63\u5f53\u306a\u7d99\u627f\u8005\u3001\u3067\u3059\u304b\u306d\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5148\u306b\u300c\u81f3\u4e0a\u547d\u984c\u306e\u5230\u9054\u70b9\u300d\u3068\u5927\u8888\u88df\u306a\u66f8\u304d\u51fa\u3057\u3092\u3057\u305f\u7406\u7531\u306f\u305d\u3053\u3067\u3001\u63cf\u753b\u3055\u308c\u308b\u3082\u306e\u304c <strong>Flexbox<\/strong> \u3068\u8fd1\u3057\u304f\u88ab\u3063\u3066\u898b\u3048\u305f\u3068\u3057\u3066\u3082\u3001\u7528\u9014\u304c\u9055\u3046\u3001\u697d\u3055\u304c\u9055\u3046\u3001\u672c\u8cea\u304c\u305c\u3093\u305c\u3093\u9055\u3046\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u63cf\u753b\u304c\u4f3c\u3066\u3044\u308b\u3060\u3051\u306a\u3089\u3001Float\u3068Flexbox\u306b\u5dee\u306f\u306a\u3044\u3058\u3083\u306a\u3044\u3059\u304b\u3002\u5d29\u308c\u3084\u3059\u3044\u3060\u3001\u6319\u52d5\u304c\u3069\u3046\u3060\u3001\u3058\u3083\u306a\u304f\u300c\u30a2\u30a4\u30c6\u30e0\u300d\u306e\u6d41\u3057\u8fbc\u307f\u3067\u3059\u3088\u306d\u3001\u3069\u3063\u3061\u3082\u3002\u4e2d\u8eab\u304c\u3042\u3063\u3066\u306f\u3058\u3081\u3066\u63cf\u753b\u304c\u751f\u3058\u308b\u3001\u7a7a\u767d\u3092\u8a2d\u3051\u308b\u306b\u306f\u3001\u7a7a\u306eDIV\u306b\u30b5\u30a4\u30ba\u3092\u6301\u305f\u305b\u308b\u3001\u6a2a\u306b\u8ffd\u52a0\u3059\u308b\u306b\u3057\u308d\u3001\u7e26\u306b\u7a4d\u3093\u3067\u3044\u304f\u306b\u3057\u308d\u3001\u300c\u6a2a\u7f6b\u30ce\u30fc\u30c8\u300d\u3092\u3069\u3046\u4f7f\u3046\u304b\u3001\u3068\u3044\u3046\u8a71\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5bfe\u3057\u3066<strong>CSS Grid layout<\/strong> \u306f\u65b9\u773c\u7d19\u3001\u306f\u3058\u3081\u3066\u683c\u5b50\u72b6\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4e0e\u3048\u3089\u308c\u305f\u308f\u3051\u3067\u3001\u5927\u4e8b\u306a\u306e\u306f\u30c8\u30e9\u30c3\u30af\u3001\u30bb\u30eb\u3001\u6a2a\u4f55\u756a\u76ee\u30fb\u7e26\u4f55\u756a\u76ee\u3068\u3044\u3046\u3001\u3069\u3061\u3089\u304b\u3068\u3044\u3048\u3070\u8868\u8a08\u7b97\uff08Excel\u30fbNumbers\uff09\u306e\u3088\u3046\u306a\u6982\u5ff5\u304c\u5148\u306b\u3042\u3063\u305f\u65b9\u304c\u3044\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3060\u3063\u3066\u3001\u30bb\u30eb\u3092\u7d50\u5408\u3067\u304d\u308b\u3067\u3057\u3087\uff1f<br>Excel\u306e\u8868\u306f\u3001\u7a7a\u306e\u30bb\u30eb\u304c\u3042\u3063\u305f\u3063\u3066\u5d29\u308c\u305f\u308a\u3057\u306a\u3044\u3002\u5148\u306b\u30c8\u30e9\u30c3\u30af\u30ea\u30b9\u30c8\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u304b\u3089\u3001\u8a2d\u8a08\u306a\u3057\u3067\u30a4\u30f3\u30d7\u30c3\u30c8\u304b\u3089\u4f5c\u696d\u958b\u59cb\u3067\u304d\u308b\u308f\u3051\u3067\u3059\u3002\u30a4\u30f3\u30d7\u30c3\u30c8\u3059\u308b\u300c\u3082\u306e\u300d\u4e2d\u8eab\u3001\u5f0f\u3084\u30c6\u30ad\u30b9\u30c8\u304cExcel\u306e\u5834\u5408\u306e\u300c\u30a2\u30a4\u30c6\u30e0\u300d\u3067\u3042\u3063\u3066\u3001\u305d\u308c\u306f\u300c\u30bb\u30eb\u300d\u3067\u306f\u306a\u3044\u3068\u8ab0\u3067\u3082\u77e5\u3063\u3066\u3044\u308b\u3001\u306e\u306b<strong>CSS Grid <\/strong>\u306e\u8aac\u660e\u3067\u8a9e\u5f59\u304c\u9593\u9055\u3063\u3066\u3044\u308b\u3082\u306e\u304b\u3089\u5165\u308b\u3068\u3001\u30dc\u30bf\u30f3\u306e\u639b\u3051\u9055\u3044\u304c\u5e83\u304c\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u3041\u30dc\u30bf\u30f3\u306a\u3093\u3066\u639b\u3051\u9055\u3048\u3066\uff08\u3084\u3079\u3047\uff09\u3068\u601d\u3063\u3066MDN\u306b\u884c\u304f\u306e\u304c\u7d50\u5c40\u30a4\u30bd\u30ac\u30d0\u56de\u308c\u3067\u826f\u3044\u306e\u304b\u3082\u77e5\u3089\u3093\u304c\u3002<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ec\u30b3\u30fc\u30c9\u304c\u3042\u3063\u3066\u3001\u30c8\u30e9\u30c3\u30af\u304c\u3042\u308a\u3001\u30c8\u30e9\u30c3\u30af\u30ea\u30b9\u30c8\u306e\u4e2d\u3067\u3001order\u306b\u3088\u3063\u3066\u30b7\u30e3\u30c3\u30d5\u30eb\u3082\u3067\u304d\u308b\u3002\u4e00\u5ea6\u304d\u308a\u3060\u3051\u3069\u3002\uff08\u30ec\u30b3\u30fc\u30c9\u306f\u306d\u3047\u305e\u3068\u8ab0\u304b\u306b\u7a81\u3063\u8fbc\u307e\u308c\u305f\u3044\uff09<br>\u305d\u306e\u30c8\u30e9\u30c3\u30af\u30ea\u30b9\u30c8\u306e\u8a2d\u8a08\u3092\u5148\u306b\u3059\u308b\u306e\u304c <code><strong>display: grid;<\/strong><\/code> \u3092\u5ba3\u8a00\u3057\u305f\u3042\u3068\u3001\u65b9\u773c\u30de\u30b9\u76ee\u306e\u5217\u6570\u30fb\u884c\u6570\u3092\u5b9a\u7fa9\u3059\u308b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns:\ngrid-template-rows:\ngrid-auto-rows:<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8868\u8a08\u7b97\u3068\u4f3c\u3066\u3044\u308b\u3001\u3068\u306f\u3044\u3048<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u306e\u4e0a\u3001CSS Grid \u306f1\u3064\u306e\u30bb\u30eb\u30922\u3064\u4ee5\u4e0a\u306e\u30a2\u30a4\u30c6\u30e0\u304c\u5171\u6709\u3059\u308b\u3053\u3068\u3055\u3048\u3067\u304d\u308b\u3002<br>CSS\u306e\u64ec\u4f3c\u8981\u7d20&nbsp;<strong>::<em>before<\/em> &nbsp;::<em>after<\/em><\/strong> \u3092\u4f7f\u308f\u305a\u306b\u3001\u305a\u3089\u3057\u3066\u91cd\u306d\u308b\u3001\u7d19\u306e\u65b9\u773c\u7d19\u3067\u30dd\u30f3\u30c1\u7d75\u3092\u63cf\u3044\u305f\u3088\u3046\u306b\u3001\u5b9f\u969b\u306b\u914d\u7f6e\u3067\u304d\u308b\u3002<br>\u7121\u53cc\u3067\u3059\u306e\u3088\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>grid-template-areas:\n  \"A A .\"\n  \"A A .\"\n  \". B C\";<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">grid-template-areas<\/span><span style=\"color: #D8DEE9FF\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  &quot;<\/span><span style=\"color: #81A1C1\">A<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">A<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  &quot;<\/span><span style=\"color: #81A1C1\">A<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">A<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  &quot;. <\/span><span style=\"color: #81A1C1\">B<\/span><span style=\"color: #D8DEE9FF\"> C&quot;;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">.A\u3000Class\u30bb\u30ec\u30af\u30bf\u3084\u3000.B\u3000Class\u30bb\u30ec\u30af\u30bf\u306b\u3000grid-area: name; \u3092\u3064\u3051\u308b\u624b\u6cd5<br>grid-area: A;<br>grid-area: B;<br>grid-area: C;<br>\u3092 <code><strong>grid-template-areas:<\/strong><\/code>\u3067\u4f4d\u7f6e\u6c7a\u3081\u3059\u308b\u306e\u306f\u76f4\u89b3\u7684\u3060\u3057\u3001\u7a7a\u767d\u30bb\u30eb\u306b\u306f\uff08\u3000.\u3000\uff09\u30c9\u30c3\u30c8\u7f6e\u304d\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u65b9\u3067\u3001\u6a2a\u4f55\u756a\u76ee\u30fb\u7e26\u4f55\u756a\u76ee\u3068\u30bb\u30eb\u306e\u30a2\u30c9\u30ec\u30b9\u3092\u66f8\u304b\u305b\u308b\u3088\u3046\u306a\u65b9\u6cd5\u3082\u3042\u308b\u306e\u306f\u3001\u4f55\u6545\u304b\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.ClassName {\n  grid-column: 1\/3;\n  grid-row: 1\/2;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">ClassName<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">grid-column<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #88C0D0\">\/<\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">grid-row<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #88C0D0\">\/<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code><strong>grid-template-areas:<\/strong><\/code>\u3067\u306f\u300c\u305a\u3089\u3057\u305f\u30fb\u91cd\u306d\u300d\u304c\u8868\u73fe\u3067\u304d\u306a\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">grid-column\u3067X\u65b9\u5411\u2192<br>grid-row\u3067Y\u65b9\u5411\u2193<br>z-index: \u3067\u30bb\u30eb\u306e\u4e2d\u3067\u91cd\u306a\u3063\u305f\u30a2\u30a4\u30c6\u30e0\u306e\u3069\u3061\u3089\u3092\u4e0a\u306b\u63cf\u753b\u3059\u308b\u304b\u6307\u5b9a\u3059\u308b\u3002\u64ec\u4f3c\u8981\u7d20\u306a\u3057\u30673D\u8868\u73fe\u304c\u3067\u304d\u308b\u3002<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"430\" data-pen-title=\"Untitled\" data-default-tab=\"js,result\" data-slug-hash=\"rajpBRv\" data-user=\"Sakurai-Studio-Mic\" style=\"height: 430px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Sakurai-Studio-Mic\/pen\/rajpBRv\">\n  Untitled<\/a> by Sakura.i Studio Mic (<a href=\"https:\/\/codepen.io\/Sakurai-Studio-Mic\">@Sakurai-Studio-Mic<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">z-index: \u3092\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u3001\u5f53\u7136\u5f8c\u306b\u66f8\u304b\u308c\u3066\u3044\u308b\u3082\u306e\u304c\u4e0a\uff08\u624b\u524d\uff09\u306b\u6765\u308b<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5206\u6570\uff1afraction\u306e\u8a71\u3069\u3053\u3044\u3063\u305f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6839\u304c\u8868\u8a08\u7b97\u30de\u30cb\u30a2\u306a\u60aa\u3044\u7656\u304c\u51fa\u3066\u3057\u307e\u3063\u305f\u3002\u304a\u984c\u306f\u3001<strong>fr \u3068\u3044\u3046\u5358\u4f4d\u306e\u59a5\u5f53\u6027<\/strong>\u3067\u3042\u308b\u3002<br>\u76f4\u8a33\u3067\u5206\u6570\u3001AI\u306b\u3088\u308b\u3068\u6bd4\u7387\u3001\u3089\u3057\u3044\u3002<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">CSS\u30b0\u30ea\u30c3\u30c9\u3067\u4f7f\u3048\u308b\u5358\u4f4d\u300cfr\u300d<br>\u300c\uff46\uff52\u300d\u5358\u4f4d\u3068\u306f<strong>\u300cfraction(\u6bd4\u7387)\u300d\u306e\u3053\u3068\u3067\u3001\u89aa\u8981\u7d20\u304b\u3089\u898b\u305f\u5b50\u8981\u7d20\u306e\u5927\u304d\u3055\u3092\u5272\u5408\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059<\/strong>\u3002<br>\u300cpx\u300d\u3067\u5e45\u3092\u6307\u5b9a\u3057\u3066\u3057\u307e\u3046\u3068\u305d\u306e\u5e45\u3067\u56fa\u5b9a\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u753b\u9762\u306e\u5e45\u306b\u5408\u308f\u305b\u3066\u81ea\u52d5\u3067\u4f38\u7e2e\u3055\u305b\u308b\u306a\u3089\u300cfr\u300d\u5358\u4f4d\u3092\u4f7f\u3046\u3068\u4fbf\u5229\u3067\u3059\u3002<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\u4fbf\u5229\u3067\u3059\u3001\u3068\u8a00\u308f\u308c\u306a\u304c\u3089<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns: 1fr 1fr;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u307f\u305f\u3044\u306a\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3001\u591a\u3044\u3067\u3059\u3088\u306d\u30fb\u30fb\u30fb\u6bd4\u7387\u3068\u8a00\u308f\u308c\u308c\u3070\u78ba\u304b\u306b1\uff1a1 \u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u306e\u6b63\u65b9\u5f62\u307f\u305f\u3044\u306a\u4f59\u8a08\u306a\u60c5\u5831\u304c\u982d\u3092\u904e\u304e\u308b\u306e\u3060\u3051\u3069<br>\u6a2a\u30922\u5206\u5272\u3001\u3092\u305d\u306e\u307e\u307e\u8a00\u8449\u306b\u3057\u307e\u305b\u3093\uff1f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns: 50% 50%;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3042\u308b\u3044\u306f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns: 50fr 50fr;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7d50\u679c\u306f\u540c\u3058\u306a\u3093\u3060\u304b\u3089\u3001\u8a2d\u8a08\u610f\u56f3\u304c\u308f\u304b\u308b\u65b9\u304c\u597d\u307e\u3057\u3044\u3002<br>\u5927\u304d\u3055\u306e\u30b5\u30a4\u30ba\u5358\u4f4d\u304cpx\u3060\u308d\u3046\u3068\u3001svw\u3001vw\u3068\u3044\u3063\u305f\u30c7\u30d0\u30a4\u30b9\u3092\u610f\u8b58\u3057\u305f\u30d6\u30e9\u30a6\u30ba\u30b5\u30a4\u30ba\u3060\u308d\u3046\u3068\u3001\u4f55\u67d0\u304b\u306e\u300c100%\u300d\u306b\u5bfe\u3059\u308b\u6bd4\u7387\u3001\u5272\u5408\u3092\uff08\u3082\u3046\u96fb\u5353\u53e9\u304b\u306a\u304f\u3066\u3044\u3044\u3067\u3059\u3088\uff09\u3068<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d6\u30e9\u30a6\u30b6\u3068\u3044\u3046\u306e\u306f\u7d76\u5bfe\u5024\u3067\u306a\u304f\u76f8\u5bfe\u5024\u306a\u3093\u3067\u306d\u3001\u3068\u53ef\u5909\u5f0f\u306a\u900f\u660e\u30fb\u65b9\u773c\u3092\u3088\u3046\u3084\u304f\u4e0e\u3048\u3089\u308c\u305f\u306e\u306b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns: 1fr 1fr 1fr;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u306f\u3044\u306f\u3044\u30013\u5206\u5272\u3067\u3059\u306d\u30fb\u30fb\u30fb\u306e\u300c\u632f\u308a\u51fa\u3057\u306b\u623b\u308b\u300d\u30b9\u30b4\u30ed\u30af\u7684\u30ac\u30c3\u30ab\u30ea\u611f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30db\u30fc\u30eb\u30b1\u30fc\u30ad\u30923\u7b49\u5206\u3059\u308b\u304f\u3089\u3044\u3001\u8a71\u308f\u304b\u3093\u306a\u3044\u3063\u3059\u3001\u96e3\u3057\u3044\u3067\u3059\u3002<br>\u3053\u3053\u306f3\u5206\u5272\u3068\u601d\u3063\u305f\u3089<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns: 3fr 3fr 3fr;\ngrid-template-columns: repeat(3, 1fr);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u72ac\u306e\u96fb\u67f1\u30de\u30fc\u30ad\u30f3\u30b0\u304f\u3089\u3044\u89e3\u308a\u3084\u3059\u3044\u3002<br>\u3069\u3063\u3061\u3060\u3063\u3066\u3044\u3044\u3051\u3069\u30023\u3064\u3042\u308b\u3068\u6570\u3048\u308b\u306e\u306f\u5104\u52ab\u306a\u306e\u3067\u30013\u3068\u3044\u3046\u6570\u5b57\u304c\u3042\u308c\u3070\u826f\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10\u9032\u6cd5\u304c\u30e1\u30b8\u30e3\u30fc\u306a\u300110\u5272\u306e\u4e16\u754c\u306b\u751f\u304d\u3066\u3066\u3001\u4f55\u5272\u5f15\u304d\uff01\u30fc\u306e\u30b7\u30fc\u30eb\u898b\u3066\u8cb7\u3044\u7269\u3059\u308b\u3058\u3083\u306a\u3044\u3059\u304b\u3002<br>\u4f55\u5272\u5f15\u304d\u306e\u30b7\u30fc\u30eb\u3092\u898b\u305f\u3068\u304d\u3083\u5024\u6bb5\u306e\u9ad8\u3044\u3082\u306e\u3092\u8cb7\u3063\u305f\u65b9\u304c\u5f97\u306a\u6c17\u304c\u3059\u308b\uff08\u76f8\u5bfe\uff09<br>\u4f55\u5341\u5186\u5f15\u304d\u306e\u30b7\u30fc\u30eb\u306f\uff08\u7d76\u5bfe\uff09<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.aspectRatio {\n  display: grid;\n  grid-template-columns: repeat(16, 1fr);\n  grid-template-rows: repeat(9, 1fr);\n  gap: 2em;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">aspectRatio<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">grid;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">grid-template-columns<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">repeat<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">16<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #81A1C1\">fr<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">grid-template-rows<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">repeat<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">9<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #81A1C1\">fr<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">gap<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #81A1C1\">em;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3046\u3044\u3046\u4f8b\u304c\u3082\u3057\u3042\u3063\u305f\u3089\u3001\u597d\u304d\u3002\u5925\u3057\u3044\u6570\u306eDIV\u30bf\u30b0\u3092\u4e26\u3079\u3001border\u3067\u67a0\u8272\u3092\u51fa\u305b\u3070\u3001\u30e2\u30cb\u30bf\u30fc\u306b\u3088\u304f\u3042\u308b16\uff1a9\u306e\u65b9\u773c\u7d19\u304c\u5370\u5237\u3067\u304d\u308b\u3002\u9ad8\u3055\u3068\u5e45\u306f100shv\u30fb100swv<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6700\u9069\u306a\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Flexbox<\/strong> \u3068&nbsp;<strong>Grid layout<\/strong>\u3001\u3067\u4e0a\u624b\u306b\u4f7f\u3044\u5206\u3051\u307e\u3057\u3087\u3046\u3001<br>\u30ab\u30fc\u30c9\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306b\u306f\u4fbf\u5229\u3067\u3059\u3001\u3054\u5c24\u3082\u3060\u3051\u3069\u3082\u6b74\u7136\u305f\u308b\u300c\u5dee\u300d\u304c\u4f1d\u308f\u3089\u306a\u3044\u3001\u7d50\u5c40\u3069\u3063\u3061\u3067\u3064\u304f\u308c\u3070\u3044\u3044\u306e\u3001\u3068\u611f\u3058\u305f\u30d2\u30c8\u304c\u3044\u305f\u306a\u3089\u3001\u300c\u30de\u30f3\u30b9\u30ea\u30fc\u30bf\u30a4\u30d7\u306e\u30ab\u30ec\u30f3\u30c0\u30fc\u300d12\u30f6\u6708\u5206\u3092\u3001\u8a66\u305b\u3070\u304d\u3063\u3068\u308f\u304b\u308b\u3001\u5929\u56fd\u3068\u5730\u7344\u3001\u5c71\u5d0e\u52aa\u3068\u4e09\u8239\u654f\u90ce\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5217\u306f\u6708\u66dc\u304b\u3089\u65e5\u66dc\u30677\u5217\u3001\u884c\u306f5\u9031\u5206\u30675\u884c\u306e\u3088\u3046\u3060\u304c\u3001\u5e74\u9593\u901a\u3059\u30686\u884c\u5fc5\u8981\u306a\u6708\u304c\u7d76\u5bfe\u306b\u751f\u3058\u308b\u3068\u3053\u308d\u3092\u3001\u5370\u5237\u3057\u305f\u5353\u4e0a\u30ab\u30ec\u30f3\u30c0\u30fc\u306a\u3069\u306f\u5de5\u592b\u3057\u30665\u884c\u3092\u5b9a\u578b\u306b\u3057\u3066\u3044\u308b\u5834\u5408\u304c\u591a\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u304c\u3002\u3055\u3059\u304c\u30b3\u30af\u30e8Campus Diary\uff08monthly\uff09<a href=\"https:\/\/www.amazon.co.jp\/%E3%82%B3%E3%82%AF%E3%83%A8-%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%91%E3%82%B9%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AA%E3%83%BC-%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89-%E3%83%8B-CML14-B6-26-12%E6%9C%88%E5%A7%8B%E3%81%BE%E3%82%8A\/dp\/B0FJLL2YH4\/ref=pb_allspark_purchase_sims_desktop_d_sccl_1_2\/357-6574128-3185134?pd_rd_w=XJS2f&amp;content-id=amzn1.sym.aca0b26a-6c0d-4161-811f-41a3702dbd43&amp;pf_rd_p=aca0b26a-6c0d-4161-811f-41a3702dbd43&amp;pf_rd_r=EF1QPYWAJ4E5VD5CN5D7&amp;pd_rd_wg=kPVdq&amp;pd_rd_r=c70984b1-f591-4f54-a0d9-0dbef2d9184f&amp;pd_rd_i=B0FJLL2YH4&amp;th=1\" target=\"_blank\" rel=\"noreferrer noopener\">Amazon<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u306f\u306a\u304b\u30896\u884c\u3067\u3064\u304f\u3063\u3066\u304a\u3044\u3066\u3001\u53f3\u624b\u5074\u306e\u7a7a\u304d\u30b9\u30da\u30fc\u30b9\u306b\u524d\u5f8c\u306e\u6708\u3092\u30df\u30cb\u30b5\u30a4\u30ba\u3067\u8868\u793a\u30022026\u5e74\u306f3\u30fb8\u30fb11\u6708\u304c6\u884c\u5fc5\u8981\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>grid-template-columns: repeat(7, 1fr);\ngrid-template-rows: repeat(6, 1fr);<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">grid-template-columns<\/span><span style=\"color: #D8DEE9FF\">: repeat(7<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> 1fr);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">grid-template-rows<\/span><span style=\"color: #D8DEE9FF\">: repeat(6<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> 1fr);<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u306f\u306a\u304b\u30896\u884c\u306a\u3089\u3001\u3053\u308c\u3002<br>\u6700\u5f8c\u306e\u30bb\u30eb\u3068\u3001\u6700\u5f8c\u304b\u30892\u756a\u76ee\u306e\u30bb\u30eb\u306b\u3001\u300cCampus Diary\u300d\u306f\u5148\u6708\u3068\u7fcc\u6708\u3092\u5c0f\u3055\u304f\u914d\u7f6e\u3002<br><code>grid-column: -\/-;<\/code><br><code>grid-row:  -\/-;<\/code>\u3000\u306f\u9762\u5012\u306a\u306e\u3067\u7aef\u6298\u308a\u307e\u3059\u3002\u304c\u3001\u6700\u5f8c\u304b\u3089\u306a\u3089\u30de\u30a4\u30ca\u30b9\u3064\u3051\u3066\u66f8\u3051\u3070\u826f\u3044<br>\u5c0f\u3055\u304f\u8868\u793a\u306a\u3093\u3066\u3053\u3068\u306fWeb\u3067\u306f\u4e0d\u53ef\u80fd\u306a\u306e\u3067\uff1cPrev \uff1aNext \uff1e\u3068\u304b\u306b\u306a\u308b\u3093\u3067\u3057\u3087\u3046\u304b\u3002\u3000\uff1c\u3000\uff1e\u3000\u30ea\u30f3\u30afBtn\u3067\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u3059\u308b\u3082\u826f\u3057\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>grid-template-columns: repeat(7, 1fr);\ngrid-template-rows: repeat(5, 1fr);\ngrid-auto-rows: 1fr;<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">grid-template-columns<\/span><span style=\"color: #D8DEE9FF\">: repeat(7<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> 1fr);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">grid-template-rows<\/span><span style=\"color: #D8DEE9FF\">: repeat(5<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> 1fr);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">grid-auto-rows<\/span><span style=\"color: #D8DEE9FF\">: 1fr;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u304c\u300c\u306f\u306a\u304b\u3089\u300d\u660e\u793a\u7684\u306b\u5b9a\u7fa9\u3057\u3066\u304a\u304f\u3001\u4e0b\u304c\u300c\u6697\u9ed9\u7684\u300d\u306b\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u304c\u8ffd\u52a0\u4f5c\u6210\u3055\u308c\u308b\u66f8\u304d\u65b9\u3001<code><strong>grid-auto-rows:<\/strong><\/code>\u30676\u884c\u76ee\u304c\u767b\u5834\u3059\u308b\u6708\u3082\u3001\u9ad8\u3055\u3092\u63c3\u3048\u3088\u3046\u3068\u8003\u616e\u3057\u3066\u308b\u308f\u3051\u3067\u3059\u304c\u30fb\u30fb\u30fb<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3044\u308d\u3044\u308d\u3001\u3044\u3084\u5168\u90e8\u9593\u9055\u3063\u3066\u307e\u3059\u306d\u3047\uff01\u7b11<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6708\u30fb\u706b\u30fb\u6c34\u30fb\u30fb\u30fb\u306e\u8868\u984c\u304c\u306a\u3044\u3002\u4f38\u3073\u7e2e\u307f\u3059\u308b\u30ab\u30ec\u30f3\u30c0\u30fc\u306f\u304d\u3063\u3068\u6c17\u6301\u3061\u60aa\u3044\u306e\u3067\u6b63\u65b9\u5f62\u306b\u306a\u308b\u56fa\u5b9a\u5024\u3092\u3064\u3051\u308b\u3001\u3068<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.calendar {  \n\tdisplay: grid;\n\tgrid-template-columns: repeat(7, 5em);\n\tgrid-template-rows: 2em repeat(5, 5em);\n\tgrid-auto-rows: 5em;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">calendar<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">grid;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">grid-template-columns<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">repeat<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">7<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #81A1C1\">em<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">grid-template-rows<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #81A1C1\">em<\/span><span style=\"color: #88C0D0\"> repeat<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #81A1C1\">em<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #D8DEE9\">grid-auto-rows<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #81A1C1\">em;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d9\u30fc\u30b9\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u304b\u306d\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u540c\u3058\u3053\u3068\u3092<strong>Flexbox<\/strong>\u3067\u3084\u308a\u306a\u3055\u3044\u3068\u8a00\u308f\u308c\u3066\u3082\u3001\u3061\u3087\u3063\u3068\u3084\u308a\u65b9\u304c\u601d\u3044\u6d6e\u304b\u3070\u306a\u3044\u3002\u96fb\u5353\u3068\u4eba\u529b\u3068\u6839\u6027\u304c\u3042\u308c\u3070\u53ef\u80fd\u306a\u3093\u3060\u308d\u3046\u3051\u3069\u3001\u305d\u3093\u306a\u6687\u304c\u3042\u3063\u305f\u3089\u3001\uff08Table\u30bf\u30b0\u66f8\u3051\u3088\uff09\u3068\u9053\u534a\u3070\u3067\u601d\u3046\u3060\u308d\u306a\u30fc\u3002\u3068\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u306b\u3042\u308b\u300c\u30ab\u30ec\u30f3\u30c0\u30fc\u300d\u30d6\u30ed\u30c3\u30af\u3092\u30dd\u30c1\u30c3\u3068\u7f6e\u3044\u3066\u307f\u308b\u3068\u3001\u3084\u306f\u308aTable\u3067\u66f8\u304b\u308c\u3066\u307e\u3057\u305f\u3002\u305d\u3089\u305d\u30fc\u304b\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u52d5\u7684\u306a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u3046\u5834\u5408\u3001Table\u30bf\u30b0\u3092\u90e8\u5206\u30b9\u30e9\u30a4\u30b9\u3057\u3066\u633f\u3080\u306e\u306f\u4f55\u306e\u82e6\u306b\u3082\u306a\u3089\u306a\u3044\u306f\u305a\u3060\u304c\u3001\u30b9\u30de\u30db\u3067\u898b\u305f\u5834\u5408<strong>Grid<\/strong>\u306e\u65b9\u304c\u611b\u3089\u3057\u304f\u63cf\u3051\u308b\u304b\u3082\u77e5\u308c\u306a\u3044\uff08\u3068\u3044\u3046\u6c17\u304c\u3057\u3066\u3044\u308b\u7121\u8cac\u4efb\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web\u30da\u30fc\u30b8\u3092\u3064\u304f\u308b\u3068\u304d\u306b\u3001\u6a2a\u306b\u5747\u7b493\u5206\u5272\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u304a\u304d\u305f\u304f\u3066100 \u00f7 3 = 33.3333333&#8230;\u3068\u96fb\u5353\u3067\u53e9\u3044\u305f\u3053\u3068\u306e\u3042\u308b\u30d2\u30c8\u3002 \u5747\u7b49\u306a3&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[162],"class_list":["post-453","post","type-post","status-publish","format-standard","hentry","category-css","tag-css-grid-layout"],"_links":{"self":[{"href":"https:\/\/www.studiomic.net\/index.php?rest_route=\/wp\/v2\/posts\/453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.studiomic.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.studiomic.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.studiomic.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.studiomic.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=453"}],"version-history":[{"count":0,"href":"https:\/\/www.studiomic.net\/index.php?rest_route=\/wp\/v2\/posts\/453\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.studiomic.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.studiomic.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.studiomic.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}