{"id":37358,"date":"2022-03-08T09:36:24","date_gmt":"2022-03-08T00:36:24","guid":{"rendered":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/?p=37358"},"modified":"2022-03-08T09:36:08","modified_gmt":"2022-03-08T00:36:08","slug":"flexbox-line-separator","status":"publish","type":"post","link":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/articles\/build-websites\/operation\/css\/flexbox-line-separator.html","title":{"rendered":"CSS\u3067\u533a\u5207\u308a\u7dda\u3092\u5b9f\u88c5\u3059\u308b\u306e\u306f\u3001flexbox\u304c\u7c21\u5358\u3067\u4fbf\u5229\uff01 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u533a\u5207\u308a\u7dda\u3092\u5b9f\u88c5\u3059\u308b\u30c6\u30af\u30cb\u30c3\u30af"},"content":{"rendered":"<p>\u8981\u7d20\u9593\u306e\u533a\u5207\u308a\u7dda\u3092\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306b\u3059\u308b\u6642\u3001\u3069\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u304b\uff1f<\/p>\n<p class=\"mT1em\">flexbox\u3067\u5b9f\u88c5\u3059\u308b\u3068\u30011\u3064\u306e\u30b3\u30fc\u30c9\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5408\u308f\u305b\u3066\u4f38\u7e2e\u3057\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3082\u30b9\u30de\u30db\u306b\u3082\u5bfe\u5fdc\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u5782\u76f4\u30fb\u6c34\u5e73\u306b\u3082\u5207\u308a\u66ff\u3048\u308b\u306e\u306b\u3082\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002\u3055\u3089\u306b\u3001\u533a\u5207\u308a\u7dda\u3092\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3084\u7834\u7dda\u306b\u3059\u308b\u306e\u3082\u7c21\u5358\u3067\u3059\u3002<\/p>\n<p class=\"mT1em\">CSS flexbox\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u533a\u5207\u308a\u7dda\u3092\u5b9f\u88c5\u3059\u308b\u5de7\u5999\u3067\u7d20\u6674\u3089\u3057\u3044\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030501.png\" width=\"541\" height=\"338\" alt=\"\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u533a\u5207\u308a\u7dda\u3092\u5b9f\u88c5\u3059\u308b\u30c6\u30af\u30cb\u30c3\u30af\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/338;\"><\/div>\n<p><a href=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/ishadeed.com\/article\/flexbox-separator\/\">Flexbox Dynamic Line Separator<\/a><br \/>\nby Ahmad Shadeed<\/p>\n<p><!--more--><\/p>\n<p class=\"mT3em\">\u4e0b\u8a18\u306f\u5404\u30dd\u30a4\u30f3\u30c8\u3092\u610f\u8a33\u3057\u305f\u3082\u306e\u3067\u3059\u3002<br \/>\n\u203b\u5f53\u30d6\u30ed\u30b0\u3067\u306e\u7ffb\u8a33\u8a18\u4e8b\u306f\u3001\u5143\u30b5\u30a4\u30c8\u69d8\u306b\u30e9\u30a4\u30bb\u30f3\u30b9\u3092\u5f97\u3066\u7ffb\u8a33\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul class=\"mT3em listStyleAchor\">\n<li><a href=\"#h200\">\u306f\u3058\u3081\u306b<\/a><\/li>\n<li><a href=\"#h201\">\u533a\u5207\u308a\u7dda\u306e\u5b9f\u88c5<\/a><\/li>\n<li><a href=\"#h202\">\u306a\u305c\u533a\u5207\u308a\u7dda\u304c\u5c0f\u3055\u3044\u56db\u89d2\u306b\u306a\u308b\u306e\u304b<\/a><\/li>\n<li><a href=\"#h203\">\u533a\u5207\u308a\u7dda\u306e\u592a\u3055<\/a><\/li>\n<li><a href=\"#h204\">\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u533a\u5207\u308a\u7dda<\/a><\/li>\n<li><a href=\"#h205\">\u7834\u7dda\u306e\u533a\u5207\u308a\u7dda<\/a><\/li>\n<li><a href=\"#h206\">\u3053\u308c\u3092\u884c\u3046\u5225\u306e\u65b9\u6cd5<\/a><\/li>\n<li><a href=\"#h207\">\u7d42\u308f\u308a\u306b<\/a><\/li>\n<\/ul>\n<h2 id=\"h200\">\u306f\u3058\u3081\u306b<\/h2>\n<p>UI\u3092\u30c7\u30b6\u30a4\u30f3\u3057\u3066\u3044\u308b\u3068\u304d\u306b\u3001\u30bb\u30af\u30b7\u30e7\u30f3\u9593\u306b\u533a\u5207\u308a\u3092\u52a0\u3048\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u3059\u304b\uff1f<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-01.png\" width=\"541\" height=\"260\" alt=\"\u30bb\u30af\u30b7\u30e7\u30f3\u9593\u306e\u533a\u5207\u308a\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/260;\"><\/div>\n<p>\u30bb\u30af\u30b7\u30e7\u30f3\u9593\u306e\u533a\u5207\u308a<\/p>\n<p class=\"mT2em\">\u5e45\u304c\u5c0f\u3055\u3044\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u30b9\u30de\u30db\u3067\u306f\u3001\u3053\u306e\u533a\u5207\u308a\u306f\u6c34\u5e73\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-02.png\" width=\"541\" height=\"400\" alt=\"\u30b9\u30de\u30db\u3067\u306e\u8868\u793a\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/400;\"><\/div>\n<p>\u30b9\u30de\u30db\u3067\u306f\u3001\u6c34\u5e73\u306b\u306a\u308b<\/p>\n<p class=\"mT2em\">\u3053\u306eUI\u306e\u69cb\u9020\u3092HTML\u3067\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"HTML\" >&lt;section class=\"section\"&gt;\r\n    &lt;div class=\"section__item section__item--start\"&gt;\r\n        &lt;!-- Content --&gt;\r\n    &lt;\/div&gt;\r\n  \r\n    &lt;div class=\"section__item section__item--end\"&gt;\r\n        &lt;!-- Content --&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/section&gt;<\/pre>\n<p class=\"mT1em\"><code>section<\/code>\u3067\u5185\u5305\u3057\u30012\u3064\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u9593\u306b\u3001\u533a\u5207\u308a\u7528\u306e\u30e9\u30a4\u30f3\u3092\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n<p class=\"mT2em\">CSS\u306f\u3001<a href=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/articles\/build-websites\/operation\/css\/css3-flexbox-properties-by-scotch.html\">flexbox<\/a>\u3067\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >.section {\r\n    display: flex;\r\n    gap: 1rem;\r\n    max-width: 700px;\r\n    margin: 2rem auto;\r\n}\r\n\r\n.section__item {\r\n    flex: 1;\r\n}<\/pre>\n<p class=\"mT2em\">\u5b50\u30a2\u30a4\u30c6\u30e0\u9593\u306b<code>1rem<\/code>\u306e\u30ae\u30e3\u30c3\u30d7\u3092\u4e0e\u3048\u3001\u307e\u305f2\u3064\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u306f\u89aa\u306e50\uff05\u3092\u5360\u3081\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002\u3053\u306e\u7d50\u679c\u306f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-03.png\" width=\"541\" height=\"260\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/260;\"><\/div>\n<p>2\u3064\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u3092\u89aa\u306e50\uff05\u306b\u3001\u30ae\u30e3\u30c3\u30d7\u306f<code>1rem<\/code><\/p>\n<p class=\"mT2em\">\u6b21\u306b\u30012\u3064\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u3092\u7e26\u65b9\u5411\u306e\u4e2d\u592e\u63c3\u3048\u306b\u3057\u305f\u3044\u306e\u3067\u3001\u89aa\u306b<code>align-items<\/code>\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default mark:3 decode:true \" title=\"CSS\" >.section {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    \/* other styles *\/\r\n}\r\n\r\n.section__item {\r\n    flex: 1;\r\n}<\/pre>\n<p class=\"mT2em\"><code>align-items: center;<\/code>\u3092\u8ffd\u52a0\u3057\u305f\u306e\u3067\u30012\u3064\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u306f\u4e2d\u592e\u306b\u914d\u7f6e\u3055\u308c\u307e\u3057\u305f\uff08\u308f\u304b\u308a\u3084\u3059\u304f\u3059\u308b\u305f\u3081\u306b\u8d64\u7dda\u3092\u8ffd\u52a0\uff09\u3002<code>align-items<\/code>\u304c\u533a\u5207\u308a\u7dda\u3068\u4f55\u306e\u95a2\u4fc2\u304c\u3042\u308b\u306e\u304b\u3001\u3068\u601d\u308f\u308c\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u5927\u4e08\u592b\u3067\u3059\u3001\u7d9a\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-04.png\" width=\"541\" height=\"260\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/260;\"><\/div>\n<p>2\u3064\u306e\u5b50\u30a2\u30a4\u30c6\u30e0\u3092\u7e26\u65b9\u5411\u306e\u4e2d\u592e\u63c3\u3048\u306b<\/p>\n<h2 id=\"h201\">\u533a\u5207\u308a\u7dda\u306e\u5b9f\u88c5<\/h2>\n<p>\u533a\u5207\u308a\u7dda\u306f\u64ec\u4f3c\u8981\u7d20\u3068\u3057\u3066\u5b9f\u88c5\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3001\u4e0b\u8a18\u306eCSS\u3092\u8a18\u8ff0\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >.section:before {\r\n    content: \"\";\r\n    border: 1px solid #d3d3d3;\r\n}<\/pre>\n<p class=\"mT2em\">\u3053\u306eCSS\u3067\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u304b\uff1f<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-05.png\" width=\"541\" height=\"260\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/260;\"><\/div>\n<p>\u5c0f\u3055\u3044\u56db\u89d2\uff1f\uff1f\uff1f<\/p>\n<p class=\"mT1em\">\u3093\uff1f \u3053\u306e\u5c0f\u3055\u3044\u56db\u89d2\u306f\u4f55\uff1f<br \/>\n\u7591\u4f3c\u8981\u7d20\u306f\u3059\u3079\u3066\u306e\u8fba\u304b\u30891px\u306e\u30dc\u30fc\u30c0\u30fc\u3057\u304b\u306a\u3044\u305f\u3081\u3001\u305d\u306e\u7d50\u679c\u306f2*2\u306e\u6b63\u65b9\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p class=\"mT2em\">\u3053\u3053\u306b\u5c11\u3057\u6ce8\u76ee\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3001\u3053\u306eCSS\u306e\u5c0f\u6280\u306e\u6838\u5fc3\u3067\u3059\u3002<\/p>\n<p class=\"mT1em\">\u6b63\u65b9\u5f62\u306f\u3001\u56db\u8fba\u306e\u30dc\u30fc\u30c0\u30fc\u306b\u540c\u3058\u30ab\u30e9\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u751f\u307e\u308c\u307e\u3059\u3002\u8272\u304c\u5909\u3048\u308b\u3068\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-06.png\" width=\"541\" height=\"300\" alt=\"\u6b63\u65b9\u5f62\u304c\u3067\u304d\u308b\u4ed5\u7d44\u307f\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/300;\"><\/div>\n<p>\u5c0f\u3055\u3044\u56db\u89d2\u304c\u3067\u304d\u308b\u4ed5\u7d44\u307f<\/p>\n<h2 id=\"h202\">\u306a\u305c\u533a\u5207\u308a\u7dda\u304c\u5c0f\u3055\u3044\u56db\u89d2\u306b\u306a\u308b\u306e\u304b<\/h2>\n<p><code>align-items: center;<\/code>\u3092\u8ffd\u52a0\u3057\u3066\u5b50\u30a2\u30a4\u30c6\u30e0\u3092\u7e26\u65b9\u5411\u306e\u4e2d\u592e\u63c3\u3048\u306b\u3057\u305f\u305f\u3081\u3001flexbox\u304c\u5b50\u30a2\u30a4\u30c6\u30e0\u3092\u4f38\u7e2e\u3059\u308b\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u52d5\u4f5c\uff08\u3053\u306e\u5834\u5408\u3001\u7e26\u65b9\u5411\u306b\u4f38\u3070\u3059\uff09\u304c\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p class=\"mT1em\">\u4f38\u7e2e\u3059\u308b\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u52d5\u4f5c\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u305f\u3081\u306b\u3001\u64ec\u4f3c\u8981\u7d20\u306e<code>align-self<\/code>\u3092<code>stretch<\/code>\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default mark:4 decode:true \" title=\"CSS\" >.section:before {\r\n    content: \"\";\r\n    border: 1px solid #d3d3d3;\r\n    align-self: stretch;\r\n}<\/pre>\n<p class=\"mT2em\">\u3053\u308c\u3067\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-07.png\" width=\"541\" height=\"260\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/260;\"><\/div>\n<p>\u7e26\u65b9\u5411\u306b\u4f38\u3070\u3055\u308c\u308b<\/p>\n<p class=\"mT2em\">\u6b21\u306b\u3001flex\u30a2\u30a4\u30c6\u30e0\u306e\u9593\u306b\u533a\u5207\u308a\u7dda\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3001\u4e26\u3073\u66ff\u3048\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >.section__item--start {\r\n    order: -1;\r\n}<\/pre>\n<p class=\"mT2em\">\u671f\u5f85\u901a\u308a\u3001flex\u30a2\u30a4\u30c6\u30e0\u306e\u9593\u306b\u533a\u5207\u308a\u7dda\u304c\u914d\u7f6e\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-08.png\" width=\"541\" height=\"260\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/260;\"><\/div>\n<p>\u4e26\u3073\u9806\u3092\u5909\u66f4\u3059\u308b<\/p>\n<p class=\"mT2em\">\u3059\u3079\u3066\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b5\u30a4\u30ba\u3067\u52d5\u4f5c\u3055\u305b\u308b\u306b\u306f\u3001<code>flex-direction: column;<\/code>\u3092\u30b9\u30de\u30db\u7528\u306b\u3001<code>flex-direction: row;<\/code>\u3092\u5927\u304d\u306a\u30b9\u30af\u30ea\u30fc\u30f3\u7528\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default mark:3,16 decode:true \" title=\"CSS\" >.section {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1rem;\r\n}\r\n\r\n.section:before {\r\n    content: \"\";\r\n    border: 1px solid #d3d3d3;\r\n    align-self: stretch;\r\n}\r\n\r\n@media (min-width: 700px) {\r\n    .section {\r\n        align-items: center;\r\n        flex-direction: row;\r\n    }\r\n}<\/pre>\n<p class=\"mT2em\"><code>flex-direction<\/code>\u3092\u5909\u66f4\u3059\u308b\u3068\u3001\u533a\u5207\u308a\u7dda\u304c\u3069\u3046\u306a\u308b\u304b\u306f\u4e0b\u8a18\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-09.gif\" width=\"541\" height=\"304\" alt=\"\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/304;\"><\/div>\n<p><code>flex-direction<\/code>\u3092\u5909\u66f4\u3059\u308b\u3068\u3001\u533a\u5207\u308a\u7dda\u304c\u5909\u308f\u308b<\/p>\n<p class=\"mT1em\">\u3053\u308c\u306fflexbox\u306e\u30d3\u30d8\u30a4\u30d3\u30a2\u306a\u306e\u3067\u3001\u9b54\u6cd5\u306e\u3088\u3046\u306b\u52d5\u304d\u307e\u3059\u3002<\/p>\n<p class=\"mT2em\"><code>flex-direction: row;<\/code>\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30af\u30ed\u30b9\u8ef8\u304c\u5782\u76f4\u306b\u306a\u308a\u3001\u64ec\u4f3c\u8981\u7d20\u306f\u5782\u76f4\u65b9\u5411\u306b\u4f38\u3073\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-10.png\" width=\"541\" height=\"240\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/240;\"><\/div>\n<p><code>flex-direction: row;<\/code>\u3060\u3068\u3001\u5782\u76f4\u65b9\u5411\u306e\u4f38\u3073\u308b<\/p>\n<p class=\"mT2em\">\u305d\u3057\u3066\u3001<code>flex-direction: column;<\/code>\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30af\u30ed\u30b9\u8ef8\u304c\u6c34\u5e73\u306b\u306a\u308a\u3001\u7591\u4f3c\u8981\u7d20\u306f\u6c34\u5e73\u65b9\u5411\u306b\u4f38\u3073\u307e\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-11.png\" width=\"541\" height=\"330\" alt=\"\u30c7\u30e2\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/330;\"><\/div>\n<p><code>flex-direction: column;<\/code>\u3060\u3068\u3001\u6c34\u5e73\u65b9\u5411\u306e\u4f38\u3073\u308b<\/p>\n<p class=\"mT2em\">\u3053\u306e\u5b9f\u88c5\u306e\u7d20\u6674\u3089\u3057\u3044\u70b9\u306f\u3001<code>width<\/code>\u3084<code>height<\/code>\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u306a\u3044\u3053\u3068\u3067\u3059\u3002\u533a\u5207\u308a\u7dda\u306e<code>border<\/code>\u306fflexbox\u3067\u52dd\u624b\u306b\u4f38\u3073\u7e2e\u307f\u3057\u307e\u3059\u3002<\/p>\n<h2 id=\"h203\">\u533a\u5207\u308a\u7dda\u306e\u592a\u3055<\/h2>\n<p><code>border<\/code>\u306e\u5024\u306f4\u65b9\u5411\u306b\u5bc4\u4e0e\u3059\u308b\u306e\u3067\u3001\u5e0c\u671b\u3059\u308b\u592a\u3055\u306e0.5\u500d\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001<code>1px<\/code>\u306e\u533a\u5207\u308a\u7dda\u306b\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >.section:before {\r\n    content: \"\";\r\n    border: 0.5px solid #d3d3d3;\r\n    align-self: stretch;\r\n}<\/pre>\n<h2 id=\"h204\">\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u533a\u5207\u308a\u7dda<\/h2>\n<p>\u3053\u308c\u306f\u79c1\u304c\u3053\u306e<code>border<\/code>\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9078\u3076\u7406\u7531\u306e\u4e00\u3064\u3067\u3059\u3002<code>border-image<\/code>\u3067\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >.section:before {\r\n    content: \"\";\r\n    align-self: stretch;\r\n    border: 1px solid #d3d3d3;\r\n    border-image: linear-gradient(45deg, #3f51b5, #cddc39) 1;\r\n}<\/pre>\n<p class=\"mT2em\">\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u533a\u5207\u308a\u7dda\u3082\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-12.png\" width=\"541\" height=\"450\" alt=\"\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u533a\u5207\u308a\u7dda\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/450;\"><\/div>\n<p>\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u533a\u5207\u308a\u7dda<\/p>\n<h2 id=\"h205\">\u7834\u7dda\u306e\u533a\u5207\u308a\u7dda<\/h2>\n<p><code>border<\/code>\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u7834\u7dda\u306e\u533a\u5207\u308a\u7dda\u306b\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >.section:before {\r\n    content: \"\";\r\n    border: 1px dashed #d3d3d3;\r\n    align-self: stretch;\r\n}<\/pre>\n<p class=\"mT2em\">\u3053\u306e\u901a\u308a\u3001\u7834\u7dda\u306e\u533a\u5207\u308a\u7dda\u3082\u7c21\u5358\u3067\u3059\u3002<\/p>\n<div class=\"mT2em\"><img decoding=\"async\" class=\"imgFix lazyload\" data-src=\"\/\/coliss.com\/wp-content\/uploads-202201\/2022030502-13.png\" width=\"541\" height=\"450\" alt=\"\u7834\u7dda\u306e\u533a\u5207\u308a\u7dda\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 541px; --smush-placeholder-aspect-ratio: 541\/450;\"><\/div>\n<p>\u7834\u7dda\u306e\u533a\u5207\u308a\u7dda<\/p>\n<h2 id=\"h206\">\u3053\u308c\u3092\u884c\u3046\u5225\u306e\u65b9\u6cd5<\/h2>\n<p>\u3082\u3057\u3001\u3053\u306e\u5b9f\u88c5\u3092\u8003\u3048\u308b\u306e\u306b\u6642\u9593\u304c\u304b\u304b\u3063\u3066\u3044\u306a\u3051\u308c\u3070\u3001<code>width<\/code>\u3068<code>height<\/code>\u3092\u4f7f\u7528\u3057\u305f\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u4e0b\u8a18\u304c\u60aa\u3044\u89e3\u6c7a\u7b56\u3060\u3068\u306f\u8a00\u3044\u307e\u305b\u3093\u304c\u3001\u5f53\u305f\u308a\u524d\u306e\u3088\u3046\u306b\u4f7f\u7528\u3057\u3066\u3044\u305f\u5b9f\u88c5\u65b9\u6cd5\u304b\u3089\u4e00\u6b69\u8e0f\u307f\u51fa\u3057\u3066\u3001UI\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u5225\u306e\u65b9\u6cd5\u3092\u8003\u3048\u308b\u306e\u306f\u826f\u3044\u3053\u3068\u3060\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"CSS\" >\/* On small sizes *\/\r\n.section:before {\r\n    content: \"\";\r\n    height: 2px;\r\n    background-color: lightgrey;\r\n}\r\n\r\n@media (min-width: 700px) {\r\n    .section:before {\r\n        width: 2px;\r\n        height: 150px;\r\n    }\r\n}<\/pre>\n<p class=\"mT2em\">\u5b9f\u969b\u306e\u52d5\u4f5c\u306f\u30c7\u30e2\u30da\u30fc\u30b8\u3067\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p class=\"codepen\" data-height=\"500\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"ExboQwo\" data-preview=\"true\" data-user=\"shadeed\" style=\"height: 500px; 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:\/\/proxy.goincop1.workers.dev:443\/https\/codepen.io\/shadeed\/pen\/ExboQwo\"><br \/>\n  Flexbox Dynamic Line Separator<\/a> by Ahmad Shadeed (<a href=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/codepen.io\/shadeed\">@shadeed<\/a>)<br \/>\n  on <a href=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2 id=\"h207\">\u7d42\u308f\u308a\u306b<\/h2>\n<p>\u3053\u306e\u8a18\u4e8b\u304c\u3042\u306a\u305f\u306e\u304a\u5f79\u306b\u7acb\u3066\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<br \/>\n\u30b3\u30e1\u30f3\u30c8\u3084\u63d0\u6848\u304c\u3042\u308c\u3070\u3001<a href=\"https:\/\/proxy.goincop1.workers.dev:443\/https\/twitter.com\/shadeed9\">@shadeed9<\/a>\u307e\u3067\u304a\u9858\u3044\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u8981\u7d20\u9593\u306e\u533a\u5207\u308a\u7dda\u3092\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306b\u3059\u308b\u6642\u3001\u3069\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u304b\uff1f flexbox\u3067\u5b9f\u88c5\u3059\u308b\u3068\u30011\u3064\u306e\u30b3\u30fc\u30c9\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5408\u308f\u305b\u3066\u4f38\u7e2e\u3057\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3082\u30b9\u30de\u30db\u306b\u3082\u5bfe\u5fdc\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u5782\u76f4\u30fb\u6c34\u5e73\u306b\u3082\u5207\u308a\u66ff [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5636],"tags":[8540,6361],"class_list":["post-37358","post","type-post","status-publish","format-standard","hentry","category-css","tag-flexbox","tag-css-build-websites"],"_links":{"self":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/posts\/37358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/comments?post=37358"}],"version-history":[{"count":0,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/posts\/37358\/revisions"}],"wp:attachment":[{"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/media?parent=37358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/categories?post=37358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/coliss.com\/wp-json\/wp\/v2\/tags?post=37358"}],"curies":[{"name":"wp","href":"https:\/\/proxy.goincop1.workers.dev:443\/https\/api.w.org\/{rel}","templated":true}]}}