{"id":8605,"date":"2025-04-02T10:28:24","date_gmt":"2025-04-02T01:28:24","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=8605"},"modified":"2025-04-06T23:48:44","modified_gmt":"2025-04-06T14:48:44","slug":"css-layout-properties","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/css-layout-properties\/","title":{"rendered":"\u3044\u307e\u3055\u3089\u805e\u3051\u306a\u3044\uff01CSS\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u6c7a\u3081\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5177\u4f53\u7684\u306a\u4f7f\u3044\u65b9"},"content":{"rendered":"<div class=\"the_content\">\n<p>Web\u5236\u4f5c\u3092\u3057\u3066\u3044\u308b\u3068\u3001\u300c\u3053\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u3069\u3046\u3084\u3063\u3066\u5b9f\u88c5\u3059\u308c\u3070\u3044\u3044\u3093\u3060\u308d\u3046\uff1f\u300d\u3068\u60a9\u3080\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f<br>HTML\u3084CSS\u306e\u57fa\u672c\u306f\u77e5\u3063\u3066\u3044\u308b\u3051\u308c\u3069\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u65b9\u6cd5\u304c\u3044\u307e\u3044\u3061\u308f\u304b\u3089\u306a\u3044\u3001\u3042\u308b\u3044\u306f <strong>\u300c\u3044\u3064\u3082Flexbox\u3057\u304b\u4f7f\u3063\u3066\u3044\u306a\u3044\u3051\u3069\u3001\u4ed6\u306b\u3082\u3063\u3068\u9069\u3057\u305f\u65b9\u6cd5\u304c\u3042\u308b\u306e\u3067\u306f\uff1f\u300d<\/strong> \u3068\u8003\u3048\u305f\u3053\u3068\u304c\u3042\u308b\u4eba\u3082\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001CSS\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u3092\u5177\u4f53\u7684\u306a\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\u3054\u3068\u306b\u7d39\u4ecb\u3057\u3001\u3069\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u3069\u306e\u3088\u3046\u306b\u4f7f\u3048\u3070\u3088\u3044\u306e\u304b\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002 <strong>\u300c\u306a\u3093\u3068\u306a\u304f\u3084\u3063\u3066\u3044\u308b\u3051\u3069\u3001\u3082\u3063\u3068\u9069\u5207\u306a\u65b9\u6cd5\u3092\u77e5\u308a\u305f\u3044\uff01\u300d<\/strong> \u3068\u3044\u3046\u65b9\u306b\u3074\u3063\u305f\u308a\u306a\u5185\u5bb9\u3067\u3059\u306e\u3067\u3001\u305c\u3072\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. \u3069\u3093\u306a\u5834\u5408\u306b\u3069\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u3046\u3079\u304d\u304b\uff1f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2460 \u30b7\u30f3\u30d7\u30eb\u306a1\u5217\u30fb2\u5217\u30ec\u30a4\u30a2\u30a6\u30c8\uff08Flexbox\uff09<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u672c\u6587\u30a8\u30ea\u30a2<\/li>\n\n\n\n<li>\u5546\u54c1\u30da\u30fc\u30b8\u306a\u3069\u306e\u30b7\u30f3\u30d7\u30eb\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30ea\u30a2<\/li>\n\n\n\n<li>\u30b5\u30a4\u30c9\u30d0\u30fc\u3068\u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4e26\u3079\u308b<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<p><code>display: flex;<\/code> \u3092\u4f7f\u3046\u3068\u3001<code>flex-direction: column;<\/code> \u3067\u7e26\u4e26\u3073\u3001<code>flex-direction: row;<\/code> \u3067\u6a2a\u4e26\u3073\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  flex-direction: row; \/* \u6a2a\u4e26\u3073\uff082\u5217\uff09 *\/\n}\n\n.sidebar {\n  width: 30%;\n  background-color: lightgray;\n  padding: 10px;\n}\n\n.main-content {\n  width: 70%;\n  background-color: lightblue;\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u30b5\u30a4\u30c9\u30d0\u30fc\u3068\u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u6a2a\u4e26\u3073\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyLGMoq\" src=\"\/\/codepen.io\/anon\/embed\/yyLGMoq?height=450&amp;theme-id=1&amp;slug-hash=yyLGMoq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyLGMoq\" title=\"CodePen Embed yyLGMoq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2461 \u8907\u6570\u306e\u8981\u7d20\u3092\u5747\u7b49\u914d\u7f6e\u3059\u308b\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\uff08Flexbox\uff09<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>\u30d5\u30c3\u30bf\u30fc\u30e1\u30cb\u30e5\u30fc<\/li>\n\n\n\n<li>\u30dc\u30bf\u30f3\u3092\u6a2a\u4e26\u3073\u306b\u3057\u305f\u3044\u3068\u304d<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<p><code>justify-content: space-between;<\/code> \u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u8981\u7d20\u304c\u5747\u7b49\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar {\n  display: flex;\n  justify-content: space-between;\n  background-color: black;\n  padding: 10px;\n}\n\n.navbar a {\n  background-color: gray; \/* \u30af\u30ea\u30c3\u30af\u9818\u57df\u3092\u8996\u899a\u5316 *\/\n  color: white;\n  text-decoration: none;\n  padding: 5px 10px;\n  border-radius: 4px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u9ed2\u3044\u80cc\u666f\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u4e21\u7aef\u306b\u30e1\u30cb\u30e5\u30fc\u304c\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_raNomyV\" src=\"\/\/codepen.io\/anon\/embed\/raNomyV?height=450&amp;theme-id=1&amp;slug-hash=raNomyV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed raNomyV\" title=\"CodePen Embed raNomyV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2462 \u30ab\u30fc\u30c9\u578b\u306e\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\uff08CSS Grid\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5546\u54c1\u4e00\u89a7\u30da\u30fc\u30b8<\/li>\n\n\n\n<li>\u30d6\u30ed\u30b0\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u8868\u793a<\/li>\n\n\n\n<li>\u5199\u771f\u30ae\u30e3\u30e9\u30ea\u30fc<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<p><code>grid-template-columns<\/code> \u3067\u5217\u3092\u6307\u5b9a\u3057\u3001<code>gap<\/code> \u3067\u8981\u7d20\u306e\u9593\u9694\u3092\u8abf\u6574\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.card {\n  background-color: lightgray;\n  padding: 20px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>3\u3064\u306e\u30ab\u30fc\u30c9\u304c\u5747\u7b49\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_azbPWwZ\" src=\"\/\/codepen.io\/anon\/embed\/azbPWwZ?height=450&amp;theme-id=1&amp;slug-hash=azbPWwZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed azbPWwZ\" title=\"CodePen Embed azbPWwZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong><strong>\u2463 \u30b5\u30a4\u30c9\u30d0\u30fc\u4ed8\u304d\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\uff08CSS Grid \/ Flexbox\uff09<\/strong><\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b5\u30a4\u30c9\u30d0\u30fc + \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u914d\u7f6e<\/li>\n\n\n\n<li>\u7ba1\u7406\u753b\u9762\u306a\u3069\u306e2\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff08CSS Grid\uff09\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: grid;\n  grid-template-columns: 280px 1fr;\n}\n\n.sidebar {\n  background-color: lightgray;\n  padding: 10px;\n}\n\n.main-content {\n  background-color: lightblue;\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u30b5\u30a4\u30c9\u30d0\u30fc\u3068\u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u3001\u30b0\u30ea\u30c3\u30c9\u3067\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mydamBx\" src=\"\/\/codepen.io\/anon\/embed\/mydamBx?height=450&amp;theme-id=1&amp;slug-hash=mydamBx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mydamBx\" title=\"CodePen Embed mydamBx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2464 \u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u9ad8\u3055\u3092\u63c3\u3048\u308b\uff08Flexbox\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u9ad8\u3055\u3092\u7d71\u4e00\u3057\u305f\u3044\u3068\u304d<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<p><code>align-items: stretch;<\/code> \u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u5b50\u8981\u7d20\u306e\u9ad8\u3055\u304c\u63c3\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  align-items: stretch;\n  gap: 16px; \/* \u30dc\u30c3\u30af\u30b9\u306e\u9593\u306b\u4f59\u767d\u3092\u8ffd\u52a0 *\/\n}\n\n.box {\n  background-color: lightcoral;\n  padding: 20px;\n  flex: 1;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u5404\u30dc\u30c3\u30af\u30b9\u306e\u9ad8\u3055\u304c\u7d71\u4e00\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBvRdyR\" src=\"\/\/codepen.io\/anon\/embed\/wBvRdyR?height=450&amp;theme-id=1&amp;slug-hash=wBvRdyR&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBvRdyR\" title=\"CodePen Embed wBvRdyR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2465 \u7e26\u6a2a\u4e2d\u592e\u63c3\u3048\uff08Flexbox \/ CSS Grid\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30dc\u30bf\u30f3\u3084\u30c6\u30ad\u30b9\u30c8\u3092\u771f\u3093\u4e2d\u306b\u3057\u305f\u3044\u3068\u304d<\/li>\n\n\n\n<li>\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u753b\u9762<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff08Flexbox\uff09\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n\n.content {\n  background-color: lightgreen;\n  padding: 30px;\n  border-radius: 8px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u30da\u30fc\u30b8\u5168\u4f53\u306e\u4e2d\u592e\u306b\u8981\u7d20\u304c\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJWoRqK\" src=\"\/\/codepen.io\/anon\/embed\/XJWoRqK?height=450&amp;theme-id=1&amp;slug-hash=XJWoRqK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJWoRqK\" title=\"CodePen Embed XJWoRqK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2466 \u753b\u50cf\u306e\u56de\u308a\u8fbc\u307f\uff08float\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c6\u30ad\u30b9\u30c8\u306e\u6a2a\u306b\u753b\u50cf\u3092\u914d\u7f6e\u3057\u305f\u3044\u5834\u5408<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.image {\n  float: left;\n  margin-right: 16px;\n  width: 20%;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u753b\u50cf\u304c\u30c6\u30ad\u30b9\u30c8\u306e\u5de6\u5074\u306b\u914d\u7f6e\u3055\u308c\u3001\u56de\u308a\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJWoRPj\" src=\"\/\/codepen.io\/anon\/embed\/XJWoRPj?height=450&amp;theme-id=1&amp;slug-hash=XJWoRPj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJWoRPj\" title=\"CodePen Embed XJWoRPj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2467 \u7279\u5b9a\u306e\u8981\u7d20\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u306b\u8ffd\u5f93\u3055\u305b\u308b\uff08position: sticky\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u76ee\u6b21\u3092\u56fa\u5b9a\u3057\u305f\u3044\u3068\u304d<\/li>\n\n\n\n<li>\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306b\u30d8\u30c3\u30c0\u30fc\u3092\u56fa\u5b9a\u3057\u305f\u3044\u3068\u304d<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.header {\n  position: sticky;\n  top: 0;\n  background-color: #f0f8ff; \/* \u6de1\u3044\u30d6\u30eb\u30fc *\/\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n  z-index: 10;\n}\n\n.content {\n  padding: 20px;\n  line-height: 1.6;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u30d8\u30c3\u30c0\u30fc\u304c\u753b\u9762\u4e0a\u90e8\u306b\u56fa\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyLGbWe\" src=\"\/\/codepen.io\/anon\/embed\/yyLGbWe?height=450&amp;theme-id=1&amp;slug-hash=yyLGbWe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyLGbWe\" title=\"CodePen Embed yyLGbWe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2468 \u30da\u30fc\u30b8\u5168\u4f53\u3092\u4e2d\u592e\u5bc4\u305b\uff08margin: auto;\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3067\u5e45\u3092\u5236\u9650\u3057\u305f\u3044\u3068\u304d<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxYywVZ\" src=\"\/\/codepen.io\/anon\/embed\/zxYywVZ?height=450&amp;theme-id=1&amp;slug-hash=zxYywVZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxYywVZ\" title=\"CodePen Embed zxYywVZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2469 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5207\u308a\u66ff\u3048\uff08media queries\uff09<\/strong><\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u4f7f\u3046\u30b7\u30c1\u30e5\u30a8\u30fc\u30b7\u30e7\u30f3\uff1a<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30de\u30db\u3068PC\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5909\u3048\u305f\u3044\u5834\u5408<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f7f\u3044\u65b9\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: flex;\n  gap: 16px;\n}\n\n.box {\n  background-color: lightseagreen;\n  padding: 20px;\n  flex: 1;\n  text-align: center;\n  color: white;\n}\n\n@media (max-width: 768px) {\n  .container {\n    flex-direction: column;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u753b\u9762\u30b5\u30a4\u30ba\u304c768px\u4ee5\u4e0b\u306b\u306a\u308b\u3068\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u304c1\u30ab\u30e9\u30e0\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NPWegqW\" src=\"\/\/codepen.io\/anon\/embed\/NPWegqW?height=450&amp;theme-id=1&amp;slug-hash=NPWegqW&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NPWegqW\" title=\"CodePen Embed NPWegqW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. \u3061\u3087\u3063\u3068\u5909\u308f\u3063\u305f\u4f7f\u3044\u65b9\uff06\u4fbf\u5229\u306a\u30c6\u30af\u30cb\u30c3\u30af<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2460 <code>grid-auto-flow: dense;<\/code> \u3067\u9699\u9593\u306a\u304f\u914d\u7f6e\u3059\u308b<\/strong><\/h3>\n\n\n\n<p>\u901a\u5e38\u306e CSS Grid \u3067\u306f\u3001\u7a7a\u304d\u30b9\u30da\u30fc\u30b9\u304c\u3067\u304d\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u304c\u3001<code>grid-auto-flow: dense;<\/code> \u3092\u4f7f\u3046\u3068\u3001\u81ea\u52d5\u3067\u8981\u7d20\u3092\u8a70\u3081\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-auto-flow: dense;\n  gap: 10px;\n}\n\n.item {\n  background-color: lightsteelblue;\n  padding: 20px;\n  text-align: center;\n  font-weight: bold;\n}\n\n.item:nth-child(2) {\n  grid-column: span 2;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p><code>grid-auto-flow: dense;<\/code> \u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u9699\u9593\u306a\u304f\u8981\u7d20\u304c\u8a70\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgRPEJz\" src=\"\/\/codepen.io\/anon\/embed\/GgRPEJz?height=450&amp;theme-id=1&amp;slug-hash=GgRPEJz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgRPEJz\" title=\"CodePen Embed GgRPEJz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2461 CSS\u3060\u3051\u3067\u9ad8\u3055\u30bc\u30ed\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30c0\u30a6\u30f3\u3059\u308b\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u308b<\/strong><\/strong><\/h3>\n\n\n\n<p><code>max-height<\/code> \u3068 <code>overflow: hidden;<\/code> \u3092\u4f7f\u3046\u3068\u3001JavaScript \u306a\u3057\u3067\u958b\u9589\u3067\u304d\u308b\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.menu {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  background-color: lightgray;\n  padding: 0 10px;\n}\n\n.menu.open {\n  max-height: 200px;\n  padding: 10px;\n}\n\n.menu ul {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.menu li {\n  padding: 5px 0;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u30e1\u30cb\u30e5\u30fc\u304c\u3086\u3063\u304f\u308a\u30b9\u30e9\u30a4\u30c9\u30c0\u30a6\u30f3\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ByavZog\" src=\"\/\/codepen.io\/anon\/embed\/ByavZog?height=450&amp;theme-id=1&amp;slug-hash=ByavZog&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ByavZog\" title=\"CodePen Embed ByavZog\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong>\u2462 <code>aspect-ratio<\/code> \u3092\u4f7f\u3063\u3066\u753b\u50cf\u3084\u8981\u7d20\u306e\u6bd4\u7387\u3092\u7dad\u6301\u3059\u308b<\/strong><\/strong><\/h3>\n\n\n\n<p>\u901a\u5e38\u3001\u753b\u50cf\u306e\u6bd4\u7387\u3092\u7dad\u6301\u3059\u308b\u306b\u306f <code>padding-top<\/code> \u306a\u3069\u3092\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\u304c\u3001<code>aspect-ratio<\/code> \u3092\u4f7f\u3046\u3068\u7c21\u5358\u306b\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n  width: 50%;\n  aspect-ratio: 16 \/ 9;\n  background-color: lightgray;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u8981\u7d20\u306e\u6bd4\u7387\u304c16:9\u306b\u56fa\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJWogdg\" src=\"\/\/codepen.io\/anon\/embed\/XJWogdg?height=450&amp;theme-id=1&amp;slug-hash=XJWogdg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJWogdg\" title=\"CodePen Embed XJWogdg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong><strong>\u2463 <code>object-fit: cover;<\/code> \u3067\u753b\u50cf\u3092\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306b\u30c8\u30ea\u30df\u30f3\u30b0<\/strong><\/strong><\/strong><\/h3>\n\n\n\n<p>\u753b\u50cf\u3092\u67a0\u3044\u3063\u3071\u3044\u306b\u8868\u793a\u3057\u305f\u3044\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n.image-wrapper {\n  width: 50%; \/* \u753b\u9762\u5e45\u306e50%\u3067\u8868\u793a\uff08\u4efb\u610f\uff09 *\/\n  margin: 0 auto;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u753b\u50cf\u304c\u67a0\u5185\u306b\u7dba\u9e97\u306b\u53ce\u307e\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogNJwzM\" src=\"\/\/codepen.io\/anon\/embed\/ogNJwzM?height=450&amp;theme-id=1&amp;slug-hash=ogNJwzM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogNJwzM\" title=\"CodePen Embed ogNJwzM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong><strong>\u2464 <code>position: absolute;<\/code> \u3092\u5229\u7528\u3057\u3066\u30c6\u30ad\u30b9\u30c8\u3092\u753b\u50cf\u306e\u4e0a\u306b\u914d\u7f6e<\/strong><\/strong><\/strong><\/h3>\n\n\n\n<p><code>position: absolute;<\/code> \u3092\u4f7f\u3046\u3068\u3001\u753b\u50cf\u306e\u4e0a\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u7c21\u5358\u306b\u914d\u7f6e\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  position: relative;\n  width: 50%;\n  margin: 0 auto;\n}\n\n.container img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n.text-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  background-color: rgba(0, 0, 0, 0.5);\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u753b\u50cf\u306e\u4e2d\u592e\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xbxmrqW\" src=\"\/\/codepen.io\/anon\/embed\/xbxmrqW?height=450&amp;theme-id=1&amp;slug-hash=xbxmrqW&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xbxmrqW\" title=\"CodePen Embed xbxmrqW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong><strong>\u2465 <code>clip-path<\/code> \u3092\u6d3b\u7528\u3057\u3066\u8981\u7d20\u3092\u81ea\u7531\u306a\u5f62\u306b\u5207\u308a\u629c\u304f<\/strong><\/strong><\/strong><\/h3>\n\n\n\n<p><code>clip-path<\/code> \u3092\u4f7f\u3046\u3068\u3001CSS\u3060\u3051\u3067\u8981\u7d20\u306e\u5f62\u3092\u5909\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.clip-box {\n  width: 200px;\n  height: 200px;\n  background-color: lightblue;\n  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n  margin: 40px auto;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u8981\u7d20\u304c\u4e09\u89d2\u5f62\u306b\u5207\u308a\u629c\u304b\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgRPEWa\" src=\"\/\/codepen.io\/anon\/embed\/GgRPEWa?height=450&amp;theme-id=1&amp;slug-hash=GgRPEWa&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgRPEWa\" title=\"CodePen Embed GgRPEWa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><strong><strong>\u2466 <code>overflow: hidden;<\/code> \u3092\u6d3b\u7528\u3057\u3066\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u5236\u5fa1\u3059\u308b<\/strong><\/strong><\/strong><\/h3>\n\n\n\n<p>\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u305b\u305f\u304f\u306a\u3044\u5834\u5408\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.outer-box {\n  width: 300px;\n  height: 100px;\n  background-color: lightgray;\n  overflow: hidden; \/* \u306f\u307f\u51fa\u3059\u90e8\u5206\u3092\u975e\u8868\u793a\u306b *\/\n  border: 2px solid #ccc;\n  margin: 40px auto;\n}\n\n.inner-box {\n  width: 100%;\n  height: auto;\n  font-size: 16px;\n  line-height: 1.6;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\uff1a<\/h4>\n\n\n\n<p>\u306f\u307f\u51fa\u305f\u90e8\u5206\u304c\u975e\u8868\u793a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pvoqwrN\" src=\"\/\/codepen.io\/anon\/embed\/pvoqwrN?height=450&amp;theme-id=1&amp;slug-hash=pvoqwrN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pvoqwrN\" title=\"CodePen Embed pvoqwrN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>CSS\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001<strong>\u300c\u3069\u306e\u5834\u9762\u3067\u3069\u306e\u624b\u6cd5\u3092\u4f7f\u3046\u304b\u300d<\/strong> \u3092\u7406\u89e3\u3059\u308b\u3068\u3001\u3088\u308a\u30b9\u30e0\u30fc\u30ba\u306b\u7d44\u3081\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b7\u30f3\u30d7\u30eb\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u306f <strong>Flexbox<\/strong><\/li>\n\n\n\n<li>\u30b0\u30ea\u30c3\u30c9\u72b6\u306b\u6574\u5217\u3055\u305b\u305f\u3044\u3068\u304d\u306f <strong>CSS Grid<\/strong><\/li>\n\n\n\n<li>\u30d8\u30c3\u30c0\u30fc\u3092\u56fa\u5b9a\u3057\u305f\u3044\u306a\u3089 <strong>position: sticky<\/strong><\/li>\n\n\n\n<li>\u753b\u50cf\u3092\u7dba\u9e97\u306b\u30c8\u30ea\u30df\u30f3\u30b0\u3059\u308b\u306a\u3089 <strong>object-fit<\/strong><\/li>\n\n\n\n<li>\u7279\u6b8a\u306a\u5f62\u306b\u3057\u305f\u3044\u306a\u3089 <strong>clip-path<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u3068\u3044\u3063\u305f\u3088\u3046\u306b\u3001\u305d\u308c\u305e\u308c\u306e\u7279\u6027\u3092\u6d3b\u304b\u305b\u3070\u3001\u3088\u308a\u67d4\u8edf\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u300c\u3044\u3064\u3082\u540c\u3058\u65b9\u6cd5\u3067\u3057\u304b\u7d44\u3093\u3067\u3044\u306a\u3044\u306a\u2026\u300d\u3068\u3044\u3046\u65b9\u306f\u3001\u305c\u3072\u4eca\u56de\u7d39\u4ecb\u3057\u305f\u30c6\u30af\u30cb\u30c3\u30af\u3092\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br>\u3061\u3087\u3063\u3068\u3057\u305f\u5de5\u592b\u3067\u3001\u3082\u3063\u3068\u7f8e\u3057\u304f\u3001\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3057\u3084\u3059\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3088\uff01<\/p>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Web\u5236\u4f5c\u3092\u3057\u3066\u3044\u308b\u3068\u3001\u300c\u3053\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u3069\u3046\u3084\u3063\u3066\u5b9f\u88c5\u3059\u308c\u3070\u3044\u3044\u3093\u3060\u308d\u3046\uff1f\u300d\u3068\u60a9\u3080\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1fHTML\u3084CSS\u306e\u57fa\u672c\u306f\u77e5\u3063\u3066\u3044\u308b\u3051\u308c\u3069\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u65b9\u6cd5\u304c\u3044\u307e\u3044\u3061\u308f\u304b\u3089\u306a\u3044\u3001\u3042\u308b\u3044\u306f \u300c\u3044\u3064\u3082Flexbox [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":8648,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[13,575],"tags":[33,432,431,430,429],"class_list":["post-8605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-html-css","tag-css","tag-432","tag-431","tag-430","tag-429"],"acf":[],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/04\/8605.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/8605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/comments?post=8605"}],"version-history":[{"count":14,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/8605\/revisions"}],"predecessor-version":[{"id":8639,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/8605\/revisions\/8639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media\/8648"}],"wp:attachment":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media?parent=8605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/categories?post=8605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/tags?post=8605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}