{"id":7675,"date":"2022-10-03T11:16:26","date_gmt":"2022-10-03T02:16:26","guid":{"rendered":"https:\/\/y-com.info\/contents\/?p=7675"},"modified":"2022-10-03T11:16:26","modified_gmt":"2022-10-03T02:16:26","slug":"css%e3%81%aegrid%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e7%b0%a1%e5%8d%98%e3%81%ab%e7%b5%84%e3%81%bf%e6%8f%9b%e3%81%88%e5%8f%af%e8%83%bd%e3%81%aa%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%82%92","status":"publish","type":"post","link":"https:\/\/y-com.info\/contents\/?p=7675","title":{"rendered":"CSS\u306egrid\u3092\u4f7f\u3063\u3066\u7c21\u5358\u306b\u7d44\u307f\u63db\u3048\u53ef\u80fd\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u308b"},"content":{"rendered":"<p><span class=\"anchor\"><a id=\"anc_01\"><\/a><\/span><\/p>\n<section class=\"entry__section\">\n<h2 class=\"section__title\">\u30b0\u30ea\u30c3\u30c9\u3092\u6d3b\u7528\u3057\u305fCSS\u306egrid\u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n<div class=\"section__block\">\n\t\t\u4eca\u56de\u306f\u3001CSS\u306eGrid\u306b\u3088\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\t\t<strong>Grid\u3068\u306f\u30bf\u30a4\u30eb\u306e\u3088\u3046\u306b\u30a8\u30ea\u30a2\u3092\u533a\u5206\u3051\u3057\u3066\u8981\u7d20\u3092\u914d\u7f6e\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u6307\u5b9a\u65b9\u6cd5<\/strong>\u3067\u3059\u3002<br \/>\n\t\t\u521d\u3081\u3066Grid\u306b\u89e6\u308c\u308b\u65b9\u306f\u3001\u305d\u306e\u304c\u6307\u5b9a\u306e\u4ed5\u65b9\u304c\u96e3\u3057\u304f\u611f\u3058\u3089\u308c\u308b\u65b9\u3082\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u9806\u3092\u8ffd\u3063\u3066\u7406\u89e3\u3059\u308b\u3053\u3068\u3067\u3001<strong>\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb<\/strong>\u3067\u3042\u308b\u3053\u3068\u304c\u308f\u304b\u308b\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\t\t\u4ed6\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u7121\u3044\u7279\u5fb4\u304c\u3042\u308b\u306e\u3067\u3001\u305c\u3072\u899a\u3048\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\t\t\u7279\u306b\u3001\u305d\u306e\u6307\u5b9a\u306e\u7279\u6027\u4e0a\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u7d44\u307f\u63db\u3048\u304c\u5bb9\u6613\u3068\u3044\u3046\u3053\u3068\u304c\u3042\u308a\u3001<br \/>\n\t\t\u6b21\u306e\u3088\u3046\u306a\u3001\u914d\u7f6e\u306e\u7d44\u307f\u63db\u3048\u304c\u7c21\u5358\u306b\u3067\u304d\u307e\u3059\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group-5-1.png\" alt=\"Group 5 (1)\" width=\"990\" height=\"439\" class=\"alignnone size-full wp-image-7688\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group-5-1.png 990w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group-5-1-600x266.png 600w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/>\n\t<\/div>\n<h2 class=\"section__title\">Grid\u4f7f\u7528\u306e\u6d41\u308c<\/h2>\n<div class=\"section__block\">\n\t\tGrid\u306e\u6307\u5b9a\u306f\u3001\u5168\u4f53\u50cf\u304c\u5206\u304b\u3063\u3066\u3044\u306a\u3044\u3068\u306a\u304b\u306a\u304b\u3084\u3084\u3053\u3057\u304f\u306a\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<br \/>\n\t\t\u521d\u3081\u306f\u3001\u3053\u306eGrid\u306e\u6307\u5b9a\u306b\u6163\u308c\u306a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<br \/>\n\t\t\u6163\u308c\u308b\u307e\u3067\u306f<strong>\u3069\u306e\u3088\u3046\u306b\u30a2\u30a4\u30c6\u30e0\u914d\u7f6e\u3092\u3057\u305f\u3044\u306e\u304b\u3092\u3001\u307e\u305a\u7d19\u306b\u66f8\u3044\u3066\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046<\/strong>\u3002<br \/>\n\t\t\u6163\u308c\u3066\u304f\u308c\u3070\u3001\u982d\u306e\u4e2d\u3067\u60f3\u50cf\u3057\u306a\u304c\u3089\u30b3\u30fc\u30c9\u306b\u843d\u3068\u3057\u8fbc\u3093\u3067\u3044\u304f\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\t\t\u3067\u306f\u3001Grid\u306e\u4f5c\u6210\u306e\u6d41\u308c\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\tGrid\u306e\u6307\u5b9a\u3067\u306f\u3001\u5927\u304d\u304f2\u3064\u306e\u6bb5\u968e\u304c\u3042\u308a\u307e\u3059\u3002\n\t<\/p><\/div>\n<h3 class=\"section__title2\">\u30b0\u30ea\u30c3\u30c9\uff08\u533a\u5206\u3051\uff09\u3092\u4f5c\u308b<\/h3>\n<div class=\"section__block\">\n\t\t<strong>\u307e\u305a\u306f\u30b0\u30ea\u30c3\u30c9\u3092\u4f5c\u308a\u307e\u3059\u3002<\/strong><br \/>\n\t\t\u3053\u306eGrid\u306e\u540d\u524d\u306e\u3082\u3068\u3068\u306a\u3063\u305f\u3001\u3053\u306e\u3088\u3046\u306a\u30e1\u30c3\u30b7\u30e5\u72b6\u306e\u3082\u306e\u3092\u8003\u3048\u307e\u3059\u3002<br \/>\n\t\t\u3053\u306e\u30b0\u30ea\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u3001\u305d\u308c\u305e\u308c\u306e\u533a\u753b\u306e\u914d\u7f6e\u3092\u5f8c\u306b\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\t\t\u307e\u305a\u306f<strong>\u7e26\u6a2a\u306b\u3044\u304f\u3064\u305a\u3064\u306b\u5206\u3051\u308b\u306e\u304b<\/strong>\u3001\u305d\u3057\u3066\u305d\u308c\u305e\u308c<strong>\u5206\u3051\u305f\u30b0\u30ea\u30c3\u30c9\u3092\u3069\u308c\u304f\u3089\u3044\u306e\u30b5\u30a4\u30ba\u306b\u3059\u308b\u306e\u304b<\/strong>\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_2_2-591\u00d7515.png\" alt=\"Group_2_2 591\u00d7515\" width=\"591\" height=\"515\" class=\"alignnone size-full wp-image-7677\" \/><br \/>\n\t\t\u3053\u3053\u3067\u306f\u30b0\u30ea\u30c3\u30c9\u3092\u4f5c\u3063\u305f\u3060\u3051\u306a\u306e\u3067\u3001\u5b9f\u969b\u306e\u914d\u7f6e\u306f\u6307\u5b9a\u3057\u3066\u3044\u307e\u305b\u3093\u3002<br \/>\n\t\t\u203b\u6b63\u78ba\u306b\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u914d\u7f6e\u304c\u3055\u308c\u307e\u3059\n\t<\/div>\n<h3 class=\"section__title2\">\u30b0\u30ea\u30c3\u30c9\u306e\u756a\u53f7\u3092\u4f7f\u3063\u3066\u30a2\u30a4\u30c6\u30e0\u3092\u914d\u7f6e<\/h3>\n<div class=\"section__block\">\n\t\t\u6b21\u306b\u3001<strong>\u5148\u307b\u3069\u4f5c\u3063\u305f\u30b0\u30ea\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u3001\u30a2\u30a4\u30c6\u30e0\u3092\u3069\u306e\u3088\u3046\u306b\u914d\u7f6e\u3059\u308b\u304b\u3092\u8a2d\u5b9a<\/strong>\u3057\u307e\u3059\u3002<br \/>\n\t\t\u3053\u3053\u3067\u306f\u5177\u4f53\u7684\u306a\u30b3\u30fc\u30c9\u306f\u307e\u3060\u7d39\u4ecb\u3057\u307e\u305b\u3093\u304c\u3001\u3053\u306e\u3088\u3046\u306b<strong>\u5857\u308a\u7d75\u306e\u3088\u3046\u306b\u3057\u3066\u3069\u306e\u30a8\u30ea\u30a2\u3092\u8272\u5206\u3051\u3057\u3066\u5857\u308b\u304b<\/strong>\u3092\u8003\u3048\u307e\u3059\u3002<br \/>\n\t\t\u3053\u3053\u3092\u982d\u3067\u3067\u304d\u308c\u3070\u305d\u306e\u307e\u307e\u30b3\u30fc\u30c9\u306b\u843d\u3068\u3057\u8fbc\u3081\u307e\u3059\u3057\u3001\u305d\u308c\u304c\u96e3\u3057\u3044\u521d\u3081\u306e\u3053\u308d\u306f\u3001\u7d19\u306a\u3069\u306b\u66f8\u3044\u3066\u8003\u3048\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_5.png\" alt=\"Group_5\" width=\"990\" height=\"439\" class=\"alignnone size-full wp-image-7679\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_5.png 990w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_5-600x266.png 600w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/>\n\t<\/div>\n<\/section>\n<p><span class=\"anchor\"><a id=\"anc_02\"><\/a><\/span><\/p>\n<section class=\"entry__section\">\n<h2 class=\"section__title\">CSS\u306b\u3088\u308bGrid\u306e\u6307\u5b9a\u65b9\u6cd5<\/h2>\n<div class=\"section__block\">\n\t\t\u3067\u306f\u3001\u5177\u4f53\u7684\u306b\u30b3\u30fc\u30c9\u3067\u66f8\u3044\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\n\t<\/div>\n<h3 class=\"section__title2\">HTML\u8981\u7d20\u306e\u6e96\u5099<\/h3>\n<div class=\"section__block\">\n\t\t<strong>CSS\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\u3059\u308b\u524d\u306b\u3001HTML\u3067\u5fc5\u8981\u306a\u8981\u7d20\u3092\u914d\u7f6e<\/strong>\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u30b0\u30ea\u30c3\u30c9\u3092\u4f7f\u3046\u306b\u306f\u3001\u5b9f\u969b\u306b\u914d\u7f6e\u3057\u305f\u3044\u8981\u7d20\uff08.item\uff09\u3092\u4e26\u3079\u3001\u305d\u306e\u5468\u308a\u3092\uff08.wrapper\uff09\u56f2\u3044\u307e\u3059\u3002<br \/>\n\t\t<strong>\u5185\u90e8\u306e\u5404\u8981\u7d20\uff08.item\uff09\u306f\u5b9f\u969b\u306b\u914d\u7f6e\u3055\u308c\u308b\u8981\u7d20\u3067\u3001\u5916\u5074\u306e\u8981\u7d20\u3067\u306f\uff08.wrapper\uff09\u5185\u90e8\u306b\u914d\u7f6e\u3055\u308c\u308b\u8981\u7d20\u306e\u30b0\u30ea\u30c3\u30c9\u3092\u4f5c\u308b\u5f79\u5272<\/strong>\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\t\t\u4f8b\u3048\u3070\u3053\u306e\u3088\u3046\u306b\u66f8\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;wrapper&quot;&gt;\r\n  &lt;div class=&quot;item&quot;&gt;1&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;2&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;3&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;4&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;5&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;6&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;7&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;8&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;9&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;10&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;11&lt;\/div&gt;\r\n  &lt;div class=&quot;item&quot;&gt;12&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/p><\/div>\n<h3 class=\"section__title2\">\u533a\u5206\u3051\u3092\u4f5c\u308b<\/h3>\n<div class=\"section__block\">\n\t\t<strong>\u307e\u305a\u306f\u533a\u5206\u3051\u3092\u4f5c\u308b<\/strong>\u306e\u3067\u3057\u305f\u306d\u3002<br \/>\n\t\t\u30b0\u30ea\u30c3\u30c9\u3092\u4f5c\u308b\u306e\u306f\u5916\u5074\u306e\u8981\u7d20\uff08.wrapper\uff09\u306e\u5f79\u5272\u3067\u3059\u3002<br \/>\n\t\t\u7528\u610f\u3057\u305fHTML\u306e\u3046\u3061<strong>.wrapper\u8981\u7d20\u306b\u5bfe\u3057\u3066\u3001\u30b0\u30ea\u30c3\u30c9\u306e\u6307\u5b9a<\/strong>\u3092\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t<strong>\u3053\u306e\u30b0\u30ea\u30c3\u30c9\u3092\u3082\u3068\u306b\u3001\u30a2\u30a4\u30c6\u30e0\u3092\u914d\u7f6e<\/strong>\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n\t\t\u982d\u306e\u4e2d\u3067\u8003\u3048\u3089\u308c\u306a\u3044\u4eba\u306f\u3001\u307e\u305a\u306f\u7d19\u306b\u7c21\u5358\u306b\u66f8\u3044\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u4eca\u56de\u306f\u3001\u3053\u306e\u3088\u3046\u306a4\u00d73\u306e\u30de\u30b9\u3092\u7528\u610f\u3057\u3066\u307f\u307e\u3059\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_2_2-591\u00d75151.png\" alt=\"Group_2_2 591\u00d7515\" width=\"591\" height=\"515\" class=\"alignnone size-full wp-image-7680\" \/>\n\t<\/div>\n<h3 class=\"section__title2\">\u5217\u3092\u4f5c\u308b\uff08\u7e26\u306b\u5206\u3051\u308b\uff09<\/h3>\n<div class=\"section__block\">\n\t\t\u6b21\u306b\u5b9f\u969b\u306e\u8981\u7d20\u306e\u914d\u7f6e\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\u304c\u3001<br \/>\n\t\t\u307e\u305a\u306f\u3001<strong>\u6a2a\u65b9\u5411\u306e\u5217<\/strong>\u3092\u8003\u3048\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u30b0\u30ea\u30c3\u30c9\u30674\u3064\u306e\u5217\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\n\t\t\u4eca\u56de\u306f\u3001\u7c21\u5358\u306b4\u3064\u306b\u5206\u3051\u308b\u305f\u3081\u305d\u308c\u305e\u308c25%\u305a\u3064\u306e\u30b5\u30a4\u30ba\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u8db3\u3057\u3066100%\u306b\u306a\u308b\u3088\u3046\u306b\u3059\u308c\u3070\u3044\u3044\u306e\u3067\u3001\u4f8b\u3048\u307020% 30% 30% 20%\u306a\u3069\u306e\u533a\u5207\u308a\u3067\u3082\u3044\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.wrapper {\r\n    display: grid;\r\n    grid-template-columns: 25% 25% 25% 25%; \/\/ 25%\u30674\u5217\r\n}\r\n<\/pre>\n<\/p><\/div>\n<h3 class=\"section__title2\">\u884c\u306b\u5206\u3051\u308b\uff08\u6a2a\u306b\u5206\u3051\u308b\uff09<\/h3>\n<div class=\"section__block\">\n\t\t\u6b21\u306b<strong>\u7e26\u306e\u884c<\/strong>\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u8003\u3048\u65b9\u306f\u5217\u306e\u6642\u3068\u540c\u3058\u3067\u3001\u305d\u308c\u304c\u7e26\u306b\u306a\u3063\u305f\u3060\u3051\u3067\u3059\u306d\u3002<br \/>\n\t\t\u3068\u308a\u3042\u3048\u305a\u3001\u305d\u308c\u305e\u308c\u306e\u9ad8\u3055\u306f100\u30d4\u30af\u30bb\u30eb\u306e\u9ad8\u3055\u306b\u3057\u3066\u304a\u304d\u307e\u3059\u3002<br \/>\n\t\t\u203b\u9ad8\u3055\u306e\u5834\u5408%\u306e\u6307\u5b9a\u306f\u89aa\u8981\u7d20\u306e\u6307\u5b9a\u306b\u4f9d\u5b58\u3059\u308b\u305f\u3081\u3001\u3084\u3084\u3053\u3057\u304f\u306a\u3089\u306a\u3044\u3088\u3046\u306bpx\u3067\u6307\u5b9a\u3057\u3066\u9032\u3081\u307e\u3059<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.wrapper {\r\n    display: grid;\r\n    grid-template-columns: 25% 25% 25% 25%; \/\/ 25%\u30674\u5217\r\n    grid-template-rows: 100px 100px 100px; \/\/ 100px\u30673\u884c\r\n}\r\n<\/pre>\n<p>\t\t\u3053\u306e\u6307\u5b9a\u3067\u3001\u6b21\u306e\u3088\u3046\u306a\u30b0\u30ea\u30c3\u30c9\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_9.png\" alt=\"Group_9\" width=\"687\" height=\"480\" class=\"alignnone size-full wp-image-7681\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_9.png 687w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_9-600x419.png 600w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><br \/>\n\t\t\u3055\u3066\u3001\u3053\u308c\u3067\u533a\u753b\u304c\u4f5c\u6210\u3055\u308c\u307e\u3057\u305f\u3002<br \/>\n\t\t\u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u304c\u3053\u3061\u3089\u3067\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u4f5c\u3089\u308c\u305f\u30b0\u30ea\u30c3\u30c9\u306b12\u500b\u306e.item\u8981\u7d20\u304c\u914d\u7f6e\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"ExLQdmM\" data-user=\"hachidaime\" style=\"height: 300px; 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\/hachidaime\/pen\/ExLQdmM\"><br \/>\n  Grid base<\/a> by Yoshimune (<a href=\"https:\/\/codepen.io\/hachidaime\">@hachidaime<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\t<\/div>\n<h3 class=\"section__title2\">\u30a2\u30a4\u30c6\u30e0\u3092\u914d\u7f6e<\/h3>\n<div class=\"section__block\">\n\t\t\u3055\u3066\u3001<strong>\u30b0\u30ea\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u5b9f\u969b\u306b\u8981\u7d20\u3092\u914d\u7f6e<\/strong>\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u4eca\u56de\u3001\u3053\u306e\u3088\u3046\u306a\u5f62\u3092\u4f5c\u308a\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_4.png\" alt=\"Group_4\" width=\"990\" height=\"360\" class=\"alignnone size-full wp-image-7682\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_4.png 990w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_4-600x218.png 600w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><br \/>\n\t\t\u3067\u306f\u3001\u5185\u90e8\u306e\u8981\u7d20\u3092\u914d\u7f6e\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\t\u4eca\u56de<strong>\u8272\u5206\u3051\u3055\u308c\u305f\uff15\u3064\u306e\u30a8\u30ea\u30a2\u306b\u5206\u304b\u308c\u308b<\/strong>\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<br \/>\n\t\u3055\u304d\u307b\u3069\u4f5c\u3063\u305f<strong>\u30b0\u30ea\u30c3\u30c9\u306b\u5bfe\u3057\u3066\u3001\u3069\u306e\u3088\u3046\u306b\u30a8\u30ea\u30a2\u3092\u5857\u308a\u3064\u3076\u3057\u3066\u3044\u304f\u304b\u3092\u8003\u3048\u308b<\/strong>\u306e\u304c\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u3059\u3002<br \/>\n\t\u982d\u306e\u4e2d\u3067\u8003\u3048\u3066\u3082\u3044\u3044\u3067\u3059\u3057\u3001\u8907\u96d1\u306a\u5834\u5408\u306f\u7d19\u306b\u66f8\u304d\u51fa\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\u914d\u7f6e\u3059\u308b\u4f4d\u7f6e\u306e\u6307\u5b9a\u306b\u3064\u3044\u3066\u306f\u3001\u305d\u308c\u305e\u308c\u306e\u8981\u7d20.item\u306b\u5bfe\u3057\u3066\u884c\u3044\u307e\u3059\u3002<\/p>\n<p>\t\u4eca\u56de\u3001\u30a8\u30ea\u30a2\u306f\uff15\u3064\u306a\u306e\u3067\u3001HTML\u306f\u6b21\u306e\u3088\u3046\u306b\uff08.item\uff09\u306e\u8981\u7d20\u30925\u3064\u66f8\u304d\u307e\u3059<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;wrapper&quot;&gt;\r\n  &lt;div class=&quot;item item1&quot;&gt;1&lt;\/div&gt;\r\n  &lt;div class=&quot;item item2&quot;&gt;2&lt;\/div&gt;\r\n  &lt;div class=&quot;item item3&quot;&gt;3&lt;\/div&gt;\r\n  &lt;div class=&quot;item item4&quot;&gt;4&lt;\/div&gt;\r\n  &lt;div class=&quot;item item5&quot;&gt;5&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\t\t<\/pre>\n<\/p><\/div>\n<h3 class=\"section__title2\">\u6a2a\u306e\u533a\u753b\u6307\u5b9a<\/h3>\n<div class=\"section__block\">\n\t\t\u4eca\u56de\u3082\u3001\u307e\u305a\u306f\u5217\u306e\u6307\u5b9a\u304b\u3089\u8003\u3048\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u533a\u753b\u756a\u53f7\u304c\u3053\u306e\u3088\u3046\u306b<strong>\uff11\u304b\u3089\uff15\u304c\u632f\u3089\u308c\u3066\u3044\u308b<\/strong>\u3068\u8003\u3048\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_10.png\" alt=\"Group_10\" width=\"606\" height=\"488\" class=\"alignnone size-full wp-image-7683\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_10.png 606w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_10-600x483.png 600w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/><br \/>\n\t\t1\u756a\u5de6\u30921\u3068\u3057\u3066\u6570\u5b57\u304c\u5897\u3048\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n\t\t\u305d\u3057\u3066\u3001\u3053\u308c\u3089\u306e<strong>\u533a\u753b\u756a\u53f7\u306e\u3069\u3053\u304b\u3089\u3069\u3053\u307e\u3067\u3092\u4f7f\u3046\u304b\u3092\u6307\u5b9a<\/strong>\u3057\u307e\u3059\u3002<br \/>\n\t\t\u4eca\u56de\u3001\u7dd1\u306e\u30a8\u30ea\u30a2\u3067\u3042\u308c\u3070\u30011~5\u3067\u30a8\u30ea\u30a2\u3092\u4f5c\u308a\u307e\u3059\u3002<br \/>\n\t\t\u6c34\u8272\u306e\u30a8\u30ea\u30a2\u306f1~3\u3068\u3044\u3046\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<br \/>\n\t\t\u540c\u69d8\u306b\u3057\u3066\u3001\u5168\u3066\u306e\u30a8\u30ea\u30a2\u306b\u3064\u3044\u3066\u8003\u3048\u308b\u3068\u3001<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_12.png\" alt=\"Group_12\" width=\"990\" height=\"360\" class=\"alignnone size-full wp-image-7684\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_12.png 990w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_12-600x218.png 600w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><br \/>\n\t\t\u3053\u306e\u3088\u3046\u306b\u306a\u308b\u306e\u3067\u3001<br \/>\n\t\t\u3053\u308c\u3092\u305d\u308c\u305e\u308c\u306e.item\u8981\u7d20\u306b\u5bfe\u3057\u3066\u3053\u306e\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.item*{\r\n    grid-column-start: 1; \/\/ \u958b\u59cb\u306e\u5217\u4f4d\u7f6e\r\n    grid-column-end: 3; \/\/ \u7d42\u4e86\u306e\u5217\u4f4d\u7f6e\r\n}\r\n\t\t<\/pre>\n<p>\t\t\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u3060\u3068<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.item1{\r\n    grid-column-start: 1;\r\n    grid-column-end: 5;\r\n}\r\n\r\n.item2{\r\n    grid-column-start: 1;\r\n    grid-column-end: 3;\r\n}\r\n.item3{\r\n    grid-column-start: 1;\r\n    grid-column-end: 3;\r\n}\r\n.item4{\r\n    grid-column-start: 3;\r\n    grid-column-end: 4;\r\n}\r\n.item5{\r\n    grid-column-start: 4;\r\n    grid-column-end: 5;\r\n}\r\n\t\t<\/pre>\n<\/p><\/div>\n<h3 class=\"section__title2\">\u7e26\u306e\u533a\u753b\u6307\u5b9a<\/h3>\n<div class=\"section__block\">\n\t\t\u6b21\u306b\u3001\u540c\u3058\u3088\u3046\u306b\u3057\u3066\u7e26\u306b\u3064\u3044\u3066\u3082\u30a8\u30ea\u30a2\u3092\u6307\u5b9a\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u884c\u3067\u306f\u6b21\u306e\u3088\u3046\u306a\u6570\u5b57\u3092\u4f7f\u3044\u307e\u3059<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_17.png\" alt=\"Group_17\" width=\"638\" height=\"465\" class=\"alignnone size-full wp-image-7685\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_17.png 638w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_17-600x437.png 600w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><br \/>\n\t\t\u540c\u3058\u304f\u8272\u5206\u3051\u3057\u305f\u30a8\u30ea\u30a2\u3067\u8003\u3048\u3066\u307f\u307e\u3059\u3002<br \/>\n\t\t\u4eca\u56de\u306f\u7e26\u306e\u6570\u5b57\u3067\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\t\t\u7e26\u3082\u5217\u3068\u540c\u3058\u3088\u3046\u306a\u8003\u3048\u65b9\u3067\u30011\u756a\u4e0a\u30921\u3068\u3057\u3066\u4f55\u756a\u76ee\u307e\u3067\u9078\u629e\u3059\u308b\u304b\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_18.png\" alt=\"Group_18\" width=\"990\" height=\"360\" class=\"alignnone size-full wp-image-7686\" srcset=\"https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_18.png 990w, https:\/\/y-com.info\/contents\/wp-content\/uploads\/2022\/10\/Group_18-600x218.png 600w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><br \/>\n\t\t\u7e26\u306e\u7bc4\u56f2\u3092\u6307\u5b9a\u3059\u308b\u65b9\u6cd5\u306f<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.item*{\r\n    grid-row-start: 2; \/\/ \u958b\u59cb\u306e\u884c\u4f4d\u7f6e\r\n    grid-row-end: 4; \/\/ \u7d42\u4e86\u306e\u884c\u4f4d\u7f6e\r\n}\r\n\t\t<\/pre>\n<p>\t\t\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.item1{\r\n    grid-row-start: 1;\r\n    grid-row-end: 2;\r\n}\r\n\r\n.item2{\r\n    grid-row-start: 2;\r\n    grid-row-end: 3;\r\n}\r\n.item3{\r\n    grid-row-start: 3;\r\n    grid-row-end: 4;\r\n}\r\n.item4{\r\n    grid-row-start: 2;\r\n    grid-row-end: 4;\r\n}\r\n.item5{\r\n    grid-row-start: 2;\r\n    grid-row-end: 4;\r\n}\r\n\t\t<\/pre>\n<p>\t\t\u3055\u3066\u3001\u3053\u3053\u3067\u306f\u8aac\u660e\u306e\u305f\u3081\u306b\u5206\u3051\u3066\u8003\u3048\u307e\u3057\u305f\u304c\u3001\u5b9f\u969b\u306b\u306f\u3053\u308c\u3089\u3092\u3059\u3079\u3066\u6307\u5b9a\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u306e\u3067\u3001<br \/>\n\t\t\u6700\u7d42\u7684\u306b\u3053\u306e\u3088\u3046\u306a\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"qBYxJGb\" data-user=\"hachidaime\" style=\"height: 300px; 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\/hachidaime\/pen\/qBYxJGb\"><br \/>\n  Grid layout<\/a> by Yoshimune (<a href=\"https:\/\/codepen.io\/hachidaime\">@hachidaime<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\n\t\t\u3053\u306e\u3088\u3046\u306b\u3001\u610f\u56f3\u3057\u305f\u3088\u3046\u306b\u914d\u7f6e\u3055\u308c\u307e\u3057\u305f\u3002\n\t<\/div>\n<h2 class=\"section__title\">\u3069\u3093\u306a\u5834\u9762\u3067\u4f7f\u3048\u308b\u304b<\/h2>\n<div class=\"section__block\">\n\t\tGrid\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u306f\u4ee5\u4e0a\u3067\u3059\u3002<br \/>\n\t\t\u9806\u306b\u8003\u3048\u3066\u307f\u308b\u3068\u305d\u3093\u306a\u306b\u96e3\u3057\u3044\u3082\u306e\u3067\u306f\u306a\u304b\u3063\u305f\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<br \/>\n\t\t\u3082\u3061\u308d\u3093\u3001\u5b9f\u52d9\u306a\u3069\u3067\u5b9f\u969b\u306b\u4f7f\u3046\u969b\u306b\u306f\u8907\u96d1\u306a\u30d1\u30bf\u30fc\u30f3\u3082\u51fa\u3066\u304f\u308b\u3067\u3057\u3087\u3046\u3002<br \/>\n\t\t\u3067\u3059\u304c\u3001\u57fa\u672c\u7684\u306a\u3068\u3053\u308d\u306f\u4eca\u56de\u306e\u8a18\u4e8b\u3092\u7406\u89e3\u3059\u308b\u3060\u3051\u3067\u5341\u5206\u3067\u3057\u3087\u3046\u3002\n\t<\/div>\n<h2 class=\"section__title\">Grid\u6307\u5b9a\u306e\u4f7f\u3044\u65b9\u3001\u30e1\u30ea\u30c3\u30c8\u30c7\u30e1\u30ea\u30c3\u30c8<\/h2>\n<div class=\"section__block\">\n\t\t\u6b63\u76f4\u306a\u3068\u3053\u308d\u3001Grid\u3092\u983b\u7e41\u306b\u4f7f\u3046\u3068\u3044\u3046\u3053\u3068\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u3002<br \/>\n\t\tGrid\u306f\u7d30\u304b\u3044\u4f4d\u7f6e\u3084\u30b5\u30a4\u30ba\u306e\u8abf\u6574\u306b\u306f\u5411\u3044\u3066\u3044\u306a\u304f\u67d4\u8edf\u6027\u306f\u4f4e\u3044\u3067\u3059\u304c\u3001\u5927\u67a0\u3092\u4f5c\u308b\u306e\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\t\tHTML\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u4e0a\u3067\u3001\u5927\u67a0\u304b\u3089\u8003\u3048\u308b\u3053\u3068\u306f\u975e\u5e38\u306b\u5927\u5207\u3067\u3059\u3002<br \/>\n\t\t\u305d\u308c\u305e\u308c\u306e\u30a8\u30ea\u30a2\u3092\u3046\u307e\u304f\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0\u3067\u304d\u308c\u3070\u3001<strong>\u30d4\u30fc\u30b9\u3092\u7d44\u307f\u66ff\u3048\u308b\u30a4\u30e1\u30fc\u30b8\u3067\u72b6\u6cc1\u306b\u5fdc\u3058\u3066\u67d4\u8edf\u306b\u914d\u7f6e\u3092\u5909\u66f4\u3067\u304d\u308b\u306e\u3067\u3001\u30b9\u30de\u30db\u3068PC\u3067\u5927\u304d\u304f\u914d\u7f6e\u3092\u5909\u3048\u308b\u3068\u3044\u3046\u3053\u3068\u3082\u7c21\u5358<\/strong>\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\t\t\u5168\u4f53\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3\u3068\u3057\u3066\u975e\u5e38\u306b\u5927\u5207\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\t\t\u591a\u304f\u306e\u4eba\u306f\u81ea\u5206\u306e\u4f7f\u3044\u3084\u3059\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u3092\u512a\u5148\u3057\u3066\u4f7f\u3063\u3066\u3057\u307e\u3044\u304c\u3061\u3067\u3059\u304c\u3001<br \/>\n\t\t\u305d\u308c\u305e\u308c\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u306b\u306f\u7279\u5fb4\u304c\u3042\u308a\u3001\u305d\u308c\u3092\u4f7f\u3044\u5206\u3051\u3089\u308c\u308b\u3053\u3068\u304c\u5927\u5207\u3067\u3059\u3002<br \/>\n\t\t\u4eca\u65e5\u521d\u3081\u3066Grid\u306b\u3064\u3044\u3066\u52c9\u5f37\u3057\u305f\u3068\u3044\u3046\u65b9\u3082\u3001\u7a4d\u6975\u7684\u306b\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\n\t<\/p><\/div>\n<\/section>\n\n\t<div class=\"adbanner\" style=\"margin:0 0 30px 0;\">\n\t\t<iframe loading=\"lazy\" style=\"margin:0\tauto;\" src=\"https:\/\/rcm-fe.amazon-adsystem.com\/e\/cm?o=9&p=48&l=ur1&category=amazonrotate&f=ifr&linkID=528672f6928aa364301f0b83e4e61d09&t=yossyhomepage-22&tracking_id=yossyhomepage-22\" width=\"728\" height=\"90\" scrolling=\"no\" border=\"0\" marginwidth=\"0\" style=\"border:none;\" frameborder=\"0\"><\/iframe>\n\t<\/div>\n\t","protected":false},"excerpt":{"rendered":"<p>\u30b0\u30ea\u30c3\u30c9\u3092\u6d3b\u7528\u3057\u305fCSS\u306egrid\u30d7\u30ed\u30d1\u30c6\u30a3 \u4eca\u56de\u306f\u3001CSS\u306eGrid\u306b\u3088\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 Grid\u3068\u306f\u30bf\u30a4\u30eb\u306e\u3088\u3046\u306b\u30a8\u30ea\u30a2\u3092\u533a\u5206\u3051\u3057\u3066\u8981\u7d20\u3092\u914d\u7f6e\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u6307\u5b9a\u65b9\u6cd5\u3067\u3059\u3002 \u521d\u3081\u3066Gri [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7690,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[81],"class_list":["post-7675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1","tag-css"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts\/7675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7675"}],"version-history":[{"count":5,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts\/7675\/revisions"}],"predecessor-version":[{"id":7691,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/posts\/7675\/revisions\/7691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=\/wp\/v2\/media\/7690"}],"wp:attachment":[{"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/y-com.info\/contents\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}