{"id":5545,"date":"2019-12-18T10:00:33","date_gmt":"2019-12-18T01:00:33","guid":{"rendered":"https:\/\/iseed.jp\/wp\/?p=1431"},"modified":"2025-09-02T11:34:33","modified_gmt":"2025-09-02T02:34:33","slug":"css3-grid","status":"publish","type":"post","link":"https:\/\/iseed.jp\/blog\/css3-grid\/","title":{"rendered":"\u30a4\u30b1\u3066\u308b\u3057\u30e4\u30d0\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\u300cCSS Grid\u300d\u3067\u30a4\u30b1\u3066\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u308d\u3046"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u672c\u65e5\u306f\u5c06\u6765\u4f7f\u3048\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u3001CSS Grid\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Grid\u3068\u306f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30dc\u30c3\u30af\u30b9\u306e\u8868\u793a\u3092\u5236\u5fa1\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7e26\u3068\u6a2a\u306e\u8ef8\u3092\u6307\u5b9a\u3057\u3066\u8868\u793a\u3067\u304d\u308b\u305f\u3081\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u70ba\u306b\u7121\u99c4\u306b\u5165\u308c\u5b50\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u305f\u3081\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u4ed6\u306b\u3082Float\u3068FlexBox\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u308c\u3089\u306f\u7e26\u307e\u305f\u306f\u6a2a\u306e\u3069\u3061\u3089\u304b1\u5217\u3057\u304b\u81ea\u7531\u306b\u914d\u7f6e\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u3064\u307e\u308a\u3069\u3046\u3044\u3046\u4e8b\uff1f<\/h3>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u305d\u306e\u540d\u306e\u901a\u308a\u30b0\u30ea\u30c3\u30c9\u72b6\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u3057\u305f\u3044\u6642<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u9ad8\u3055\u3084\u5e45\u304c\u7570\u306a\u308b\u8981\u7d20\u3092\u30bf\u30a4\u30eb\u72b6\u306b\u4e26\u3079\u305f\u3044\u6642<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u8981\u7d20\u3092\u7e26\u6a2a\u81ea\u7531\u306b\u914d\u7f6e\u3057\u305f\u3044\u6642<\/span><\/li><\/ul><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b49\u306b\u771f\u4fa1\u3092\u767a\u63ee\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u89aa\u8981\u7d20\u306b\u300cdisplay:grid\u300d\u307e\u305f\u306f\u300cdisplay:inline-grid\u300d\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u89aa\u8981\u7d20\u306f\u300c\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u300d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u4efb\u610f\u306e\u30b5\u30a4\u30ba\u306e\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3059\u308b\u3068\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u306b\u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u3068\u3044\u3046\u7dda\u304c\u5f15\u304b\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u89aa\u8981\u7d20\u306b\u5305\u307e\u308c\u3066\u3044\u308b\u5b50\u8981\u7d20\u306f\u300c\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u300d\u306b\u306a\u308a\u3001\u5f15\u304b\u308c\u305f\u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u306b\u6cbf\u3063\u3066\u81ea\u7531\u306b\u914d\u7f6e\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b9f\u969b\u306b\u3084\u3063\u3066\u307f\u3088\u3046<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS Grid\u306e\u57fa\u672c\u7684\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30c7\u30b6\u30a4\u30f3\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30d6\u30e9\u30a6\u30b6\u4e0a\u306e\u8868\u793a<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-1.png\" alt=\"\" class=\"wp-image-2420\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-1.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-1-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-1-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">HTML\u3092\u66f8\u304f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306eHTML\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u89aa\u8981\u7d20\u3092\u4f5c\u308a\u3001\u305d\u306e\u76f4\u4e0b\u306b\u8981\u7d20\u3092\u4f5c\u308a\u307e\u3059\u3002\u4eca\u56de\u306f6\u3064\u306e\u8981\u7d20\u304c\u5fc5\u8981\u306a\u306e\u3067\u3001\u76f4\u4e0b\u306b6\u3064\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">&lt;div class=\"parent\">\n  &lt;div class=\"child1\">1&lt;\/div>\n  &lt;div class=\"child2\">2&lt;\/div>\n  &lt;div class=\"child3\">3&lt;\/div>\n  &lt;div class=\"child4\">4&lt;\/div>\n  &lt;div class=\"child5\">5&lt;\/div>\n  &lt;div class=\"child6\">6&lt;\/div>\n&lt;\/div><\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">HTML\u306f\u4f55\u3068\u3053\u308c\u3060\u3051\u3067\u6e08\u307f\u307e\u3059\u3002\u4f59\u5206\u306b\u30b3\u30f3\u30c6\u30ca\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u611f\u52d5\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u3092\u4f5c\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7d9a\u3044\u3066CSS\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u5168\u4f53\u306e\u9ad8\u3055\u304c490px\u3001\u5e45\u306f\u81ea\u52d5\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u89aa\u8981\u7d20\u306bdisplay:grid\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  display:grid;\n  height:490px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3067\u89aa\u8981\u7d20(\u3053\u306eHTML\u3067\u3044\u3046\u3068.parent)\u304c\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u3092\u56f2\u3080\u7bb1\u3067\u3042\u308b\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u540c\u6642\u306b\u3001\u5b50\u8981\u7d20(.child1\uff5e6)\u306f\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306b\u306a\u308a\u3001\u3053\u308c\u304b\u3089\u5f15\u304f\u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u306b\u6cbf\u3063\u3066\u81ea\u7531\u306b\u914d\u7f6e\u3067\u304d\u308b\u30a2\u30a4\u30c6\u30e0\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u3092\u4f5c\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u306e\u4f8b\u306e\u901a\u308a\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u3057\u305f\u3044\u306e\u3067\u3001\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u5185\u306b\u3001\u7e26\u65b9\u5411\u306b4\u3064\u3001\u6a2a\u65b9\u5411\u306b3\u3064\u5206\u5272\u3057\u305f\u72b6\u614b\u306e\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u306f\u3001\u30b0\u30ea\u30c3\u30c9\u306e1\u884c\u3001\u307e\u305f\u306f1\u5217\u3092\u3055\u3059\u8a00\u8449\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u306e\u4f5c\u6210\u306b\u306f\u4ee5\u4e0b\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">grid-template-columns<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">grid-template-rows<\/span><\/li><\/ul><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305agrid-template-columns\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3001\u30b0\u30ea\u30c3\u30c9\u3092\u7e26\u306b\u5206\u5272\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5206\u5272\u3057\u305f\u3044\u6570\u3060\u3051\u5024\u3092\u8a18\u5165\u3057\u307e\u3059\u3002\u5024\u306e\u9593\u306f\u30b9\u30da\u30fc\u30b9\u3092\u3042\u3051\u3066\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30e9\u30e0\u306e1\u5217\u3054\u3068\u306e\u30b5\u30a4\u30ba\u3082\u3001\u3053\u3053\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  display:grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr;\n  height:490px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u300cfr\u300d(fraction\/\u6bd4\u7387)\u3068\u3044\u3046\u5358\u4f4d\u3067\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3057\u5206\u5272\u3057\u307e\u3057\u305f\u3002<br>\u5e45\u3084\u9ad8\u3055\u3092\u76f8\u5bfe\u7684\u306b\u6307\u5b9a\u3067\u304d\u308b\u3059\u3054\u3044\u3084\u3064\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u3048\u3070\u300cgrid-template-columns\u300d\u306b\u300c2fr 1fr 1fr\u300d\u3092\u6307\u5b9a\u3059\u308b\u3068\u30012fr\u306e\u30ab\u30e9\u30e0\u306f50%\u30011fr\u306e\u30ab\u30e9\u30e0\u306f25%\u306e\u5e45\u30673\u5206\u5272\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u72b6\u614b\u3067\u306f\u30d6\u30e9\u30a6\u30b6\u4e0a\u306b\u306f\u4f55\u3082\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u304c\u3001\u3053\u3093\u306a\u98a8\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid1.png\" alt=\"\" class=\"wp-image-2400\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid1.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid1-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid1-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u4e0a\u306b5\u672c\u306e\u7e26\u7dda\u304c\u5f15\u304b\u308c\u3001\u5747\u7b49\u306a\u5e45\u30674\u3064\u306b\u5206\u5272\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u3092\u5206\u5272\u3057\u30b0\u30ea\u30c3\u30c9\u30c8\u30e9\u30c3\u30af\u3092\u4f5c\u308b\u3068\u3001\u30c8\u30e9\u30c3\u30af\u3068\u30c8\u30e9\u30c3\u30af\u306e\u9593\u306b\u898b\u3048\u306a\u3044\u7dda\u304c\u5f15\u304b\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3092\u300c\u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u300d\u3068\u8a00\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6a2a\u306fgrid-template-rows\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u5206\u5272\u3057\u307e\u3059\u3002<br>(\u66f8\u304d\u65b9\u3001\u4f7f\u3048\u308b\u5024\u306fgrid-template-columns\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u540c\u3058\u3067\u3059)<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  display:grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr;\n  grid-template-rows: 1fr 1fr 1fr;\n  height:490px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u304c\u7e26\u306b5\u672c\u3001\u6a2a\u306b4\u672c\u5f15\u304b\u308c\u3001\u30b3\u30f3\u30c6\u30ca\u30fc\u304c\u305d\u308c\u305e\u308c\u5747\u7b49\u306a\u30b5\u30a4\u30ba\u3067\u7e264\u3064\u3001\u6a2a3\u3064\u306b\u5206\u5272\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid2.png\" alt=\"\" class=\"wp-image-2402\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid2.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid2-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid2-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e\u8a18\u8ff0\u306fgrid-template\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u4e00\u62ec\u306b\u6307\u5b9a\u3059\u308b\u4e8b\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  display:grid;\n  \/* row(\u884c)\u3001column(\u5217)\u306e\u9806\u3067\u6307\u5b9a\u3057\u307e\u3059\n     row\u3068column\u306e\u5024\u306e\u9593\u306b\u306f\u3001\u30b9\u30e9\u30c3\u30b7\u30e5\u3092\u5165\u529b\u3057\u307e\u3059 *\/\n  grid-template: 1fr 1fr 1fr \/ 1fr 1fr 1fr 1fr;\n  height:490px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u3092\u914d\u7f6e\u3059\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><br>\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306f\u3001\u6307\u5b9a\u3057\u305f\u30b0\u30ea\u30c3\u30c9\u30e9\u30a4\u30f3\u306b\u6cbf\u3063\u3066\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u914d\u7f6e\u306b\u306f\u4ee5\u4e0b\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">grid-row-start<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">grid-row-end<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">grid-column-start<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">grid-column-end<\/span><\/li><\/ul><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">grid-row-\u25cb\u25cb\u306f\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u884c(\u6a2a)\u3001grid-column-\u25cb\u25cb\u306f\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u5217(\u7e26)\u306e\u914d\u7f6e\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306e\u5834\u5408\u30011\u756a\u76ee\u306e\u5b50\u8981\u7d20(.child1)\u306f1\u756a\u76ee\u306e\u5217\u30681\u756a\u76ee\u306e\u884c\u306b\u914d\u7f6e\u3057\u3066\u30013\u756a\u76ee\u306e\u5217\u30683\u756a\u76ee\u306e\u884c\u307e\u3067\u8868\u793a\u3057\u305f\u3044\u306e\u3067\u3001\u3053\u3046\u66f8\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.child1{\n  grid-row-start: 1;\n  grid-row-end: 3;\n  grid-column-start: 1;\n  grid-column-end: 3;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u3092\u4f7f\u3063\u3066\u5165\u529b\u3059\u308b\u4e8b\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">grid-row\u306f\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u884c(\u6a2a)\u3001grid-column\u306f\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u5217(\u7e26)\u306e\u914d\u7f6e\u3092\u4e00\u62ec\u3067\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u3092\u4f7f\u3046\u5834\u5408\u306f\u3001\u30b0\u30ea\u30c3\u30c9\u306e\u914d\u7f6e\u3092\u958b\u59cb\u3059\u308b\u4f4d\u7f6e\u3092\u5de6\u306b\u3001\u30b0\u30ea\u30c3\u30c9\u306e\u914d\u7f6e\u3092\u7d42\u4e86\u3059\u308b\u4f4d\u7f6e\u3092\u53f3\u306b\u66f8\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.child1{\n  grid-row: 1\/3;\n  grid-column: 1\/3;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u884c\u30b0\u30ea\u30c3\u30c9\u3001\u5217\u30b0\u30ea\u30c3\u30c9\u306e\u958b\u59cb\u4f4d\u7f6e\u30fb\u7d42\u4e86\u4f4d\u7f6e\u3092\u5168\u3066\u307e\u3068\u3081\u3066\u6307\u5b9a\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u300cgrid-area\u300d\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.child1{\n  \/* \u5de6\u304b\u3089\u3001\n  grid-row-start \/ grid-column-start \/ grid-row-end \/ grid-column-end\n  \u306e\u5024 *\/\n  grid-area: 1 \/ 1 \/ 3 \/ 3;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3093\u306a\u611f\u3058\u3067\u914d\u7f6e\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.child1{\n  grid-row: 1\/3;\n  grid-column: 1\/3;\n}\n.child2{\n  grid-row: 3\/4;\n  grid-column: 1\/2;\n}\n.child3{\n  grid-row: 3\/4;\n  grid-column: 2\/3;\n}\n.child4{\n  grid-row: 1\/2;\n  grid-column: 3\/4;\n}\n.child5{\n  grid-row: 1\/2;\n  grid-column: 4\/5;\n}\n.child6{\n  grid-row: 2\/4;\n  grid-column: 3\/5;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u884c\u3068\u5217\u3092\u4e00\u62ec\u3067\u6307\u5b9a\u3059\u308bgrid-row\u3068grid-column\u3067\u66f8\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">start\uff5eend\u307e\u3067\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5168\u90e8\u4f7f\u3046\u3068\u7169\u96d1\u3059\u304e\u3001grid-area\u3067\u5168\u90e8\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u306b\u3059\u308b\u3068\u3084\u3084\u3053\u3057\u3044(\u500b\u4eba\u7684\u306b)\u306e\u3067\u3001\u3053\u3046\u66f8\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d6\u30e9\u30a6\u30b6\u4e0a\u306e\u8868\u793a\u306f\u3053\u3046\u306a\u308a\u307e\u3059\u3002<br>(\u308f\u304b\u308a\u3084\u3059\u304f\u306a\u308b\u3088\u3046\u8272\u5206\u3051\u3057\u3066\u3044\u307e\u3059)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid4.png\" alt=\"\" class=\"wp-image-2405\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid4.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid4-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid4-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u3088\u308a\u308f\u304b\u308a\u3084\u3059\u304f\u3059\u308b\u3068\u3001\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid5.png\" alt=\"\" class=\"wp-image-2406\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid5.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid5-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid5-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b0\u30ea\u30c3\u30c9\u9593\u306e\u9699\u9593\u3092\u6307\u5b9a\u3059\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u914d\u7f6e\u306f\u3067\u304d\u307e\u3057\u305f\u304c\u3001\u30a2\u30a4\u30c6\u30e0\u306e\u9593\u306b\u9699\u9593\u304c\u306a\u304f\u8a70\u307e\u3063\u3066\u898b\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">column-gap<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">row-gap<\/span><\/li><\/ul><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u8a18\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3057\u3066\u3001\u9699\u9593\u3092\u3042\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">column-gap\u3067\u5217(\u7e26)\u3001row-gap\u3067\u884c(\u6a2a)\u306e\u9699\u9593\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  display:grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr;\n  grid-template-rows: 1fr 1fr 1fr;\n  height:490px;\n  \/* \u8ffd\u52a0 *\/\n  column-gap: 12px;\n  row-gap: 12px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u8868\u793a\u306f\u3053\u3093\u306a\u611f\u3058<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid6.png\" alt=\"\" class=\"wp-image-2410\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid6.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid6-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid6-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u2193\u3088\u308a\u308f\u304b\u308a\u3084\u3059\u304f<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid7.png\" alt=\"\" class=\"wp-image-2616\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid7.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid7-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid7-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f93\u6765\u306eFloat\u3084FlexBox\u3067\u3059\u3068\u3001\u96a3\u63a5\u3059\u308b\u5b50\u8981\u7d20\u306e\u9593\u306b\u9699\u9593\u3092\u3042\u3051\u305f\u3044\u6642\u306b\u306f\u3001\u5b50\u8981\u7d20\u3054\u3068\u306b\u4f59\u767d\u3092\u3064\u3051\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grid\u306f\u89aa\u8981\u7d20\u306bgap\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4ed8\u3051\u308c\u3070\u3001\u5b50\u8981\u7d20\u306b\u81ea\u52d5\u7684\u306b\u9699\u9593\u3092\u3042\u3051\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9699\u9593\u304c\u3067\u304d\u308b\u306e\u306f\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u9593\u3060\u3051\u306a\u306e\u3067\u3001\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u30fc\u306e\u56db\u8fba\u306b\u4f59\u767d\u306f\u3064\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9699\u9593\u306e\u5e45\u306f\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u3067\u8a18\u8ff0\u3059\u308b\u4e8b\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u62ec\u3067\u6307\u5b9a\u3057\u305f\u3044\u5834\u5408\u3001grid-gap\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.parent{\n  \/* row(\u884c)\u3001column(\u5217)\u306e\u9806\u3067\u6307\u5b9a\u3057\u307e\u3059 *\/\n  grid-gap: 12px 12px;\n  \/* \u3069\u3061\u3089\u3082\u540c\u3058\u5024\u306e\u5834\u5408\u3001\u7701\u7565\u3082\u3067\u304d\u307e\u3059 *\/\n  grid-gap: 12px;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b8c\u6210<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><br>\u3053\u308c\u3067\u5b8c\u6210\u3067\u3059\u3002\u304b\u306a\u308a\u30b7\u30f3\u30d7\u30eb\u306a\u5de5\u7a0b\u3067\u6e08\u307f\u307e\u3059\u3088\u306d\uff01<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305f\u3068\u3048\u3070\u540c\u3058\u4e8b\u3092\u3084\u308a\u305f\u3044\u6642\u3001\u305f\u3068\u3048\u3070FlexBox\u3060\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5de5\u7a0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML<\/h3>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">&lt;div class=\"container\">\n  &lt;div class=\"parent1\">\n    &lt;div class=\"parent1-child1\">1&lt;\/div>\n    &lt;div class=\"parent1-child2\">2&lt;\/div>\n    &lt;div class=\"parent1-child3\">3&lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"parent2\">\n    &lt;div class=\"parent2-child1\">4&lt;\/div>\n    &lt;div class=\"parent2-child2\">5&lt;\/div>\n    &lt;div class=\"parent2-child3\">6&lt;\/div>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">CSS<\/h3>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">.container{\n  display: flex;\n}\n\n.parent1, .parent2 {\n  display: flex;\n  flex-wrap: wrap;\n  width: 50%;\n}\n\n.parent2{\n  margin: 0 0 0 12px;\n}\n\n.parent1-child1{\n  width: 100%;\n}\n\n.parent1-child1, .parent2-child3{\n  height: calc(((490px - 12px) \/ 3) * 2);\n}\n\n.parent1-child2, .parent1-child3, .parent2-child1, .parent2-child2 {\n  height: calc((490px - 12px) \/ 3);\n}\n\n.parent1-child2, .parent1-child3{\n  width: calc(50% - 6px);\n}\n\n.parent1-child2{\n  margin: 12px 0 0;\n}\n\n.parent1-child3 {\n  margin: 12px 0 0 12px;\n}\n\n.parent2-child1, .parent2-child2 {\n  width: calc(50% - 6px);\n}\n\n.parent2-child2 {\n  margin: 0 0 0 12px;\n}\n\n.parent2-child3 {\n  margin: 12px 0 0 0;\n  width: 100%;\n}<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u56f3\u89e3<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-flex.png\" alt=\"\" class=\"wp-image-2576\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-flex.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-flex-300x225.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid-flex-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3093\u306a\u611f\u3058\u3067\u3001<\/p>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u89aa\u8981\u7d20\u30922\u3064\u4f5c\u308a\u5b50\u8981\u7d20\u30923\u3064\u305a\u3064\u304f\u308b\u3093\u3067\u3001\u89aa\u8981\u7d20\u306bFlexBox\u3092\u9069\u7528\u3057\u3001\u3055\u3089\u306b\u4e0a\u304b\u3089\u30b3\u30f3\u30c6\u30ca\u30fc\u3067\u304f\u308b\u307f\u3001\u305d\u308c\u306b\u3082FlexBox\u3092\u9069\u7528\u3057\u3066\u89aa\u8981\u7d20\u3092\u6a2a\u4e26\u3073\u306b\u2026\u3068\u66f8\u304b\u306a\u3044\u3068\u3068\u3044\u3051\u306a\u3044<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[16px]\">\u3055\u3089\u306b\u3001 \u8981\u7d20\u9593\u306b\u9699\u9593\u3092\u958b\u3051\u305f\u304b\u3063\u305f\u308a\u3001\u6700\u521d\u306e\u4f8b\u306e\u3088\u3046\u306b\u5b50\u8981\u7d20\u306e\u5927\u304d\u3055\u3092\u5909\u3048\u306a\u304c\u3089\u914d\u7f6e\u3057\u305f\u3051\u308c\u3070\u3001\u3055\u3089\u306b\u5b50\u8981\u7d20\u306b\u8a18\u8ff0\u3092\u8db3\u3055\u306a\u3044\u3068\u3044\u3051\u306a\u3044<\/span><\/li><\/ul><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u306e\u3067\u3001\u66f8\u304f\u306e\u304c\u9762\u5012\u306a\u3046\u3048\u8aad\u307f\u3065\u3089\u3044\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u304c\u3001CSS Grid\u306a\u3089\u4e0a\u8a18\u3067\u793a\u3057\u305f\u901a\u308a\u3001\u3060\u3044\u3076\u30ad\u30ec\u30a4\u306b\u66f8\u3051\u307e\u3059\uff01<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3044\u304b\u304c\u3067\u3057\u305f\u304b\uff1f<br>CSS Grid\u3092\u77e5\u3089\u306a\u3044\u65b9\u306b\u5411\u3051\u3066\u66f8\u3044\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u79c1\u81ea\u8eab\u307e\u3060\u307e\u3060\u7406\u89e3\u304c\u6d45\u304f\u3001\u3082\u3063\u3068\u52b9\u7387\u306e\u826f\u3044\u66f8\u304d\u65b9\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u8aac\u660e\u3057\u305f\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3054\u304f\u4e00\u90e8\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS grid\u306b\u306f\u3053\u306e\u4ed6\u306b\u3082\u305f\u304f\u3055\u3093\u4fbf\u5229\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3042\u308b\u306e\u3067\u3001\u63a2\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u2026<\/p>\n\n\n\n<body>\n    <div class=\"css-grid-overlap-div\">\n      <img decoding=\"async\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/11\/e1150_1.png\">\n      <p class=\"css-grid-overlap-p\">\u3061\u3087\u3063\u3068\u5f85\u3063\u305f<\/p>\n    <\/div>\n<\/body>\n\n<style>\n.css-grid-overlap-div {\n    width:100%;\n    height:auto;\n    position: relative;\n}\n.css-grid-overlap-div img{\n    width:100%;\n    height:auto;\n}\n.css-grid-overlap-p {\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%,-50%);\n    padding:0;\n    margin:0;\n    font-size:30px !important;\n}\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">\u7acb\u3061\u306f\u3060\u304b\u308bIE11\u306e\u58c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u307e\u307e\u300c\u3044\u304b\u304c\u3067\u3057\u305f\u304b\uff1f\u300d\u3067\u7de0\u3081\u306b\u304b\u304b\u308d\u3046\u3068\u3057\u305f\u3093\u3067\u3059\u304c\u3001IE11\u304c\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS Grid\u306e\u5b9f\u88c5\u306f\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u53e4\u3044\u4ed5\u69d8\u3067\u5b9f\u88c5\u3055\u308c\u3001\u6319\u52d5\u304c\u9055\u3044\u3059\u304e\u308b\u306e\u3067\u5b9f\u8cea\u307b\u307c\u4e92\u63db\u6027\u304c\u306a\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u306a\u306e\u3067\u3001\u4e0a\u3067\u66f8\u3044\u3066\u304d\u305fCSS\u3092\u305d\u306e\u307e\u307e\u5b9f\u88c5\u3059\u308b\u3068\u3001\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/12\/ScreenShot_grid_IE11.png\" alt=\"\" class=\"wp-image-2416\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid_IE11.png 1024w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid_IE11-300x169.png 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/12\/ScreenShot_grid_IE11-768x432.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f55\u3082\u51fa\u306a\u3044\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">IE11\u3092\u7121\u8996\u3059\u308c\u3070\u4f7f\u3048\u308b\u4e8b\u306f\u4f7f\u3048\u307e\u3059\u304c\u3001\u307e\u3060\u30b7\u30a7\u30a2\u7684\u306bIE11\u3092\u7121\u8996\u3059\u308b\u306e\u306f\u975e\u5e38\u306b\u96e3\u3057\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(Gulp\u3068\u304b\u306b\u5165\u308c\u3089\u308c\u308b\u300cAutoprefixer\u300d\u3068\u3044\u3046\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u3046\u624b\u6bb5\u3082\u3042\u308a\u307e\u3059\u304c\u3001\u5c0e\u5165\u304c\u3061\u3087\u3063\u3068\u5927\u5909&amp;\u5909\u63db\u5f8c\u624b\u76f4\u3057\u304c\u5fc5\u8981\u306a\u6642\u3082\u3042\u308b)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3061\u306a\u307f\u306b\u3001Windows7\u306b\u30d7\u30ea\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308bIE11\u306f2020\u5e741\u6708\u306b\u30b5\u30dd\u30fc\u30c8\u304c\u7d42\u4e86\u3057\u307e\u3059\u304c\u3001Windows8.1\u306eIE11\u306f2023\u5e74\u3001Windows10\u306eIE11\u306b\u3064\u3044\u3066\u306f2025\u5e74\u307e\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u307e\u3059\u3002\u624b\u5f37\u3044\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u65e5\u306f\u5c06\u6765\u4f7f\u3048\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u3001CSS Grid\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 CSS Grid\u3068\u306f \u30dc\u30c3\u30af\u30b9\u306e\u8868\u793a\u3092\u5236\u5fa1\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002 \u7e26\u3068\u6a2a\u306e\u8ef8\u3092\u6307\u5b9a\u3057\u3066\u8868\u793a\u3067\u304d\u308b\u305f\u3081\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u70ba\u306b\u7121\u99c4\u306b\u5165\u308c\u5b50\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u307e\u3059\u3002 \u30ec\u30a4\u30a2 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2453,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[3],"tags":[40],"class_list":["post-5545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-html-css"],"_links":{"self":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/comments?post=5545"}],"version-history":[{"count":1,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5545\/revisions"}],"predecessor-version":[{"id":5733,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5545\/revisions\/5733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/media\/2453"}],"wp:attachment":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/media?parent=5545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/categories?post=5545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/tags?post=5545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}