{"id":1479,"date":"2024-11-14T07:46:09","date_gmt":"2024-11-13T22:46:09","guid":{"rendered":"https:\/\/nekomata3.net\/blog\/?p=1479"},"modified":"2025-05-02T09:34:17","modified_gmt":"2025-05-02T00:34:17","slug":"flexbox%e3%81%a8%e3%81%af","status":"publish","type":"post","link":"https:\/\/nekomata3.net\/?p=1479","title":{"rendered":"Flexbox\u3068\u306f"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u3053\u306e\u8a18\u4e8b\u306e\u76ee\u6b21<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #5b5b5b;color:#5b5b5b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #5b5b5b;color:#5b5b5b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nekomata3.net\/?p=1479\/#Flexbox%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5\" >Flexbox\u306e\u57fa\u672c\u6982\u5ff5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nekomata3.net\/?p=1479\/#%E4%B8%BB%E3%81%AAFlexbox%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3\" >\u4e3b\u306aFlexbox\u306e\u30d7\u30ed\u30d1\u30c6\u30a3<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nekomata3.net\/?p=1479\/#flex-box\" >flex-box<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading has-text-align-center is-style-vk-heading-double_black vk_block-margin-sm--margin-bottom has-large-font-size\"><span class=\"ez-toc-section\" id=\"Flexbox%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5\"><\/span><strong>Flexbox\u306e\u57fa\u672c\u6982\u5ff5<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Flexbox\u306f\u3001\u30d6\u30ed\u30c3\u30af\u3092\u4e26\u3079\u308b\u9b54\u6cd5\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Flex\u30b3\u30f3\u30c6\u30ca<\/strong>\uff08\u89aa\u306e\u7bb1\uff09\uff1adisplay:flex \u3092\u6307\u5b9a\u3057\u305f\u89aa\u8981\u7d20\u306e\u3053\u3068\u3067\u3059\u3002\u3053\u306e\u8981\u7d20\u5185\u3067Flexbox\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>Flex\u30a2\u30a4\u30c6\u30e0<\/strong>\uff08\u5b50\u306e\u7bb1\uff09\uff1aFlex\u30b3\u30f3\u30c6\u30ca\u306e\u4e2d\u306b\u3042\u308b\u5b50\u8981\u7d20\u306e\u3053\u3068\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u4f8b\u3048\u3070\u3001\u304a\u5f01\u5f53\u7bb1\uff08\u89aa\u306e\u7bb1\uff09\u306e\u4e2d\u306b\u3001\u304a\u304b\u305a\uff08\u5b50\u306e\u7bb1\uff09\u3092\u6a2a\u306b\u4e26\u3079\u305f\u308a\u3001\u7e26\u306b\u4e26\u3079\u305f\u308a\u3001\u3061\u3087\u3063\u3068\u9699\u9593\u3092\u7a7a\u3051\u305f\u308a\u3001\u5927\u304d\u3055\u3092\u5909\u3048\u305f\u308a\u3001\u89aa\u306e\u7bb1\u306e\u4e2d\u3067\u3001\u5b50\u306e\u7bb1\u306e\u4e26\u3073\u65b9\u3084\u5927\u304d\u3055\u3092\u7c21\u5358\u306b\u8abf\u6574\u3067\u304d\u308b\u306e\u304c Flexbox \u306e\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u300cclass=&#8221;oyayouso&#8221;\u300d\u304c\u3064\u3044\u3066\u3044\u308b\u8981\u7d20\u304cFlex\u30b3\u30f3\u30c6\u30ca\uff08\u89aa\u306e\u7bb1\uff09\u3001\u300cclass=&#8221;koyouso&#8221;\u300d\u304c\u3064\u3044\u3066\u3044\u308b\u8981\u7d20\u304cFlex\u30a2\u30a4\u30c6\u30e0\uff08\u5b50\u306e\u7bb1\uff09\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ja&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u30b7\u30f3\u30d7\u30eb\u306aFlexbox\u306e\u30b5\u30f3\u30d7\u30eb&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/test.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;oyayouso&quot;&gt;\n        &lt;div class=&quot;koyouso&quot;&gt;\u7bb11&lt;\/div&gt;\n        &lt;div class=&quot;koyouso&quot;&gt;\u7bb12&lt;\/div&gt;\n        &lt;div class=&quot;koyouso&quot;&gt;\u7bb13&lt;\/div&gt;\n        &lt;div class=&quot;koyouso&quot;&gt;\u7bb14&lt;\/div&gt;\n        &lt;div class=&quot;koyouso&quot;&gt;\u7bb15&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.oyayouso {\n            background-color: black;\n            display: flex; \/* Flexbox \u3092\u4f7f\u3046\u5ba3\u8a00 *\/\n            justify-content: flex-start; \/* \u6c34\u5e73\u65b9\u5411\uff08\u6a2a\uff09\u306e\u521d\u671f\u5024 *\/\n            align-items: stretch;  \/* \u5782\u76f4\u65b9\u5411\uff08\u7e26\uff09\u306e\u521d\u671f\u5024 *\/\n        }\n\n        \/* \u5b50\u8981\u7d20\uff08Flex\u30a2\u30a4\u30c6\u30e0\uff09\u306e\u30b9\u30bf\u30a4\u30eb *\/\n        .koyouso {\n            margin:10px 5px;\/* \u5b50\u306e\u7bb1\u306e\u5916\u5074\u306e\u4f59\u767d *\/\n            padding: 20px;\/* \u5b50\u306e\u7bb1\u306e\u5185\u5074\u306e\u4f59\u767d *\/\n            color: #000000;\/* \u5b50\u306e\u7bb1\u306e\u6587\u5b57\u306e\u8272 *\/ \n            background-color: #a8d9ea;\/* \u5b50\u306e\u7bb1\u306e\u8272 *\/  \n        }<\/code><\/pre><\/div>\n\n\n\n<p><br>ul\u306e\u3088\u3046\u306bheader\u306e\u5b50\u8981\u7d20\u3067\u3042\u308b\u3068\u540c\u6642\u306b\u30ea\u30b9\u30c8\u30a2\u30a4\u30c6\u30e0\uff08li\uff09\u306e\u89aa\u8981\u7d20\u306b\u306a\u308b\u8981\u7d20\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ja&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;FlexBox&lt;\/title&gt;\n&lt;link href=&quot;css\/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;header class=&quot;oyayouso&quot;&gt;\n\t&lt;h1 class=&quot;koyouso&quot;&gt;&lt;a href=&quot;\/&quot;&gt;logo&lt;\/a&gt;&lt;\/h1&gt;\n\t\t&lt;ul class=&quot;koyouso oyayouso&quot;&gt;\n\t\t\t&lt;li class=&quot;koyouso&quot;&gt;\u6a2a\u4e26\u3073\u30ea\u30b9\u30c8\uff11&lt;\/li&gt;\n\t\t\t&lt;li class=&quot;koyouso&quot;&gt;\u6a2a\u4e26\u3073\u30ea\u30b9\u30c8\uff12&lt;\/li&gt;\n\t\t\t&lt;li class=&quot;koyouso&quot;&gt;\u6a2a\u4e26\u3073\u30ea\u30b9\u30c8\uff13&lt;\/li&gt;\n\t\t\t&lt;\/ul&gt;\n\t&lt;\/header&gt;\n\t&lt;main&gt;\n\t\t&lt;section class=&quot;oyayouso&quot;&gt;\n\t\t&lt;div class=&quot;box koyouso&quot;&gt;\n        &lt;h1&gt;BOX\uff11&lt;\/h1&gt;\n    &lt;\/div&gt;\n\t&lt;div class=&quot;box koyouso&quot;&gt;\n\t\t&lt;h1&gt;BOX\uff12&lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;\/section&gt;\n\t&lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"258\" data-attachment-id=\"1485\" data-permalink=\"https:\/\/nekomata3.net\/?attachment_id=1485\" data-orig-file=\"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?fit=1210%2C305&amp;ssl=1\" data-orig-size=\"1210,305\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2024-11-13 22.13.02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?fit=1024%2C258&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?resize=1024%2C258&#038;ssl=1\" alt=\"\" class=\"wp-image-1485\" srcset=\"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?resize=1024%2C258&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?resize=300%2C76&amp;ssl=1 300w, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?resize=768%2C194&amp;ssl=1 768w, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/11\/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-13-22.13.02.png?w=1210&amp;ssl=1 1210w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>@charset &quot;UTF-8&quot;;\n\/* CSS Document *\/\n\/*============\ncommon\n=================*\/\nul {\n  list-style: none;\n}\nbody {\n  font-family: &quot;Osaka-mono&quot;, &quot;MS Gothic&quot;, &quot;monospace&quot;;\n  font-size: 18px;\n  color: #333333;\n  background-color: #FDF8F0;\n}\nh1 {\n  font-size: 18px;\n}\n\/*============\nheader\n=================*\/\nheader {\n  width: 100%;\n}\n\/*============\nmain\n=================*\/\nmain {\n  height: 100vh;\n}\n.box {\n  margin: 10px auto;\n  text-align: center;\n  padding: 30px;\n  border-radius: 28px;\n  min-width: 250px;\n  box-shadow: 0 0 20px rgba(0, 0, 0, .5);\n}\n\/*============\nFlexbox\n=================*\/\n.oyayouso {\n  width: 100%;\n  max-width: 1920px;\n  border: 3px dotted #4083FA;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.koyouso {\n  padding: 10px 0;\n  text-align: center;\n  background-color: rgba(206, 18, 21, .40);\n  flex-basis: 30%;\n}\nheader ul.koyouso {\n  flex-basis: 65%;\n}<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center is-style-vk-heading-double_black vk_block-margin-sm--margin-bottom has-large-font-size\"><span class=\"ez-toc-section\" id=\"%E4%B8%BB%E3%81%AAFlexbox%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3\"><\/span><strong>\u4e3b\u306aFlexbox\u306e\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>display: flex<\/code><\/strong>\u3092\u89aa\u8981\u7d20\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u5b50\u8981\u7d20\u304cFlexbox\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u306a\u308a\u307e\u3059\u3002Flex\u30a2\u30a4\u30c6\u30e0\u304c\u6c34\u5e73\u65b9\u5411\u307e\u305f\u306f\u5782\u76f4\u65b9\u5411\u306b\u4e26\u3079\u3089\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.oyayouso{\n  display: flex;\/* Flexbox \u3092\u4f7f\u3046\u5ba3\u8a00 *\/\n}<\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>justify-content<\/code>\u306f\u3001\u30a2\u30a4\u30c6\u30e0\u306e\u6c34\u5e73\u65b9\u5411\u306e\u914d\u7f6e\u3092\u8abf\u6574\u3057\u307e\u3059\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306f flex-start\uff09<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.oyayouso {\n  display: flex;\n  justify-content: center; \/* \u6c34\u5e73\u65b9\u5411\uff08\u6a2a\uff09\u306e\u4e2d\u592e\u63c3\u3048 *\/\n}<\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>align-items<\/strong>: \u30a2\u30a4\u30c6\u30e0\u306e\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\u3092\u8abf\u6574\u3057\u307e\u3059\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306f <code>stretch<\/code>\uff09<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.oyayouso {\n  display: flex;\n  align-items: center; \/* \u5782\u76f4\u65b9\u5411\uff08\u7e26\uff09\u306e\u4e2d\u592e\u63c3\u3048 *\/\n}<\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>flex-wrap<\/strong>: \u30a2\u30a4\u30c6\u30e0\u304c\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u3092\u8d85\u3048\u305f\u5834\u5408\u306b\u3001\u6298\u308a\u8fd4\u3057\u306e\u6319\u52d5\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.oyayouso{\n  display: flex;\n  flex-wrap: wrap; \/* \u30a2\u30a4\u30c6\u30e0\u304c\u30b3\u30f3\u30c6\u30ca\u3092\u8d85\u3048\u305f\u5834\u5408\u306b\u6298\u308a\u8fd4\u3059 *\/\n}<\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>flex-direction<\/strong>:\u30a2\u30a4\u30c6\u30e0\u304c\u4e26\u3076\u65b9\u5411\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306f<code>row<\/code>\uff09<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.oyayouso {\n  display: flex;\n  flex-direction: column; \/* \u7e26\u65b9\u5411\u306b\u4e26\u3079\u308b *\/\n}<\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>align-self<\/code><\/strong>:\u7279\u5b9a\u306e\u30a2\u30a4\u30c6\u30e0\u3060\u3051\u3092\u89aa\u306e<code>align-items<\/code>\u8a2d\u5b9a\u3068\u306f\u7570\u306a\u308b\u4f4d\u7f6e\u306b\u914d\u7f6e\u3059\u308b<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.koyouso {\n  align-self: flex-end; \/* \u3053\u306e\u30a2\u30a4\u30c6\u30e0\u3060\u3051\u4e0b\u63c3\u3048 *\/\n}<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading vk_block-margin-md--margin-top vk_block-margin-sm--margin-bottom is-style-vk-heading-dotted_bottomborder_black\" style=\"padding-top:0;padding-bottom:0\"><span class=\"ez-toc-section\" id=\"flex-box\"><\/span>flex-box<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><strong>\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong><\/th><th><strong>\u8aad\u307f\u65b9<\/strong><\/th><th><strong>\u8aac\u660e<\/strong><\/th><th><strong>\u521d\u671f\u5024<\/strong><\/th><th><strong>\u5024<\/strong><\/th><th><strong>\u88dc\u8db3<\/strong><\/th><\/tr><\/thead><tbody><tr><td><code>flex-direction<\/code><\/td><td>\u30d5\u30ec\u30c3\u30af\u30b9\u30c7\u30a3\u30ec\u30af\u30b7\u30e7\u30f3<\/td><td>\u8981\u7d20\u306e\u4e26\u3073\u65b9\u5411\u3092\u6307\u5b9a<\/td><td><code>row<\/code><\/td><td><code>row<\/code>: \u6a2a\u65b9\u5411<br><code>column<\/code>: \u7e26\u65b9\u5411<br><code>row-reverse<\/code>: \u6a2a\u65b9\u5411\uff08\u9006\uff09<br><code>column-reverse<\/code>: \u7e26\u65b9\u5411\uff08\u9006\uff09<\/td><td><\/td><\/tr><tr><td><code>flex-wrap<\/code><\/td><td>\u30d5\u30ec\u30c3\u30af\u30b9\u30e9\u30c3\u30d7<\/td><td>\u8981\u7d20\u306e\u6298\u308a\u8fd4\u3057\u3092\u6307\u5b9a<\/td><td><code>nowrap<\/code><\/td><td><code>nowrap<\/code>: \u6298\u308a\u8fd4\u3055\u306a\u3044<br><code>wrap<\/code>: \u6298\u308a\u8fd4\u3059<br><code>wrap-reverse<\/code>: \u9006\u65b9\u5411\u306b\u6298\u308a\u8fd4\u3059<\/td><td><\/td><\/tr><tr><td><code>justify-content<\/code><\/td><td>\u30b8\u30e3\u30b9\u30c6\u30a3\u30d5\u30a1\u30a4\u30b3\u30f3\u30c6\u30f3\u30c4<\/td><td>\u4e3b\u8ef8\u306b\u6cbf\u3063\u305f\u914d\u7f6e\u3092\u6307\u5b9a<\/td><td><code>flex-start<\/code><\/td><td><code>flex-start<\/code>: \u5de6\u5bc4\u305b<br><code>flex-end<\/code>: \u53f3\u5bc4\u305b<br><code>center<\/code>: \u4e2d\u592e\u5bc4\u305b<br><code>space-between<\/code>: \u7b49\u9593\u9694(\u4e21\u7aef\u30b9\u30da\u30fc\u30b9\u306a\u3057)<br><code>space-around<\/code>: \u5468\u56f2\u306b\u4f59\u767d\u3092\u6301\u305f\u305b\u308b(\u4e21\u7aef\u306f\u9593\u306e\u30b9\u30da\u30fc\u30b9\u306e\u534a\u5206)<\/td><td><\/td><\/tr><tr><td><code>align-items<\/code><\/td><td>\u30a2\u30e9\u30a4\u30f3\u30a2\u30a4\u30c6\u30e0<\/td><td>\u5168\u3066\u306e\u30a2\u30a4\u30c6\u30e0\u306e\u7e26\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6307\u5b9a<\/td><td><code>stretch<\/code><\/td><td><code>stretch<\/code>: \u62e1\u5f35\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\uff09<br><code>flex-start<\/code>: \u4e0a\u5bc4\u305b<br><code>flex-end<\/code>: \u4e0b\u5bc4\u305b<br><code>center<\/code>: \u4e2d\u592e\u5bc4\u305b<br><code>baseline<\/code>: \u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u306b\u63c3\u3048\u308b<\/td><td><\/td><\/tr><tr><td><code>align-content<\/code><\/td><td>\u30a2\u30e9\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4<\/td><td>\u8907\u6570\u884c\u304c\u3042\u308b\u5834\u5408\u306e\u914d\u7f6e\u3092\u6307\u5b9a<\/td><td><code>stretch<\/code><\/td><td><code>stretch<\/code>: \u62e1\u5f35<br><code>flex-start<\/code>: \u4e0a\u5bc4\u305b<br><code>flex-end<\/code>: \u4e0b\u5bc4\u305b<br><code>center<\/code>: \u4e2d\u592e\u5bc4\u305b<br><code>space-between<\/code>: \u7b49\u9593\u9694<br><code>space-around<\/code>: \u5468\u56f2\u306b\u4f59\u767d\u3092\u6301\u305f\u305b\u308b<\/td><td><\/td><\/tr><tr><td><code>gap<\/code><\/td><td>\u30ae\u30e3\u30c3\u30d7<\/td><td>\u30a2\u30a4\u30c6\u30e0\u9593\u306e\u3059\u304d\u9593\uff08\u4f59\u767d\uff09\u3092\u6307\u5b9a<\/td><td><code>0<\/code><\/td><td><code>10px, 1em, 5%<\/code> \u306a\u3069<\/td><td><code>row-gap<\/code>\u3068<code>column-gap<\/code>\u306e\u4e21\u65b9\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a<\/td><\/tr><tr><td><code>place-content<\/code><\/td><td>\u30d7\u30ec\u30a4\u30b9\u30b3\u30f3\u30c6\u30f3\u30c4<\/td><td><code>align-content<\/code>\u3068<code>justify-content<\/code>\u306e\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9<\/td><td>&#8211;<\/td><td><code>center center<\/code>\u306a\u3069<\/td><td>\u8907\u96d1\u306a\u914d\u7f6e\u3092\u30b7\u30f3\u30d7\u30eb\u306b\u307e\u3068\u3081\u3089\u308c\u308b<\/td><\/tr><tr><td><code>align-self<\/code><\/td><td>\u30a2\u30e9\u30a4\u30f3\u30bb\u30eb\u30d5<\/td><td>\u500b\u5225\u306e\u30a2\u30a4\u30c6\u30e0\u306e\u7e26\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6307\u5b9a<\/td><td><code>auto<\/code><\/td><td><code>auto<\/code>: \u30c7\u30d5\u30a9\u30eb\u30c8\u3092\u7d99\u627f<br><code>flex-start<\/code>: \u4e0a\u5bc4\u305b<br><code>flex-end<\/code>: \u4e0b\u5bc4\u305b<br><code>center<\/code>: \u4e2d\u592e\u5bc4\u305b<br><code>baseline<\/code>: \u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u306b\u63c3\u3048\u308b<br><code>stretch<\/code>: \u62e1\u5f35<\/td><td>display: flex;\u3068\u540c\u3058\u30bb\u30ec\u30af\u30bf\u3067\u306f\u306a\u304f\u3001\u5b50\u8981\u7d20\u306b\u8a2d\u5b9a\u3002<\/td><\/tr><tr><td><code>flex-grow<\/code><\/td><td>\u30d5\u30ec\u30c3\u30af\u30b9\u30b0\u30ed\u30a6<\/td><td>\u7a7a\u3044\u3066\u3044\u308b\u30b9\u30da\u30fc\u30b9\u3092\u3069\u308c\u3060\u3051\u5360\u3081\u308b\u304b\u3092\u6307\u5b9a<\/td><td><code>0<\/code><\/td><td>\u6570\u5024\uff08\u4f8b:&nbsp;<code>0<\/code>,&nbsp;<code>1<\/code>\uff09<\/td><td>\u7a7a\u304d\u30b9\u30da\u30fc\u30b9\u3092\u3069\u308c\u3060\u3051\u5360\u3081\u308b\u304b\u3092\u6307\u5b9a\u3002\u5b50\u8981\u7d20\u306b\u8a2d\u5b9a\u3002<\/td><\/tr><tr><td><code>flex-shrink<\/code><\/td><td>\u30d5\u30ec\u30c3\u30af\u30b9\u30b7\u30e5\u30ea\u30f3\u30af<\/td><td>\u7e2e\u5c0f\u7387\u3092\u6307\u5b9a<\/td><td><code>1<\/code><\/td><td>\u6570\u5024\uff08\u4f8b:&nbsp;<code>1<\/code>\uff09<\/td><td>\u7a7a\u304d\u30b9\u30da\u30fc\u30b9\u304c\u4e0d\u8db3\u3057\u305f\u3068\u304d\u306b\u3069\u308c\u3060\u3051\u7e2e\u5c0f\u3059\u308b\u304b\u3092\u6307\u5b9a\u3002\u5b50\u8981\u7d20\u306b\u8a2d\u5b9a\u3002<\/td><\/tr><tr><td><code>flex-basis<\/code><\/td><td>\u30d5\u30ec\u30c3\u30af\u30b9\u30d9\u30fc\u30b7\u30b9<\/td><td>\u8981\u7d20\u306e\u57fa\u6e96\u30b5\u30a4\u30ba\u3092\u6307\u5b9a<\/td><td><code>auto<\/code><\/td><td>\u30b5\u30a4\u30ba\uff08\u4f8b:&nbsp;<code>100px<\/code>,&nbsp;<code>50%<\/code>\uff09<\/td><td>\u8981\u7d20\u306e\u521d\u671f\u30b5\u30a4\u30ba\u3002\u5177\u4f53\u7684\u306a\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3067\u304d\u308b\u3002\u5b50\u8981\u7d20\u306b\u8a2d\u5b9a\u3002<\/td><\/tr><tr><td><code>flex<\/code><\/td><td>\u30d5\u30ec\u30c3\u30af\u30b9<\/td><td><code>flex-grow<\/code>,&nbsp;<code>flex-shrink<\/code>,&nbsp;<code>flex-basis<\/code>\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a<\/td><td><code>0 1 auto<\/code><\/td><td>\u4f8b:&nbsp;<code>flex: 1 1 100px;<\/code><\/td><td>\u305d\u308c\u305e\u308c\u306e\u5024\u3092\u4e00\u5ea6\u306b\u6307\u5b9a\u3059\u308b\u3002\u5b50\u8981\u7d20\u306b\u8a2d\u5b9a\u3002<\/td><\/tr><tr><td><code>order<\/code><\/td><td>\u30aa\u30fc\u30c0\u30fc<\/td><td>flex\u30b3\u30f3\u30c6\u30ca\u5185\u306eflex\u30a2\u30a4\u30c6\u30e0\u306e\u4e26\u3073\u9806\u3092\u6307\u5b9a<\/td><td><code>0<\/code><\/td><td><code>order:1<\/code>;<br><code>order:<\/code>2;<\/td><td>\u5de6\u304b\u3089\u6570\u5024\u304c\u82e5\u3044\u9806\u306b\u4e26\u3076\u3002\u5b50\u8981\u7d20\u306b\u8a2d\u5b9a\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/admin-the-sasster\/pen\/LYwqXVJ\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/admin-the-sasster\/pen\/LYwqXVJ<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flexbox\u306e\u57fa\u672c\u6982\u5ff5 Flexbox\u306f\u3001\u30d6\u30ed\u30c3\u30af\u3092\u4e26\u3079\u308b\u9b54\u6cd5\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002 \u4f8b\u3048\u3070\u3001\u304a\u5f01\u5f53\u7bb1\uff08\u89aa\u306e\u7bb1\uff09\u306e\u4e2d\u306b\u3001\u304a\u304b\u305a\uff08\u5b50\u306e\u7bb1\uff09\u3092\u6a2a\u306b\u4e26\u3079\u305f\u308a\u3001\u7e26\u306b\u4e26\u3079\u305f\u308a\u3001\u3061\u3087\u3063\u3068\u9699\u9593\u3092\u7a7a\u3051\u305f\u308a\u3001\u5927\u304d\u3055\u3092\u5909\u3048\u305f\u308a\u3001\u89aa\u306e\u7bb1\u306e\u4e2d\u3067\u3001 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1833,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_themeisle_gutenberg_block_has_review":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"common","vkexunit_cta_each_option":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[17],"tags":[],"class_list":["post-1479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-coding"],"veu_head_title_object":{"title":"","add_site_title":""},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1","jetpack-related-posts":[{"id":1358,"url":"https:\/\/nekomata3.net\/?p=1358","url_meta":{"origin":1479,"position":0},"title":"Part3 2\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8","author":"neko","date":"2024\u5e7410\u670822\u65e5","format":false,"excerpt":"HTML\u3068CSS\u3092\u4f7f\u7528\u3057\u30662\u30ab\u30e9\u30e0\u306e\u30da\u30fc\u30b8\u3092\u4f5c\u6210 \u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u5236\u4f5c\u5b9f\u7fd2 HTML\u3001CSS\u3092\u4f7f\u7528\u3057\u2026","rel":"","context":"web coding","block_context":{"text":"web coding","link":"https:\/\/nekomata3.net\/?cat=17"},"img":{"alt_text":"webcording\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u5171\u901a\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf","src":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":402,"url":"https:\/\/nekomata3.net\/?p=402","url_meta":{"origin":1479,"position":1},"title":"CSS\u306e\u57fa\u672c","author":"neko","date":"2024\u5e7410\u670813\u65e5","format":false,"excerpt":"CSS\u3068\u306f CSS\uff08\u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\uff09\u306f\u898b\u305f\u76ee\u3092\u88c5\u98fe\u3059\u308b\u305f\u3081\u306e\u8a00\u8a9e\u3067\u3059\u3002\u30bb\u30ec\u30af\u30bf\u3001\u30d7\u30ed\u2026","rel":"","context":"web coding","block_context":{"text":"web coding","link":"https:\/\/nekomata3.net\/?cat=17"},"img":{"alt_text":"webcording\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u5171\u901a\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf","src":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":184,"url":"https:\/\/nekomata3.net\/?p=184","url_meta":{"origin":1479,"position":2},"title":"Web\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u80fd\u529b\u8a8d\u5b9a\u8a66\u9a13\uff08\u5b9f\u6280\u7de8\uff09","author":"neko","date":"2024\u5e747\u670810\u65e5","format":false,"excerpt":"\u63a8\u5968\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30ec\u30a4\u30a2\u30a6\u30c8 \u753b\u9762\u5de6\u304b\u3089\u554f\u984c\u30a6\u30a3\u30f3\u30c9\u30a6\u3001\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u3001\u30d6\u30e9\u30a6\u30b6\uff08\u4ed5\u4e0a\u304c\u308a\u898b\u672c+\u30d7\u30ec\u30d3\u30e5\u2026","rel":"","context":"pickup","block_context":{"text":"pickup","link":"https:\/\/nekomata3.net\/?cat=15"},"img":{"alt_text":"knowledge\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u5171\u901a\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf","src":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/12\/knowledge.webp?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/12\/knowledge.webp?fit=1200%2C687&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/12\/knowledge.webp?fit=1200%2C687&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/12\/knowledge.webp?fit=1200%2C687&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2024\/12\/knowledge.webp?fit=1200%2C687&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1454,"url":"https:\/\/nekomata3.net\/?p=1454","url_meta":{"origin":1479,"position":3},"title":"Part4 1\u30ab\u30e9\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046","author":"neko","date":"2024\u5e7411\u67086\u65e5","format":false,"excerpt":"\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306e\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u30da\u30fc\u30b8\u3092\u4f5c\u6210 \u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u5236\u4f5c\u5b9f\u7fd2 HTML\u3001CSS\u3092\u4f7f\u7528\u3057\u305f\u30b3\u30fc\u30c7\u30a3\u2026","rel":"","context":"web coding","block_context":{"text":"web coding","link":"https:\/\/nekomata3.net\/?cat=17"},"img":{"alt_text":"webcording\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u5171\u901a\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf","src":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2025,"url":"https:\/\/nekomata3.net\/?p=2025","url_meta":{"origin":1479,"position":4},"title":"2\u30ab\u30e9\u30e0\u8ab2\u984c\u5236\u4f5c\u88dc\u8db3\u30fb\u30dd\u30a4\u30f3\u30c8\u78ba\u8a8d","author":"neko","date":"2025\u5e744\u670825\u65e5","format":false,"excerpt":"HTML\u69cb\u9020\u306e\u78ba\u8a8d HTML\u306f\u5165\u308c\u5b50\uff08\u30cd\u30b9\u30c8\uff09\u69cb\u9020\u3067\u3067\u304d\u3066\u3044\u307e\u3059\u3002\u8981\u7d20\u306e\u4e2d\u306b\u5225\u306e\u8981\u7d20\u3092\u542b\u3081\u308b\u3053\u3068\u3067\u3001\u2026","rel":"","context":"web coding","block_context":{"text":"web coding","link":"https:\/\/nekomata3.net\/?cat=17"},"img":{"alt_text":"webcording\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u5171\u901a\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf","src":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1209,"url":"https:\/\/nekomata3.net\/?p=1209","url_meta":{"origin":1479,"position":5},"title":"HTML\u306e\u57fa\u672c","author":"neko","date":"2024\u5e7410\u670813\u65e5","format":false,"excerpt":"HTML\u3068\u306f HTML\uff08HyperText Markup Language \/ \u30cf\u30a4\u30d1\u30fc\u30c6\u30ad\u30b9\u30c8 \u30de\u2026","rel":"","context":"web coding","block_context":{"text":"web coding","link":"https:\/\/nekomata3.net\/?cat=17"},"img":{"alt_text":"webcording\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u5171\u901a\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf","src":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nekomata3.net\/blog\/wp-content\/uploads\/2025\/02\/webcoding.webp?fit=1200%2C687&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/posts\/1479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nekomata3.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1479"}],"version-history":[{"count":29,"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":2020,"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/posts\/1479\/revisions\/2020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nekomata3.net\/index.php?rest_route=\/wp\/v2\/media\/1833"}],"wp:attachment":[{"href":"https:\/\/nekomata3.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nekomata3.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nekomata3.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}