{"id":954,"date":"2023-04-12T16:00:58","date_gmt":"2023-04-12T07:00:58","guid":{"rendered":"http:\/\/edu.ujhb.org\/?p=954"},"modified":"2025-04-18T19:47:24","modified_gmt":"2025-04-18T10:47:24","slug":"css%e5%85%a5%e9%96%80%ef%bc%88%e6%97%a5%e6%9c%ac%e8%aa%9e%e7%89%88%ef%bc%89","status":"publish","type":"post","link":"https:\/\/edu.ujhb.org\/?p=954","title":{"rendered":"CSS\u5165\u9580\uff08\u65e5\u672c\u8a9e\u7248\uff09"},"content":{"rendered":"\n<p>IT\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30d3\u30c7\u30aa\u3092\u3084\u308a\u305f\u3044\u306e\u3067\u3059\u304c\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5fdc\u3058\u3066\u30d3\u30c7\u30aa\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u914d\u7f6e\u3057\u3066\u3044\u305f\u3060\u3051\u307e\u3059\u304b\u3002 CSS\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304b\u3089\u59cb\u3081\u307e\u3057\u3087\u3046\u3001\u305d\u3057\u3066\u3042\u306a\u305f\u306f\u79c1\u306b\u30ab\u30d0\u30fc\u3059\u308b\u3082\u306e\u306e\u30ea\u30b9\u30c8\u3092\u4e0e\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u78ba\u304b\u306b\u3001CSS\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>CSS \u3068\u306f: CSS \u306e\u6982\u5ff5\u3068\u5f79\u5272\u306e\u6982\u8981\u3002<\/li>\n\n\n\n<li>CSS \u69cb\u6587: \u30bb\u30ec\u30af\u30bf\u30fc\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3001\u5024\u306e\u4f7f\u7528\u306a\u3069\u3001CSS \u306e\u69cb\u6587\u3068\u898f\u5247\u3002<\/li>\n\n\n\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u3068\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8: \u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u3068\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306e\u5229\u70b9\u3001\u6b20\u70b9\u3001\u304a\u3088\u3073\u4f7f\u7528\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb: \u30d1\u30c7\u30a3\u30f3\u30b0\u3001\u5883\u754c\u7dda\u3001\u4f59\u767d\u306e\u8a2d\u5b9a\u306a\u3069\u3001\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306e\u6982\u5ff5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS \u30ec\u30a4\u30a2\u30a6\u30c8: \u30d5\u30ed\u30fc\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u3001\u30b0\u30ea\u30c3\u30c9\u306a\u3069\u306e\u3055\u307e\u3056\u307e\u306a\u30ec\u30a4\u30a2\u30a6\u30c8 \u30b9\u30bf\u30a4\u30eb\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u5207\u308a\u66ff\u3048: CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u5207\u308a\u66ff\u3048\u306e\u6982\u5ff5\u3068\u4f7f\u7528\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS \u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5: Sass \u3084 Less \u306a\u3069\u306e\u4e00\u822c\u7684\u306a CSS \u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3001\u304a\u3088\u3073\u305d\u308c\u3089\u306e\u9577\u6240\u3068\u77ed\u6240\u3001\u304a\u3088\u3073\u305d\u308c\u3089\u306e\u4f7f\u7528\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3: \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u6982\u5ff5\u3068\u539f\u5247\u3001\u304a\u3088\u3073CSS\u3092\u4f7f\u7528\u3057\u3066\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u4e92\u63db\u6027: \u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u4f7f\u7528\u3084\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u306a\u3069\u306e\u624b\u6cd5\u3092\u542b\u3081\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u9593\u306e\u4e92\u63db\u6027\u306e\u554f\u984c\u3092\u51e6\u7406\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS \u306e\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9: \u547d\u540d\u898f\u5247\u3084\u30b3\u30fc\u30c9\u7de8\u6210\u4ed5\u69d8\u306a\u3069\u3001CSS \u306e\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c8\u30d4\u30c3\u30af\u3067\u306f\u3001\u57fa\u672c\u7684\u306a\u69cb\u6587\u304b\u3089\u9ad8\u5ea6\u306a\u624b\u6cd5\u307e\u3067\u3001CSS \u306e\u4e3b\u306a\u5074\u9762\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u3001CSS \u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u5b8c\u5168\u306a\u6982\u8981\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u306f\u3001\u30ab\u30b9\u30b1\u30fc\u30c9\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u7565\u3067\u3001Web\u30da\u30fc\u30b8(\u307e\u305f\u306f\u305d\u306e\u4ed6\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30d9\u30fc\u30b9\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3)\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u8a00\u8a9e\u3067\u3059\u3002 CSS\u306f\u4e3b\u306bWeb\u30da\u30fc\u30b8\u306e\u5916\u89b3\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001HTML\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u3092\u901a\u3058\u3066\u3001Web\u30da\u30fc\u30b8\u306e\u5404\u8981\u7d20\u306e\u30d5\u30a9\u30f3\u30c8\u3001\u8272\u3001\u30b5\u30a4\u30ba\u3001\u9593\u9694\u3001\u5883\u754c\u7dda\u3001\u304a\u3088\u3073\u305d\u306e\u4ed6\u306e\u5c5e\u6027\u3092\u5909\u66f4\u3057\u3066\u3001Web\u30da\u30fc\u30b8\u306e\u7f8e\u5316\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS\u306e\u8a2d\u8a08\u54f2\u5b66\u306f\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u30b9\u30bf\u30a4\u30eb\u3001\u3064\u307e\u308aWeb\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30b9\u30bf\u30a4\u30eb\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u304b\u3089\u5206\u96e2\u3057\u3001\u4fdd\u5b88\u3068\u5909\u66f4\u3092\u5bb9\u6613\u306b\u3059\u308b\u3053\u3068\u3067\u3059\u3002 HTML\u3068\u306f\u7570\u306a\u308a\u3001CSS\u306fWeb\u30da\u30fc\u30b8\u306e\u7279\u5b9a\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u6c17\u306b\u305b\u305a\u3001\u305d\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u307f\u3092\u6c17\u306b\u3059\u308b\u305f\u3081\u3001HTML\u30d5\u30a1\u30a4\u30eb\u3092\u518d\u7de8\u96c6\u3059\u308b\u3053\u3068\u306a\u304f\u3001CSS\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u3067Web\u30da\u30fc\u30b8\u306e\u5916\u89b3\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u3059\u3070\u3084\u304f\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS\u306f\u3001\u3042\u3089\u3086\u308b\u7a2e\u985e\u306eWeb\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u8c4a\u5bcc\u306a\u30b9\u30bf\u30a4\u30eb\u30aa\u30d7\u30b7\u30e7\u30f3\u3068\u67d4\u8edf\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u63d0\u4f9b\u3059\u308b\u5f37\u529b\u306a\u8a00\u8a9e\u3067\u3059\u3002 \u540c\u6642\u306b\u3001CSS\u306f\u4fdd\u5b88\u6027\u3068\u518d\u5229\u7528\u6027\u306b\u512a\u308c\u3066\u3044\u308b\u305f\u3081\u3001Web\u958b\u767a\u306b\u3082\u6b20\u304b\u305b\u306a\u3044\u3082\u306e\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u69cb\u6587\u3068\u30eb\u30fc\u30eb\u306e\u6982\u8981\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>CSS \u69cb\u6587\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3001\u304a\u3088\u3073\u5024\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u308b HTML \u8981\u7d20\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>Style \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u8a2d\u5b9a\u3059\u308b\u30b9\u30bf\u30a4\u30eb \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>Value \u306f\u3001\u8a2d\u5b9a\u3059\u308b\u30b9\u30bf\u30a4\u30eb \u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u5c5e\u6027\u306f\u30b3\u30ed\u30f3 (:) \u3067\u533a\u5207\u3089\u308c\u3001\u5c5e\u6027\u3068\u5024\u306f\u30bb\u30df\u30b3\u30ed\u30f3 (; )\u5206\u96e2\u3002<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u30b9\u30bf\u30a4\u30eb\u306e\u9593\u306b\u4e2d\u304b\u3063\u3053 ({}) \u3067\u56f2\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS\u69cb\u6587\u3067\u306f\u5927\u6587\u5b57\u3068\u5c0f\u6587\u5b57\u306f\u533a\u5225\u3055\u308c\u307e\u305b\u3093\u304c\u3001\u8aad\u307f\u3084\u3059\u3055\u3068\u6b63\u898f\u5316\u306e\u305f\u3081\u306b\u3001\u5c0f\u6587\u5b57\u304c\u9078\u629e\u3055\u308c\u308b\u3053\u3068\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b3\u30e1\u30f3\u30c8\u306f \/* *\/ \u307e\u305f\u306f \/\/ \u3067\u8ffd\u52a0\u3067\u304d\u307e\u3059\u304c\u3001\u5f8c\u8005\u306f 1 \u884c\u306e\u30b3\u30e1\u30f3\u30c8\u306b\u306e\u307f\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u4e0a\u8a18\u306fCSS\u306e\u69cb\u6587\u3068\u30eb\u30fc\u30eb\u306e\u6982\u8981\u3067\u3059\u3002 \u5404\u9805\u76ee\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3059\u308bHTML\u8981\u7d20\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001CSS\u69cb\u6587\u306e\u91cd\u8981\u306a\u90e8\u5206\u3067\u3059\u3002 CSS \u3067\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30bb\u30ec\u30af\u30bf\u30fc\u306e\u7a2e\u985e\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u8981\u7d20\u30bb\u30ec\u30af\u30bf\u30fc: HTML \u8981\u7d20\u306e\u30bf\u30b0\u540d (p\u3001h1\u3001a \u306a\u3069) \u3067\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002 \u4f8b: p {\u8272: \u8d64; }<\/li>\n\n\n\n<li>\u30af\u30e9\u30b9\u30bb\u30ec\u30af\u30bf: &#8220;.&#8221; \u3067\u59cb\u307e\u308b\u30af\u30e9\u30b9\u540d\u3067\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002 \u8907\u6570\u306e\u8981\u7d20\u306b\u9069\u7528\u3067\u304d\u307e\u3059\u3002 \u4f8b: .text {\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba: 16px; }<\/li>\n\n\n\n<li>ID \u30bb\u30ec\u30af\u30bf\u30fc: ID \u5c5e\u6027\u3067\u8981\u7d20\u3092\u9078\u629e\u3057\u3001ID \u540d\u306f &#8220;#&#8221; \u3067\u59cb\u307e\u308a\u3001\u5404\u8981\u7d20\u306f 100 \u3064\u306e ID \u5c5e\u6027\u306e\u307f\u3092\u6301\u3064\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u4f8b: #logo {\u5e45: &lt;&gt;px; }<\/li>\n\n\n\n<li>\u30d7\u30ed\u30d1\u30c6\u30a3\u30bb\u30ec\u30af\u30bf\u30fc:\u5c5e\u6027\u5024\u3067\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u5c5e\u6027\u5024\u306e\u30bf\u30a4\u30d7\u3001\u30de\u30c3\u30c1\u30f3\u30b0\u65b9\u6cd5\u306a\u3069\u306b\u5fdc\u3058\u3066\u8981\u7d20\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002 \u4f8b: \u5165\u529b[\u30bf\u30a4\u30d7=&#8221;\u30c6\u30ad\u30b9\u30c8&#8221;] {\u5883\u754c\u7dda: 1px \u30bd\u30ea\u30c3\u30c9#ccc; }<\/li>\n\n\n\n<li>\u64ec\u4f3c\u30af\u30e9\u30b9\u30bb\u30ec\u30af\u30bf\u30fc: \u30de\u30a6\u30b9\u30db\u30d0\u30fc\u306e\u5834\u5408\u306f\u30db\u30d0\u30fc\u3001\u30af\u30ea\u30c3\u30af\u306e\u5834\u5408\u306f:active\u306a\u3069\u3001\u8981\u7d20\u306e\u7279\u5b9a\u306e\u72b6\u614b\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u4f8b:a:\u30db\u30d0\u30fc{\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe:\u4e0b\u7dda; }<\/li>\n\n\n\n<li>\u5b50\u5b6b\u30bb\u30ec\u30af\u30bf\u30fc: \u8981\u7d20\u306e\u5b50\u5b6b\u8981\u7d20\u3001\u3064\u307e\u308a\u8981\u7d20\u306e\u5b50\u5b6b\u8981\u7d20\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u4f8b: ul li {\u30ea\u30b9\u30c8\u30b9\u30bf\u30a4\u30eb: \u306a\u3057; }<\/li>\n\n\n\n<li>\u96a3\u63a5\u5144\u5f1f\u30bb\u30ec\u30af\u30bf\u30fc: \u5225\u306e\u8981\u7d20\u306e\u76f4\u5f8c\u306b\u8981\u7d20\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u4f8b: h1 + p {\u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055: \u592a\u5b57; }<\/li>\n\n\n\n<li>\u30e6\u30cb\u30d0\u30fc\u30b5\u30eb\u30bb\u30ec\u30af\u30bf\u30fc: \u3059\u3079\u3066\u306e\u8981\u7d20\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u4f8b: * {\u4f59\u767d: 0; \u30d1\u30c7\u30a3\u30f3\u30b0:0; }<\/li>\n<\/ol>\n\n\n\n<p>\u4e0a\u8a18\u306f\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308bCSS\u30bb\u30ec\u30af\u30bf\u30fc\u30bf\u30a4\u30d7\u3067\u3042\u308a\u3001\u958b\u767a\u8005\u306f\u5b9f\u969b\u306e\u72b6\u6cc1\u306b\u5fdc\u3058\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3059\u308b\u305f\u3081\u306b\u3055\u307e\u3056\u307e\u306a\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002 \u307e\u305f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306e\u7d44\u307f\u5408\u308f\u305b\u3092\u4f7f\u7528\u3057\u3066\u3001\u8907\u6570\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u30b0\u30eb\u30fc\u30d7\u5316\u3057\u3001\u540c\u3058\u8981\u7d20\u306b\u540c\u6642\u306b\u64cd\u4f5c\u3057\u3066\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u3088\u308a\u7d30\u304b\u304f\u5236\u5fa1\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 \u4f8b: h1, h2, h3 {\u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055: \u592a\u5b57; } \u306f\u3001h1\u3001h2\u3001\u304a\u3088\u3073 h3 \u8981\u7d20\u306e\u30d5\u30a9\u30f3\u30c8\u304c\u592a\u5b57\u3067\u3042\u308b\u3053\u3068\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u69cb\u6587\u3067\u306f\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5024\u3092\u4f7f\u7528\u3057\u3066\u3001\u8a2d\u5b9a\u3059\u308b\u30b9\u30bf\u30a4\u30eb \u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u305d\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002 \u3053\u308c\u3089 2 \u3064\u306e\u6982\u5ff5\u306b\u3064\u3044\u3066\u306f\u3001\u4ee5\u4e0b\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5c5e\u6027<\/li>\n<\/ol>\n\n\n\n<p>CSS \u5c5e\u6027\u306f\u3001HTML \u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u8a2d\u5b9a\u3067\u3042\u308a\u3001\u8981\u7d20\u306e\u8868\u793a\u65b9\u6cd5\u3092\u6c7a\u5b9a\u3057\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a CSS \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>color: \u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u8272: \u80cc\u666f\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba: \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea: \u30d5\u30a9\u30f3\u30c8\u30bf\u30a4\u30d7\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>margin: \u8981\u7d20\u306e\u4f59\u767d\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d1\u30c7\u30a3\u30f3\u30b0: \u8981\u7d20\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>border: \u8981\u7d20\u306e\u5883\u754c\u7dda\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4e0a\u8a18\u306e\u5171\u901a\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u52a0\u3048\u3066\u3001CSS\u306b\u306f\u4ed6\u306b\u3082\u591a\u304f\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3042\u308a\u3001\u958b\u767a\u8005\u306f\u5b9f\u969b\u306e\u72b6\u6cc1\u306b\u5fdc\u3058\u3066\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u9078\u629e\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u4fa1\u5024<\/li>\n<\/ol>\n\n\n\n<p>CSS \u5024\u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u7279\u5b9a\u306e\u5024\u3067\u3042\u308a\u3001\u8981\u7d20\u306e\u7279\u5b9a\u306e\u8868\u793a\u52b9\u679c\u3092\u6c7a\u5b9a\u3057\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a CSS \u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30e9\u30fc\u5024:\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3001\u80cc\u666f\u8272\u306a\u3069\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30ab\u30e9\u30fc\u5024\u306f16\u9032\u5024\u3001RGB\u5024\u3001\u8272\u540d\u306a\u3069\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u9577\u3055\u306e\u5024:\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3001\u4f59\u767d\u3001\u5185\u5074\u3068\u5916\u5074\u306e\u4f59\u767d\u306a\u3069\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u9577\u3055\u306e\u5024\u306f\u30d4\u30af\u30bb\u30eb(px)\u3001\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8(%)\u3001em\u306a\u3069\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u5024:\u30d5\u30a9\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d5\u30a9\u30f3\u30c8\u5024\u306f\u30bd\u30f3\u30b0\u3001Arial\u3001Verdana\u306a\u3069\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u5883\u754c\u7dda\u5024:\u8981\u7d20\u306e\u5883\u754c\u7dda\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u5883\u754c\u7dda\u306e\u5024\u306f\u5b9f\u7dda\u3001\u70b9\u7dda\u3001\u4e8c\u91cd\u7dda\u306a\u3069\u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4e0a\u8a18\u306e\u5171\u901a\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u306b\u52a0\u3048\u3066\u3001CSS\u306b\u306f\u4ed6\u306b\u3082\u591a\u304f\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u304c\u3042\u308a\u3001\u958b\u767a\u8005\u306f\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u3092\u9078\u629e\u3057\u3066\u3001\u5b9f\u969b\u306e\u72b6\u6cc1\u306b\u5fdc\u3058\u3066\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3064\u307e\u308a\u3001CSS\u69cb\u6587\u306e\u5c5e\u6027\u3068\u5024\u306fHTML\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u958b\u767a\u8005\u306f\u5c5e\u6027\u3068\u5024\u306e\u3055\u307e\u3056\u307e\u306a\u7d44\u307f\u5408\u308f\u305b\u3092\u901a\u3058\u3066\u30ab\u30e9\u30d5\u30eb\u306a\u30b9\u30bf\u30a4\u30eb\u52b9\u679c\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u306f\u3001HTML \u30bf\u30b0\u306e style \u5c5e\u6027\u306b\u30b9\u30bf\u30a4\u30eb\u5c5e\u6027\u3092\u76f4\u63a5\u66f8\u304d\u8fbc\u3080\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u65b9\u6cd5\u3067\u3059\u3002 \u305d\u306e\u69cb\u6587\u5f62\u5f0f\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopy code<code>&lt;tag style=\"property:value;\"&gt;\n<\/code><\/pre>\n\n\n\n<p>\u305d\u306e\u4e2d\u3067\u3001\u30bf\u30b0\u306fHTML\u30bf\u30b0\u540d\u3092\u8868\u3057\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u306fCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u3092\u8868\u3057\u3001value\u306fCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u3092\u8868\u3057\u307e\u3059\u3002 \u8907\u6570\u306e\u5c5e\u6027\u5024\u306f\u30bb\u30df\u30b3\u30ed\u30f3\u3067\u533a\u5207\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u306f\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u306e\u4f8b\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>&lt;p style=\"color: red; font-size: 16px;\"&gt;\u8fd9\u662f\u4e00\u6bb5\u7ea2\u8272\u5b57\u4f53\uff0c\u5b57\u53f7\u4e3a16px\u7684\u6587\u5b57\u3002&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001\u6bb5\u843d\u30bf\u30b0 p \u306e\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8d64\u306b\u8a2d\u5b9a\u3057\u3001\u30d5\u30a9\u30f3\u30c8 \u30b5\u30a4\u30ba\u3092 16 \u30d4\u30af\u30bb\u30eb\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u306b\u306f\u3001\u6b21\u306e\u7279\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b9\u30b3\u30fc\u30d7\u306f\u73fe\u5728\u306e\u30e9\u30d9\u30eb\u306b\u9650\u5b9a\u3055\u308c\u3001\u540c\u3058\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5185\u306e\u4ed6\u306e\u30bf\u30b0\u306e\u30b9\u30bf\u30a4\u30eb\u306b\u306f\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u306f\u3001\u57cb\u3081\u8fbc\u307f\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u3084\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306a\u3069\u306e\u4ed6\u306e\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u65b9\u6cd5\u3088\u308a\u3082\u512a\u5148\u3055\u308c\u307e\u3059\u3002 \u3064\u307e\u308a\u3001\u8981\u7d20\u306b\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u3068\u57cb\u3081\u8fbc\u307f\/\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8 \u30b9\u30bf\u30a4\u30eb\u306e\u4e21\u65b9\u304c\u3042\u308b\u5834\u5408\u3001\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u306f\u4ed6\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u306fHTML\u30bf\u30b0\u306b\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u304c\u8aad\u307f\u306b\u304f\u304f\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306f\u3001\u5404\u30bf\u30b0\u306estyle\u5c5e\u6027\u30921\u3064\u305a\u3064\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u624b\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u3064\u307e\u308a\u3001CSS\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u306f\u3001HTML\u30bf\u30b0\u306b\u30b9\u30bf\u30a4\u30eb\u5c5e\u6027\u3092\u76f4\u63a5\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u3067\u3042\u308a\u3001\u30ed\u30fc\u30ab\u30eb\u3067\u512a\u5148\u5ea6\u304c\u9ad8\u304f\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u3059\u3070\u3084\u304f\u8abf\u6574\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3068\u8aad\u307f\u3084\u3059\u3055\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306b\u3001\u901a\u5e38\u306f\u57cb\u3081\u8fbc\u307f\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u307e\u305f\u306f\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u7ba1\u7406\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306f\u3001\u30b9\u30bf\u30a4\u30eb \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5225\u306e CSS \u30d5\u30a1\u30a4\u30eb\u306b\u4e00\u5143\u5316\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u305d\u306e\u4e3b\u306a\u7279\u5fb4\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u306a\u5171\u6709\u3068\u7d71\u4e00\u7ba1\u7406\u3092\u5b9f\u73fe\u3067\u304d\u308b\u305f\u3081\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u4fdd\u5b88\u6027\u3068\u518d\u5229\u7528\u6027\u304c\u5411\u4e0a\u3059\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u4f7f\u7528\u3059\u308b\u624b\u9806\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30a4\u30eb.css\u306a\u3069\u306e CSS \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS\u30d5\u30a1\u30a4\u30eb\u306b\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>h1 {\n  color: red;\n  font-size: 24px;\n}\n\np {\n  color: blue;\n  font-size: 16px;\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>HTML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u30ea\u30f3\u30af\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u3066\u3001CSS \u30d5\u30a1\u30a4\u30eb\u3092\u53d6\u308a\u8fbc\u3080\u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">bashCopy code<code>&lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<p>\u3053\u3053\u3067\u306e link \u30bf\u30b0\u306f\u3001\u5c0e\u5165\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001rel \u5c5e\u6027\u306f\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306b\u8a2d\u5b9a\u3055\u308c\u3001href \u30d7\u30ed\u30d1\u30c6\u30a3\u306f CSS \u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30d1\u30b9\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30a4\u30eb\u306e\u9069\u7528\u304c\u5fc5\u8981\u306a HTML \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u30bf\u30b0\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>&lt;h1&gt;\u8fd9\u662f\u4e00\u4e2a\u6807\u9898&lt;\/h1&gt;\n&lt;p&gt;\u8fd9\u662f\u4e00\u6bb5\u6587\u5b57&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>\u3053\u3053\u3067\u3001h1\u30bf\u30b0\u3068p\u30bf\u30b0\u306f\u3001CSS\u30d5\u30a1\u30a4\u30eb\u3067\u5b9a\u7fa9\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u9069\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306b\u306f\u3001\u6b21\u306e\u7279\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b9\u30b3\u30fc\u30d7\u306f\u30b0\u30ed\u30fc\u30d0\u30eb\u3067\u3042\u308a\u3001\u540c\u3058\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5185\u3067\u8907\u6570\u56de\u53c2\u7167\u3067\u304d\u308b\u305f\u3081\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306f\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u3068\u57cb\u3081\u8fbc\u307f\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u9593\u3067\u512a\u5148\u3055\u308c\u307e\u3059\u3002 \u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u3068\u7af6\u5408\u3059\u308b\u5834\u5408\u3001\u5916\u90e8\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306f\u30a4\u30f3\u30e9\u30a4\u30f3 \u30b9\u30bf\u30a4\u30eb\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306f\u7c21\u5358\u306b\u5909\u66f4\u304a\u3088\u3073\u7ba1\u7406\u3067\u304d\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3068\u8aad\u307f\u3084\u3059\u3055\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u8981\u3059\u308b\u306b\u3001CSS\u306e\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5225\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u4e00\u5143\u5316\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u65b9\u6cd5\u3067\u3042\u308a\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u3067\u7ba1\u7406\u304c\u5bb9\u6613\u3067\u3042\u308a\u3001\u5927\u898f\u6a21\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3084\u30b9\u30bf\u30a4\u30eb\u3092\u518d\u5229\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u306e\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306f\u3001HTML\u8981\u7d20\u3092\u9577\u65b9\u5f62\u306e\u30dc\u30c3\u30af\u30b9\u3068\u3057\u3066\u53c2\u7167\u3057\u3001\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3001\u30d1\u30c7\u30a3\u30f3\u30b0\u3001\u5883\u754c\u7dda\u3001\u30de\u30fc\u30b8\u30f3\u3092\u542b\u307f\u3001\u8981\u7d20\u306e\u5168\u4f53\u7684\u306a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u69cb\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u5177\u4f53\u7684\u306b\u306f\u3001CSS\u306e\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306f\u6b21\u306e4\u3064\u306e\u90e8\u5206\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30c6\u30f3\u30c4\u9818\u57df: \u30c6\u30ad\u30b9\u30c8\u3001\u753b\u50cf\u3001\u30d3\u30c7\u30aa\u306a\u3069\u3001\u8981\u7d20\u306e\u5b9f\u969b\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206\u3002<\/li>\n\n\n\n<li>\u30d1\u30c7\u30a3\u30f3\u30b0\u9818\u57df: \u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5883\u754c\u7dda\u304b\u3089\u5206\u96e2\u3059\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u9818\u57df\u306e\u5468\u56f2\u306e\u7a7a\u767d\u3002 \u30d1\u30c7\u30a3\u30f3\u30b0\u306e\u30b5\u30a4\u30ba\u306f\u3001padding \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5883\u754c\u7dda\u9818\u57df: \u8981\u7d20\u3092\u5468\u56f2\u306e\u8981\u7d20\u304b\u3089\u5206\u96e2\u3059\u308b\u30d1\u30c7\u30a3\u30f3\u30b0\u9818\u57df\u306e\u5468\u56f2\u306e\u7dda\u3002 \u5883\u754c\u7dda\u306e\u30b5\u30a4\u30ba\u3001\u30b9\u30bf\u30a4\u30eb\u3001\u304a\u3088\u3073\u8272\u306f\u3001border \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4f59\u767d: \u8981\u7d20\u3068\u5468\u56f2\u306e\u8981\u7d20\u9593\u306e\u8ddd\u96e2\u3092\u8abf\u6574\u3059\u308b\u5883\u754c\u7dda\u9818\u57df\u306e\u5468\u56f2\u306e\u7a7a\u767d\u3002 \u4f59\u767d\u306e\u30b5\u30a4\u30ba\u306f\u3001margin \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>CSS \u306e\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306f\u3001\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3068\u4f4d\u7f6e\u3001\u304a\u3088\u3073\u8981\u7d20\u3068\u5468\u56f2\u306e\u8981\u7d20\u9593\u306e\u9593\u9694\u3068\u5206\u96e2\u3092\u6c7a\u5b9a\u3059\u308b\u305f\u3081\u3001\u30da\u30fc\u30b8 \u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u306b\u3068\u3063\u3066\u91cd\u8981\u3067\u3059\u3002 Web\u30da\u30fc\u30b8\u3068\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u8a08\u3059\u308b\u3068\u304d\u306f\u3001\u76ee\u7684\u306e\u52b9\u679c\u3092\u9054\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306b\u5fdc\u3058\u305f\u8981\u7d20\u306e\u69cb\u6210\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u8a2d\u5b9a\u3092\u7406\u89e3\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306b\u306f\u3001\u6a19\u6e96\u30e2\u30fc\u30c9\u3068\u5947\u5999\u306a\u30e2\u30fc\u30c9\u306e2\u3064\u306e\u30e2\u30fc\u30c9\u304c\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u6a19\u6e96\u30e2\u30fc\u30c9\u3067\u306f\u3001\u8981\u7d20\u306e\u5e45\u3068\u9ad8\u3055\u306b\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u9818\u57df\u3068\u30d1\u30c7\u30a3\u30f3\u30b0\u306e\u307f\u304c\u542b\u307e\u308c\u307e\u3059\u304c\u3001\u5947\u5999\u306a\u30e2\u30fc\u30c9\u3067\u306f\u3001\u8981\u7d20\u306e\u5e45\u3068\u9ad8\u3055\u306b\u3082\u5883\u754c\u7dda\u3068\u4f59\u767d\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u4e00\u8cab\u6027\u306e\u306a\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u52b9\u679c\u3092\u907f\u3051\u308b\u305f\u3081\u306b\u3001CSS\u3092\u66f8\u304f\u3068\u304d\u306b\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306e\u30e2\u30fc\u30c9\u3092\u660e\u793a\u7684\u306b\u6307\u5b9a\u3059\u308b\u3053\u3068\u3092\u63a8\u5968\u3057\u3001\u6a19\u6e96\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u306e\u304c\u3088\u308a\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u6d41\u4f53\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u753b\u9762\u306e\u5e45\u306b\u5fdc\u3058\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3059\u308b\u65b9\u6cd5\u3067\u3042\u308a\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30a4\u30b9\u3084\u753b\u9762\u3067Web\u30da\u30fc\u30b8\u306e\u898b\u6804\u3048\u3092\u826f\u304f\u3057\u3001\u3055\u307e\u3056\u307e\u306a\u89e3\u50cf\u5ea6\u3084\u753b\u9762\u30b5\u30a4\u30ba\u306b\u9069\u5fdc\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u6d41\u52d5\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u539f\u5247\u306f\u3001\u8981\u7d20\u306e\u5e45\u3068\u9ad8\u3055\u3092\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3067\u8a2d\u5b9a\u3057\u3001\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u306b\u5bfe\u3057\u3066\u9069\u5fdc\u7684\u306b\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u305f\u3068\u3048\u3070\u3001\u8981\u7d20\u306e\u5e45\u309250%\u306b\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u306b\u95a2\u4fc2\u306a\u304f\u3001\u8981\u7d20\u306e\u5e45\u306f\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u306b\u5bfe\u3057\u306650%\u4e00\u5b9a\u306e\u307e\u307e\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001Web\u30da\u30fc\u30b8\u8981\u7d20\u3092\u753b\u9762\u5e45\u306b\u5fdc\u7b54\u3055\u305b\u3001Web\u30da\u30fc\u30b8\u306e\u4e92\u63db\u6027\u3068\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u30d5\u30ed\u30fc\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u306f\u3001\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3068\u9593\u9694\u306e\u5236\u5fa1\u304c\u5bb9\u6613\u3067\u306f\u306a\u304f\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5236\u5fa1\u3092\u5931\u3044\u3084\u3059\u3044\u306a\u3069\u3001\u3044\u304f\u3064\u304b\u306e\u6b20\u70b9\u3082\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u306b\u306f\u3001CSS\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u3092\u4f7f\u7528\u3057\u3066\u753b\u9762\u30b5\u30a4\u30ba\u3054\u3068\u306b\u7570\u306a\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u304b\u3001\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u63a1\u7528\u3057\u3066\u3001\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u3068\u56fa\u5b9a\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5229\u70b9\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u3088\u308a\u826f\u3044\u7d50\u679c\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u7279\u5b9a\u306eWeb\u30c7\u30b6\u30a4\u30f3\u3068\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u306e\u30cb\u30fc\u30ba\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u7528 \u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u6b63\u78ba\u306a\u5236\u5fa1\u304c\u5fc5\u8981\u306a\u72b6\u6cc1\u3067\u306f\u3001\u56fa\u5b9a\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u65b9\u304c\u9069\u3057\u3066\u3044\u308b\u5834\u5408\u304c\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u7528\u306e\u67d4\u8edf\u306a\u30dc\u30c3\u30af\u30b9\u30ec\u30a4\u30a2\u30a6\u30c8(\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u3068\u3082\u547c\u3070\u308c\u307e\u3059)\u306f\u3001Web\u30da\u30fc\u30b8\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8a2d\u8a08\u3059\u308b\u305f\u3081\u306e\u65b0\u3057\u3044\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u3059\u3002 \u30da\u30fc\u30b8\u4e0a\u306e\u8981\u7d20\u304c\u4f7f\u7528\u53ef\u80fd\u306a\u30b9\u30da\u30fc\u30b9\u306b\u57fa\u3065\u3044\u3066\u4f4d\u7f6e\u3068\u30b5\u30a4\u30ba\u3092\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3057\u3001\u3055\u307e\u3056\u307e\u306a\u753b\u9762\u30b5\u30a4\u30ba\u3084\u30c7\u30d0\u30a4\u30b9\u306b\u9069\u5fdc\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3092\u53ef\u80fd\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Flexbox \u306e\u8a2d\u8a08\u7406\u5ff5\u306f\u3001\u30b3\u30f3\u30c6\u30ca\u3092 1 \u3064\u306e\u884c\u307e\u305f\u306f\u5217\u3067\u4f38\u7e2e\u6027\u306e\u3042\u308b\u30b5\u30d6\u30b3\u30f3\u30c6\u30ca\u306b\u5206\u5272\u3057\u3001\u30b5\u30d6\u30b3\u30f3\u30c6\u30ca\u306e\u30b5\u30a4\u30ba\u3068\u4f4d\u7f6e\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u3067\u67d4\u8edf\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u3067\u3059\u3002 Flexbox \u306e\u4e2d\u6838\u3068\u306a\u308b\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u3001Flex \u30b3\u30f3\u30c6\u30ca\u3068 Flex \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<p>Flex \u30b3\u30f3\u30c6\u30ca\u306f\u3001Flex \u30a2\u30fc\u30c6\u30a3\u30d5\u30a1\u30af\u30c8\u3092\u542b\u3080\u30b3\u30f3\u30c6\u30ca\u3067\u3042\u308a\u3001\u8868\u793a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092 flex \u307e\u305f\u306f\u30a4\u30f3\u30e9\u30a4\u30f3\u30d5\u30ec\u30c3\u30af\u30b9\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002 Flex \u30b3\u30f3\u30c6\u30ca\u306f\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u3067\u3042\u308a\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u65b9\u5411\u3001\u5185\u5bb9\u63c3\u3048\u3001\u9805\u76ee\u63c3\u3048\u3001\u5185\u5bb9\u63c3\u3048\u306a\u3069\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001Flex \u9805\u76ee\u306e\u914d\u7f6e\u3068\u6574\u5217\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Flex \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306f\u3001Flex \u30b3\u30f3\u30c6\u30ca\u5185\u306b\u914d\u7f6e\u3055\u308c\u3001\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a Flex \u30b3\u30f3\u30c6\u30ca\u5185\u306e\u5b50\u8981\u7d20\u3067\u3059\u3002 Flex \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30b5\u30a4\u30ba\u3068\u4f4d\u7f6e\u306f\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u6210\u9577\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u7e2e\u5c0f\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u30d9\u30fc\u30b9\u306a\u3069\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Flexbox\u306e\u5229\u70b9\u306f\u3001\u8907\u96d1\u306a\u30d5\u30ed\u30fc\u30c6\u30a3\u30f3\u30b0\u3001\u914d\u7f6e\u3001\u304a\u3088\u3073\u30af\u30ea\u30a2\u624b\u6cd5\u3092\u5fc5\u8981\u3068\u305b\u305a\u306b\u3001\u8907\u96d1\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u3059\u3070\u3084\u304f\u4f5c\u6210\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002 \u540c\u6642\u306b\u3001Flexbox\u306f\u591a\u6b21\u5143\u3067\u306e\u914d\u7f6e\u3068\u5206\u6563\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u5f93\u6765\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u306f\u89e3\u6c7a\u3067\u304d\u306a\u3044\u591a\u304f\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Flexbox\u306f\u3001\u73fe\u5728\u3059\u3079\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u308f\u3051\u3067\u306f\u306a\u3044\u65b0\u3057\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002 Flexbox\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u4e92\u63db\u6027\u3068\u5b89\u5b9a\u6027\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u5b9f\u969b\u306e\u9069\u7528\u524d\u306b\u9069\u5207\u306a\u30c6\u30b9\u30c8\u3092\u5b9f\u65bd\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001Web\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u65b0\u3057\u3044\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u3042\u308a\u3001Web\u30c7\u30b6\u30a4\u30ca\u30fc\u306fWeb\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3088\u308a\u3082\u67d4\u8edf\u6027\u304c\u3042\u308a\u307e\u3059\u3002 \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u30da\u30fc\u30b8\u3092\u30b0\u30ea\u30c3\u30c9\u306b\u5206\u5272\u3057\u3001\u30b0\u30ea\u30c3\u30c9\u306e\u884c\u3068\u5217\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u8981\u7d20\u306e\u4f4d\u7f6e\u3068\u30b5\u30a4\u30ba\u3092\u5236\u5fa1\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b0\u30ea\u30c3\u30c9 \u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u4e2d\u5fc3\u7684\u306a\u6982\u5ff5\u306f\u3001\u30b0\u30ea\u30c3\u30c9 \u30b3\u30f3\u30c6\u30ca\u30fc\u3001\u30b0\u30ea\u30c3\u30c9\u884c\u3001\u30b0\u30ea\u30c3\u30c9\u5217\u3001\u304a\u3088\u3073\u30b0\u30ea\u30c3\u30c9 \u30bb\u30eb\u3067\u3059\u3002 \u30b0\u30ea\u30c3\u30c9 \u30b3\u30f3\u30c6\u30ca\u30fc\u306f\u3001\u30b0\u30ea\u30c3\u30c9 \u30bb\u30eb\u3092\u542b\u3080\u30b3\u30f3\u30c6\u30ca\u30fc\u3067\u3042\u308a\u3001display \u30d7\u30ed\u30d1\u30c6\u30a3\u3092 grid \u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002 \u30b0\u30ea\u30c3\u30c9\u884c\u3068\u30b0\u30ea\u30c3\u30c9\u5217\u306f\u3001\u30b0\u30ea\u30c3\u30c9 \u30b3\u30f3\u30c6\u30ca\u30fc\u5185\u306e\u6c34\u5e73\u7dda\u3068\u5782\u76f4\u7dda\u3067\u3042\u308a\u3001\u30b0\u30ea\u30c3\u30c9 \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u884c\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30b0\u30ea\u30c3\u30c9 \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5217\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 \u30b0\u30ea\u30c3\u30c9 \u30bb\u30eb\u306f\u3001\u30b0\u30ea\u30c3\u30c9\u884c\u3068\u30b0\u30ea\u30c3\u30c9\u5217\u306e\u4ea4\u70b9\u3067\u3042\u308a\u3001\u30b0\u30ea\u30c3\u30c9\u884c\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30b0\u30ea\u30c3\u30c9\u5217\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u914d\u7f6e\u304a\u3088\u3073\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5229\u70b9\u306f\u3001\u8907\u96d1\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u3059\u3070\u3084\u304f\u4f5c\u6210\u3067\u304d\u3001\u975e\u5e38\u306b\u67d4\u8edf\u3067\u3042\u308b\u3053\u3068\u3067\u3059\u3002 \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u753b\u9762\u30b5\u30a4\u30ba\u3084\u30c7\u30d0\u30a4\u30b9\u306b\u5408\u308f\u305b\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u52d5\u7684\u306b\u8abf\u6574\u3059\u308b\u3001\u9069\u5fdc\u6027\u306e\u3042\u308b\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002 \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u3084\u5f93\u6765\u306e\u914d\u7f6e\u3084\u30d5\u30ed\u30fc\u30c6\u30a3\u30f3\u30b0\u306a\u3069\u306e\u4ed6\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u624b\u6cd5\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u3001\u3088\u308a\u67d4\u8edf\u3067\u8907\u96d1\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u52b9\u679c\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u73fe\u5728\u3059\u3079\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u308f\u3051\u3067\u306f\u306a\u3044\u65b0\u3057\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u30c6\u30af\u30ce\u30ed\u30b8\u3067\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002 \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u4e92\u63db\u6027\u3068\u5b89\u5b9a\u6027\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u5b9f\u7528\u5316\u524d\u306b\u5fb9\u5e95\u7684\u306b\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u30dc\u30c3\u30af\u30b9 \u30e2\u30c7\u30eb\u3092\u4f7f\u7528\u3057\u3066\u8981\u7d20\u306e\u5e45\u3001\u5883\u754c\u7dda\u3001\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3059\u7c21\u5358\u306a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"box\"&gt;Hello World&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.box {\n  width: 200px;\n  border: 1px solid black;\n  padding: 20px;\n}\n<\/code><\/pre>\n\n\n\n<p>\u89e3\u91c8\uff1a<\/p>\n\n\n\n<p>\u4e0a\u8a18\u306eCSS\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066HTML\u306e\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u5e45\u3092200px\u3001\u5883\u754c\u7dda\u304c1px\u306e\u9ed2\u4e00\u8272\u306e\u5883\u754c\u7dda\u3001\u304a\u3088\u307320px\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 \u305d\u3046\u3059\u308c\u3070\u3001\u30da\u30fc\u30b8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u308b\u3068\u3001\u8981\u7d20\u306e\u5b9f\u969b\u306e\u5e45\u306b\u306a\u308a\u30012px\u306f\u5883\u754c\u7dda\u306e\u5de6\u5074\u3068\u53f3\u5074\u306e\u5e45\u3067\u3059\u3002 \u3053\u306e\u8981\u7d20\u5185\u3067\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5de6\u5074\u3068\u53f3\u5074\u306b\u3001\u30d1\u30c7\u30a3\u30f3\u30b0\u3067\u5b9a\u7fa9\u3055\u308c\u308b\u5883\u754c\u7dda\u306e\u9593\u306b20px\u306e\u7a7a\u767d\u304c\u6b8b\u308a\u307e\u3059\u3002<code>.box<\/code><code>&lt;div&gt;<\/code><code>&lt;div&gt;<\/code><code>200px + 2px + 20px + 2px = 225px<\/code><code>&lt;div&gt;<\/code><\/p>\n\n\n\n<p>CSS\u306e\u30dc\u30c3\u30af\u30b9\u30e2\u30c7\u30eb\u306b\u306f\u3001\u6a19\u6e96\u30e2\u30fc\u30c9\u3068\u5947\u5999\u306a\u30e2\u30fc\u30c9\u306e2\u3064\u306e\u7570\u306a\u308b\u30e2\u30fc\u30c9\u304c\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u6a19\u6e96\u30e2\u30fc\u30c9\u3067\u306f\u3001\u8981\u7d20\u306e\u5b9f\u969b\u306e\u5e45\u3068\u9ad8\u3055\u306b\u306f\u5883\u754c\u7dda\u3068\u30d1\u30c7\u30a3\u30f3\u30b0\u306f\u542b\u307e\u308c\u307e\u305b\u3093\u304c\u3001\u5947\u5999\u306a\u30e2\u30fc\u30c9\u3067\u306f\u3001\u8981\u7d20\u306e\u5b9f\u969b\u306e\u5e45\u3068\u9ad8\u3055\u306b\u306f\u5883\u754c\u7dda\u3068\u30d1\u30c7\u30a3\u30f3\u30b0\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u5b9f\u969b\u306b\u306f\u3001\u30da\u30fc\u30b8\u306e\u5b9f\u969b\u306e\u30cb\u30fc\u30ba\u3068\u30d6\u30e9\u30a6\u30b6\u306e\u4e92\u63db\u6027\u306b\u57fa\u3065\u3044\u3066\u3001\u4f7f\u7528\u3059\u308b\u30e2\u30fc\u30c9\u3092\u9078\u629e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0 \u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3057\u3066\u8981\u7d20\u306e\u5e45\u3092\u8a2d\u5b9a\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u30a6\u30a3\u30f3\u30c9\u30a6 \u30b5\u30a4\u30ba\u306e\u5909\u5316\u306b\u9069\u5fdc\u3055\u305b\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"box\"&gt;Box 1&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 2&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.container {\n  width: 100%;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.box {\n  width: 30%;\n  margin: 0 1.66%;\n  float: left;\n}\n<\/code><\/pre>\n\n\n\n<p>\u89e3\u91c8\uff1a<\/p>\n\n\n\n<p>\u4e0a\u8a18\u306eCSS\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066HTML\u306b\u542b\u307e\u308c\u308b\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u305d\u308c\u3089\u306e\u5e45\u3092100%\u3001\u6700\u5927\u5e45\u3092800px\u3001\u6c34\u5e73\u65b9\u5411\u306e\u4e2d\u592e\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002 \u3053\u306e\u3088\u3046\u306b\u3001\u30d6\u30e9\u30a6\u30b6\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u5e45\u304c800px\u672a\u6e80\u306e\u5834\u5408\u3001\u8981\u7d20\u306e\u5e45\u306f\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u81ea\u52d5\u7684\u306b\u7e2e\u5c0f\u3055\u308c\u307e\u3059\u3002<code>.container<\/code><code>.container<\/code><\/p>\n\n\n\n<p>\u8981\u7d20\u5185\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066 30 \u3064\u306e\u5b50\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u5e45\u3092 1%\u3001\u5de6\u53f3\u306e\u4f59\u767d\u3092 66.30% \u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 30 \u3064\u306e\u5b50\u8981\u7d20\u306e\u5408\u8a08\u5e45\u306f 30% + 3% + 1% + 66 * 100.&lt;&gt;% = &lt;&gt;% \u3067\u3042\u308b\u305f\u3081\u3001\u8981\u7d20\u306e\u5e45\u5185\u306b\u5747\u7b49\u306b\u5206\u6563\u3055\u308c\u307e\u3059\u3002<code>.container<\/code><code>.box<\/code><code>.container<\/code><\/p>\n\n\n\n<p>\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30da\u30fc\u30b8\u5185\u306e\u8981\u7d20\u3092\u3088\u308a\u9069\u5fdc\u6027\u3092\u9ad8\u3081\u3001\u3055\u307e\u3056\u307e\u306a\u30b5\u30a4\u30ba\u3068\u89e3\u50cf\u5ea6\u306e\u30c7\u30d0\u30a4\u30b9\u306b\u9069\u5fdc\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u30a8\u30e9\u30b9\u30c6\u30a3\u30c3\u30af \u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3057\u3066\u8981\u7d20\u306e\u914d\u7f6e\u3092\u8a2d\u5b9a\u3057\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30a4\u30b9\u306b\u3088\u308a\u9069\u5207\u306b\u9069\u5408\u3055\u305b\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"box\"&gt;Box 1&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 2&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.container {\n  display: flex;\n  justify-content: space-between;\n}\n\n.box {\n  flex: 1;\n  margin: 0 10px;\n}\n<\/code><\/pre>\n\n\n\n<p>\u89e3\u91c8\uff1a<\/p>\n\n\n\n<p>\u4e0a\u8a18\u306e CSS \u30b3\u30fc\u30c9\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066 HTML \u306b\u542b\u307e\u308c\u308b\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u305d\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u67d4\u8edf\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002 \u3055\u3089\u306b\u3001\u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u3001\u5b50\u8981\u7d20\u306e\u6c34\u5e73\u914d\u7f6e\u3092\u300c\u89aa\u8981\u7d20\u5185\u306b\u5747\u7b49\u306b\u5206\u5e03\u3059\u308b\u300d\u3001\u3064\u307e\u308a\u5b50\u304c\u4e92\u3044\u306b\u7b49\u3057\u3044\u8ddd\u96e2\u306b\u3042\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002<code>.container<\/code><code>display<\/code><code>flex<\/code><code>justify-content<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u8981\u7d20\u5185\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066 1 \u3064\u306e\u5b50\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u305d\u308c\u3089\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092 10 \u306b\u8a2d\u5b9a\u3057\u3066\u3001\u8981\u7d20\u306e\u5e45\u3092\u5747\u7b49\u306b\u5206\u5272\u3057\u307e\u3059\u3002 \u540c\u6642\u306b\u3001\u5b50\u8981\u7d20\u306e\u5de6\u53f3\u306e\u4f59\u767d\u3092&lt;&gt;px\u306b\u8a2d\u5b9a\u3057\u3066\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30a4\u30b9\u3067\u306e\u914d\u7f6e\u3092\u6539\u5584\u3057\u307e\u3057\u305f\u3002<code>.container<\/code><code>.box<\/code><code>flex<\/code><code>.container<\/code><\/p>\n\n\n\n<p>\u30a8\u30e9\u30b9\u30c6\u30a3\u30c3\u30af\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u8981\u7d20\u306e\u4f4d\u7f6e\u3068\u30b5\u30a4\u30ba\u3092\u624b\u52d5\u3067\u8abf\u6574\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u8907\u96d1\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u3092\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u305f\u3081\u3001\u30da\u30fc\u30b8\u306e\u9069\u5fdc\u6027\u3068\u4fdd\u5b88\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u30b0\u30ea\u30c3\u30c9 \u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3057\u3066\u8981\u7d20\u306e\u914d\u7f6e\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"box\"&gt;Box 1&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 2&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 3&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 4&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 5&lt;\/div&gt;\n  &lt;div class=\"box\"&gt;Box 6&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(2, 1fr);\n  grid-gap: 10px;\n}\n\n.box {\n  background-color: #eee;\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<p>\u89e3\u91c8\uff1a<\/p>\n\n\n\n<p>\u4e0a\u8a18\u306e CSS \u30b3\u30fc\u30c9\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066 HTML \u306b\u542b\u307e\u308c\u308b\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u305d\u308c\u3089\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002 \u3055\u3089\u306b\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b0\u30ea\u30c3\u30c9\u306e\u5217\u3068\u884c\u306e\u6570\u3001\u304a\u3088\u3073\u5404\u5217\u3068\u884c\u306e\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 \u3053\u306e\u4f8b\u3067\u306f\u30013\u5217\u30682\u884c\u3092\u8a2d\u5b9a\u3057\u3001\u5404\u5217\u3068\u884c\u306e\u30b5\u30a4\u30ba\u306f1fr\u3001\u3064\u307e\u308a\u3001\u5404\u5217\u3068\u884c\u306e\u5e45\u3068\u9ad8\u3055\u306f\u30b3\u30f3\u30c6\u30ca\u306e\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u3066\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3055\u308c\u307e\u3059\u3002 \u307e\u305f\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b0\u30ea\u30c3\u30c9\u9593\u306e\u9593\u9694\u3092 10px \u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002<code>.container<\/code><code>display<\/code><code>grid<\/code><code>grid-template-columns<\/code><code>grid-template-rows<\/code><code>grid-gap<\/code><\/p>\n\n\n\n<p>\u8981\u7d20\u5185\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066 6 \u3064\u306e\u5b50\u8981\u7d20\u3092\u9078\u629e\u3057\u3001\u30b0\u30ea\u30c3\u30c9\u3092\u3088\u308a\u9069\u5207\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u80cc\u666f\u8272\u3092 #eee \u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 \u540c\u6642\u306b\u3001\u5b50\u8981\u7d20\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u309210px\u306b\u8a2d\u5b9a\u3057\u3066\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30a4\u30b9\u3067\u306e\u914d\u7f6e\u3092\u6539\u5584\u3057\u307e\u3057\u305f\u3002<code>.container<\/code><code>.box<\/code><\/p>\n\n\n\n<p>\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u3055\u307e\u3056\u307e\u306a\u30b5\u30a4\u30ba\u306e\u30b0\u30ea\u30c3\u30c9\u3001\u884c\u3068\u5217\u306b\u307e\u305f\u304c\u308b\u8981\u7d20\u306a\u3069\u3001\u8907\u96d1\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u3092\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u306f\u3001Web\u958b\u767a\u3067\u52d5\u7684\u306a\u52b9\u679c\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002 Web\u30da\u30fc\u30b8\u306e\u8981\u7d20\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u79fb\u884c\u3057\u305f\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\u306b\u5fdc\u3058\u3066\u52d5\u7684\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS \u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3<\/h2>\n\n\n\n<p>CSS \u9077\u79fb\u306f\u3001\u3042\u308b CSS \u72b6\u614b\u304b\u3089\u5225\u306e CSS \u72b6\u614b\u3078\u306e\u30b9\u30e0\u30fc\u30ba\u306a\u9077\u79fb\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001JavaScript\u3092\u4f7f\u7528\u305b\u305a\u306b\u3044\u304f\u3064\u304b\u306e\u7c21\u5358\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52b9\u679c\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002 CSS\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3044\u304f\u3064\u304b\u306eCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3001\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u306e\u6642\u9593\u3001\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u306e\u95a2\u6570\u30bf\u30a4\u30d7(\u7dda\u5f62\u3001\u30a4\u30fc\u30ba\u30a4\u30f3\u3001\u30a4\u30fc\u30ba\u30a2\u30a6\u30c8\u306a\u3069)\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u52b9\u679c\u3092\u5b9f\u88c5\u3059\u308b\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"box\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.box {\n  width: 100px;\n  height: 100px;\n  background-color: blue;\n  transition: background-color 0.5s ease-in-out;\n}\n\n.box:hover {\n  background-color: red;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u3001\u8981\u7d20\u3092\u5b9a\u7fa9\u3057\u3001\u305d\u306e\u80cc\u666f\u8272\u3092\u9752\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 \u307e\u305f\u3001\u8981\u7d20\u306b\u9077\u79fb\u52b9\u679c\u3092\u5b9a\u7fa9\u3057\u307e\u3057\u305f\u3001\u3059\u306a\u308f\u3061\u3001\u30de\u30a6\u30b9\u3092\u8981\u7d20\u306e\u4e0a\u306b\u7f6e\u304f\u3068\u3001\u80cc\u666f\u8272\u306f0.5\u79d2\u4ee5\u5185\u306b\u6ed1\u3089\u304b\u306b\u8d64\u306b\u9077\u79fb\u3057\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u5b9f\u73fe\u3055\u308c\u307e\u3059\u3002 \u8981\u7d20\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u3068\u3001\u305d\u306e\u8981\u7d20\u306e\u80cc\u666f\u8272\u3092\u8d64\u306b\u5909\u66f4\u3057\u307e\u3059\u304c\u3001\u3053\u308c\u306f\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u5b9f\u73fe\u3055\u308c\u307e\u3059\u3002<code>.box<\/code><code>.box<\/code><code>transition<\/code><code>.box<\/code><code>.box:hover<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h2>\n\n\n\n<p>CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u7570\u306a\u308b CSS \u72b6\u614b\u9593\u3067\u8981\u7d20\u3092\u30eb\u30fc\u30d7\u3059\u308b\u52b9\u679c\u3067\u3059\u3002 CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u4e00\u9023\u306e\u30ad\u30fc\u30d5\u30ec\u30fc\u30e0\u3092\u5b9a\u7fa9\u3057\u3001\u3053\u308c\u3089\u306e\u30ad\u30fc\u30d5\u30ec\u30fc\u30e0\u306e\u3055\u307e\u3056\u307e\u306a\u6642\u70b9\u3067\u306e\u8981\u7d20\u306e\u3055\u307e\u3056\u307e\u306a\u72b6\u614b\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002 \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7d99\u7d9a\u6642\u9593\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u901f\u5ea6\u66f2\u7dda\u306a\u3069\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u56de\u8ee2\u52b9\u679c\u3092\u5b9f\u73fe\u3059\u308b\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"box\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.box {\n  width: 100px;\n  height: 100px;\n  background-color: blue;\n  animation: rotate 2s linear infinite;\n}\n\n@keyframes rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u3001\u8981\u7d20\u3092\u5b9a\u7fa9\u3057\u3001\u305d\u306e\u80cc\u666f\u8272\u3092\u9752\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 \u307e\u305f\u3001\u8981\u7d20\u304c 2 \u79d2\u3067 Y \u8ef8\u306b\u6cbf\u3063\u3066 360 \u5ea6\u56de\u8ee2\u3057\u305f\u5834\u5408\u3067\u3082\u3001\u8981\u7d20\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52b9\u679c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u5b9f\u73fe\u3055\u308c\u307e\u3059\u3002 \u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u307e\u3059<code>.box<\/code><code>.box<\/code><code>animation<\/code><code>animation<\/code><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>SCSS (Sassy CSS) \u306f CSS \u306e\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3001Sass(Syntactically Awesome Style Sheets) \u306e\u69cb\u6587\u62e1\u5f35\u3067\u3059\u3002<\/p>\n\n\n\n<p>SCSS \u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u5229\u70b9\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u7c21\u6f54: SCSS \u69cb\u6587\u306f CSS \u3088\u308a\u3082\u7c21\u6f54\u3067\u8aad\u307f\u3084\u3059\u304f\u3001\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u3092\u3088\u308a\u901f\u304f\u7c21\u5358\u306b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u518d\u5229\u7528\u6027: SCSS \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u8907\u6570\u306e\u30b9\u30bf\u30a4\u30eb \u30eb\u30fc\u30eb\u9593\u3067\u5909\u6570\u3068\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u3092\u5171\u6709\u3067\u304d\u308b\u305f\u3081\u3001\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306e\u30b3\u30fc\u30c9\u91cf\u304c\u524a\u6e1b\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u7d99\u627f: SCSS \u306f\u30b9\u30bf\u30a4\u30eb\u306e\u7d99\u627f\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u6574\u7406\u3068\u7ba1\u7406\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u7ba1\u7406: SCSS \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b9\u30bf\u30a4\u30eb \u30eb\u30fc\u30eb\u3092\u8907\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u5206\u5272\u3067\u304d\u308b\u305f\u3081\u3001\u4fdd\u5b88\u3068\u7ba1\u7406\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>SCSS \u306e\u4e3b\u306a\u6a5f\u80fd\u306e\u4e00\u90e8\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5909\u6570: SCSS \u3067\u306f\u3001$ \u8a18\u53f7\u3092\u4f7f\u7528\u3057\u3066\u5909\u6570\u3092\u5ba3\u8a00\u3067\u304d\u308b\u305f\u3081\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3067\u5024\u3092\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>$primary-color: #007bff;\n$secondary-color: #6c757d;\n\n.btn-primary {\n  background-color: $primary-color;\n  color: #fff;\n}\n\n.btn-secondary {\n  background-color: $secondary-color;\n  color: #fff;\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30eb\u30fc\u30eb: SCSS\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b9\u30bf\u30a4\u30eb\u30eb\u30fc\u30eb\u3092\u30cd\u30b9\u30c8\u3057\u3066\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u8aad\u307f\u3084\u3059\u304f\u7ba1\u7406\u3057\u3084\u3059\u304f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.container {\n  padding: 10px;\n\n  .row {\n    margin: 0;\n    display: flex;\n\n    .col {\n      flex: 1;\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30df\u30c3\u30af\u30b9\u30a4\u30f3: SCSS \u3067\u306f\u3001\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u3092\u5b9a\u7fa9\u3057\u3001\u8907\u6570\u306e\u30b9\u30bf\u30a4\u30eb \u30eb\u30fc\u30eb\u306b\u9069\u7528\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u3067\u4e00\u9023\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">perlCopy code<code>@mixin box-shadow($x, $y, $blur, $color) {\n  box-shadow: $x $y $blur $color;\n}\n\n.card {\n  @include box-shadow(0 0 10px #000);\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u7d99\u627f: SCSS \u306f\u30b9\u30bf\u30a4\u30eb\u306e\u7d99\u627f\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u305f\u3081\u3001@extend \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4f7f\u7528\u3057\u3066\u4ed6\u306e\u30b9\u30bf\u30a4\u30eb \u30eb\u30fc\u30eb\u304b\u3089\u30b9\u30bf\u30a4\u30eb\u3092\u7d99\u627f\u3067\u304d\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.panel {\n  border: 1px solid #ccc;\n  padding: 10px;\n}\n\n.panel-header {\n  font-weight: bold;\n}\n\n.panel-body {\n  font-size: 14px;\n}\n\n.panel-footer {\n  text-align: right;\n}\n\n.btn-panel {\n  @extend .panel;\n  @extend .panel-footer;\n  padding: 5px;\n\n  a {\n    display: inline-block;\n    padding: 5px;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>SCSS\u306f\u6a5f\u80fd\u304c\u8c4a\u5bcc\u3067\u3001\u3053\u308c\u3089\u306f\u91cd\u8981\u306a\u6a5f\u80fd\u306e\u307b\u3093\u306e\u4e00\u90e8\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u4f5c\u6210\u3068\u7ba1\u7406\u306e\u52b9\u7387\u304c\u5927\u5e45\u306b\u5411\u4e0a\u3057\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u4fdd\u5b88\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>less \u306f\u3001CSS \u8a00\u8a9e\u3092\u62e1\u5f35\u3057\u3066\u3088\u308a\u5f37\u529b\u3067\u67d4\u8edf\u306a CSS \u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3059\u3002 less \u306f CSS \u306b\u4f3c\u305f\u69cb\u6587\u3092\u4f7f\u7528\u3057\u307e\u3059\u304c\u3001\u5909\u6570\u3001\u95a2\u6570\u3001\u6f14\u7b97\u5b50\u3001\u30df\u30ad\u30b5\u30fc\u306a\u3069\u306e\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Less\u306e\u4e3b\u306a\u6a5f\u80fd\u306e\u3044\u304f\u3064\u304b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5909\u6570: less \u3067\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5168\u4f53\u3067\u8907\u6570\u56de\u4f7f\u7528\u3067\u304d\u308b\u8272\u3001\u30d5\u30a9\u30f3\u30c8\u3001\u30b5\u30a4\u30ba\u306a\u3069\u306e\u5024\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306b\u5909\u6570\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 \u5909\u6570\u306f\u3001@ \u8a18\u53f7\u3067\u59cb\u307e\u308b\u3088\u3046\u306b\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002<code>@primary-color: #007bff;<\/code><\/li>\n\n\n\n<li>\u5165\u308c\u5b50: Less: Less\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b9\u30bf\u30a4\u30eb \u30eb\u30fc\u30eb\u3092\u5225\u306e\u30eb\u30fc\u30eb\u5185\u306b\u5165\u308c\u5b50\u306b\u3067\u304d\u308b\u305f\u3081\u3001\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306e\u8aad\u307f\u53d6\u308a\u3068\u4fdd\u5b88\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002 \u4f8b:less\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>.navbar { background-color: @primary-color; ul { list-style: none; li { display: inline-block; } } }<\/code><\/li>\n\n\n\n<li>\u30df\u30ad\u30b5\u30fc: Less\u306f\u3001\u30df\u30ad\u30b5\u30fc\u3068\u547c\u3070\u308c\u308b\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30bf\u30a4\u30eb\u30d6\u30ed\u30c3\u30af\u306e\u5b9a\u7fa9\u3092\u8a31\u53ef\u3057\u307e\u3059\u3002 \u30df\u30ad\u30b5\u30fc\u306f CSS \u306e\u30af\u30e9\u30b9\u306b\u4f3c\u3066\u3044\u307e\u3059\u304c\u3001CSS \u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5024\u3092\u542b\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u4f8b: less\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3059\u308b \u3053\u306e\u4f8b\u3067\u306f\u3001.call-to-action \u30af\u30e9\u30b9\u306f .button \u30af\u30e9\u30b9\u306e\u3059\u3079\u3066\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u7d99\u627f\u3057\u307e\u3059\u3002<code>.button { color: #fff; background-color: @primary-color; padding: 10px 20px; border-radius: 4px; } .call-to-action { .button; font-weight: bold; }<\/code><\/li>\n\n\n\n<li>\u95a2\u6570\u3068\u6f14\u7b97\u5b50: Less\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u95a2\u6570\u3068\u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3057\u3066\u3001\u6570\u5b66\u3001\u6587\u5b57\u5217\u3001\u8272\u306a\u3069\u306e\u5024\u3092\u64cd\u4f5c\u3067\u304d\u307e\u3059\u3002 \u4f8b:less\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>@border-width: 1px; border: @border-width * 2 solid black;<\/code><\/li>\n\n\n\n<li>\u30a4\u30f3\u30dd\u30fc\u30c8: Less\u3067\u306f\u3001\u8907\u6570\u306e\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u30921\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306e\u6574\u7406\u3068\u7ba1\u7406\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001scssCopy \u30b3\u30fc\u30c9<code>@import \"variables.less\"; @import \"mixins.less\"; @import \"reset.less\"; @import \"layout.less\";<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u7d50\u8ad6\u3068\u3057\u3066\u3001Less\u306f\u3001\u958b\u767a\u8005\u304c\u5927\u304d\u306a\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u3088\u308a\u7c21\u5358\u306b\u7ba1\u7406\u304a\u3088\u3073\u4fdd\u5b88\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u5f37\u529b\u306aCSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>SCSS \u306f\u3001\u958b\u767a\u8005\u304c\u5909\u6570\u3001\u30cd\u30b9\u30c6\u30a3\u30f3\u30b0\u3001\u30df\u30ad\u30b5\u30fc\u3001\u95a2\u6570\u306a\u3069\u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066\u3001CSS \u30b3\u30fc\u30c9\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u8a18\u8ff0\u304a\u3088\u3073\u4fdd\u5b88\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b CSS \u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3059\u3002<\/p>\n\n\n\n<p>SCSS \u3092\u4f7f\u7528\u3059\u308b\u624b\u9806\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>SCSS \u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b: \u6700\u521d\u306b SCSS \u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u6700\u3082\u4e00\u822c\u7684\u306a\u306e\u306f Node.js \u306e sass \u307e\u305f\u306f gulp-sass \u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u3059\u3002 \u3053\u308c\u3089\u306f\u3001npm(\u30ce\u30fc\u30c9.js\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3092\u4ecb\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002 \u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>npm install -g sass<\/code><\/li>\n\n\n\n<li>SCSS \u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210: style.scss \u306a\u3069\u306e\u65b0\u3057\u3044 SCSS \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001SCSS \u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066 CSS \u30b3\u30fc\u30c9\u3092\u66f8\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>SCSS \u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b: \u5909\u6570\u3001\u30cd\u30b9\u30c6\u30a3\u30f3\u30b0\u3001\u30df\u30ad\u30b5\u30fc\u3001\u95a2\u6570\u306a\u3069\u306e SCSS \u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066 CSS \u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002 \u4f8b: cssCopy \u30b3\u30fc\u30c9<code>$primary-color: #007bff; .navbar { background-color: $primary-color; ul { list-style: none; li { display: inline-block; } } }<\/code><\/li>\n\n\n\n<li>SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b: SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u901a\u5e38\u306eCSS\u30d5\u30a1\u30a4\u30eb\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u307e\u3059\u3002 \u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002 \u6700\u3082\u7c21\u5358\u306a\u65b9\u6cd5\u306f\u3001style.scss \u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3001\u7d50\u679c\u3092 style.css \u30d5\u30a1\u30a4\u30eb\u306b\u4fdd\u5b58\u3059\u308b Copy code \u306a\u3069\u306e\u30b3\u30de\u30f3\u30c9 \u30e9\u30a4\u30f3 \u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3059\u3002<code>sass style.scss style.css<\/code><\/li>\n\n\n\n<li>CSS \u30d5\u30a1\u30a4\u30eb\u3092\u30ea\u30f3\u30af: \u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u305f CSS \u30d5\u30a1\u30a4\u30eb\u3092 HTML \u30d5\u30a1\u30a4\u30eb\u306b\u30ea\u30f3\u30af\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u7d50\u8ad6\u3068\u3057\u3066\u3001SCSS\u306f\u3001\u958b\u767a\u8005\u304cCSS\u30b3\u30fc\u30c9\u3092\u3088\u308a\u7c21\u5358\u306b\u8a18\u8ff0\u304a\u3088\u3073\u4fdd\u5b88\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u5f37\u529b\u306aCSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3059\u3002 \u3053\u308c\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001SCSS\u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001SCSS\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3066HTML\u30d5\u30a1\u30a4\u30eb\u306b\u30ea\u30f3\u30af\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Less\u306f\u3001\u958b\u767a\u8005\u304c\u5909\u6570\u3001\u30cd\u30b9\u30c8\u3001\u30df\u30ad\u30b5\u30fc\u3001\u95a2\u6570\u306a\u3069\u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066CSS\u30b3\u30fc\u30c9\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u8a18\u8ff0\u304a\u3088\u3073\u4fdd\u5b88\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308bCSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3059\u3002<\/p>\n\n\n\n<p>Less\u3092\u4f7f\u7528\u3059\u308b\u624b\u9806\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>less\u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b:\u6700\u521d\u306b\u3001npm(\u30ce\u30fc\u30c9.js\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3092\u4ecb\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u308bless\u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3059\u308b<code>npm install -g less<\/code><\/li>\n\n\n\n<li>Less \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210: style.less \u306a\u3069\u306e\u65b0\u3057\u3044 Less \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001CSS \u30b3\u30fc\u30c9\u306f Less \u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066\u8a18\u8ff0\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>Less\u30b3\u30fc\u30c9\u3092\u66f8\u304f:\u5909\u6570\u3001\u30cd\u30b9\u30c8\u3001\u30df\u30ad\u30b5\u30fc\u3001\u95a2\u6570\u306a\u3069\u306eLess\u306e\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066CSS\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002 \u4f8b:less\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>@primary-color: #007bff; .navbar { background-color: @primary-color; ul { list-style: none; li { display: inline-block; } } }<\/code><\/li>\n\n\n\n<li>\u3088\u308a\u5c11\u306a\u3044\u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b: \u3088\u308a\u5c11\u306a\u3044\u30d5\u30a1\u30a4\u30eb\u3092\u901a\u5e38\u306eCSS\u30d5\u30a1\u30a4\u30eb\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u307e\u3059\u3002 \u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002 \u6700\u3082\u7c21\u5358\u306a\u65b9\u6cd5\u306f\u3001style.less \u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3001\u7d50\u679c\u3092 style.css \u30d5\u30a1\u30a4\u30eb\u306b\u4fdd\u5b58\u3059\u308b Copy code \u306a\u3069\u306e\u30b3\u30de\u30f3\u30c9 \u30e9\u30a4\u30f3 \u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3059\u3002<code>lessc style.less style.css<\/code><\/li>\n\n\n\n<li>CSS \u30d5\u30a1\u30a4\u30eb\u3092\u30ea\u30f3\u30af: \u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u305f CSS \u30d5\u30a1\u30a4\u30eb\u3092 HTML \u30d5\u30a1\u30a4\u30eb\u306b\u30ea\u30f3\u30af\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u7d50\u8ad6\u3068\u3057\u3066\u3001Less\u306f\u3001\u958b\u767a\u8005\u304cCSS\u30b3\u30fc\u30c9\u3092\u3088\u308a\u7c21\u5358\u306b\u8a18\u8ff0\u304a\u3088\u3073\u4fdd\u5b88\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u5f37\u529b\u306aCSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3067\u3059\u3002 \u3053\u308c\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001less\u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001less\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001less\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3066HTML\u30d5\u30a1\u30a4\u30eb\u306b\u30ea\u30f3\u30af\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u4e92\u63db\u6027\u3092\u8a73\u3057\u304f\u8aac\u660e\u3059\u308b: \u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u4f7f\u7528\u3084\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u306a\u3069\u306e\u624b\u6cd5\u3092\u542b\u3081\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u9593\u306e\u4e92\u63db\u6027\u306e\u554f\u984c\u3092\u51e6\u7406\u3059\u308b\u65b9\u6cd5\u3092\u8aac\u660e\u3059\u308b\u3002<\/p>\n\n\n\n<p>\u30d6\u30e9\u30a6\u30b6\u306e\u4e92\u63db\u6027\u3068\u306f\u3001Web\u30b5\u30a4\u30c8\u307e\u305f\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u3084\u30c7\u30d0\u30a4\u30b9\u9593\u3067\u4e00\u8cab\u3057\u305f\u65b9\u6cd5\u3067\u8868\u793a\u304a\u3088\u3073\u6a5f\u80fd\u3059\u308b\u80fd\u529b\u3092\u6307\u3057\u307e\u3059\u3002 \u30d6\u30e9\u30a6\u30b6\u306e\u4e92\u63db\u6027\u306e\u554f\u984c\u306f\u3001\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30a8\u30f3\u30b8\u30f3\u3001JavaScript\u30a4\u30f3\u30bf\u30d7\u30ea\u30bf\u3001CSS\u30d1\u30fc\u30b5\u30fc\u306a\u3069\u306e\u9055\u3044\u304c\u539f\u56e0\u3067\u767a\u751f\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u554f\u984c\u306b\u5bfe\u51e6\u3059\u308b\u306b\u306f\u3001\u958b\u767a\u8005\u306f\u4e92\u63db\u6027\u306e\u554f\u984c\u306b\u5bfe\u51e6\u3059\u308b\u305f\u3081\u306e\u3044\u304f\u3064\u304b\u306e\u624b\u6cd5\u3092\u63a1\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u4e92\u63db\u6027\u306e\u554f\u984c\u306b\u5bfe\u51e6\u3059\u308b\u305f\u3081\u306e\u3044\u304f\u3064\u304b\u306e\u624b\u6cd5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30a6\u30b6\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4f7f\u7528\u3059\u308b: \u30d6\u30e9\u30a6\u30b6\u304c\u7570\u306a\u308c\u3070\u30b5\u30dd\u30fc\u30c8\u3059\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5024\u3082\u7570\u306a\u308a\u3001\u30d6\u30e9\u30a6\u30b6\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3001CSS\u30eb\u30fc\u30eb\u304c\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u3067\u6b63\u3057\u304f\u6a5f\u80fd\u3059\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u80cc\u666f\u306f\u3001\u6b21\u306e CSS \u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 cssCopy \u30b3\u30fc\u30c9 \u3053\u306e\u4f8b\u3067\u306f\u3001\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u80cc\u666f\u304c\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u6b63\u3057\u304f\u6a5f\u80fd\u3059\u308b\u3088\u3046\u306b\u3001\u305d\u308c\u305e\u308c\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u30fc \u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u6301\u3064 4 \u3064\u306e\u7570\u306a\u308b CSS \u30eb\u30fc\u30eb\u304c\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<code>background: -webkit-linear-gradient(red, blue); \/* Safari 5.1-6 *\/ background: -o-linear-gradient(red, blue); \/* Opera 11.1-12 *\/ background: -moz-linear-gradient(red, blue); \/* Firefox 3.6-15 *\/ background: linear-gradient(red, blue); \/* \u6807\u51c6\u8bed\u6cd5 *\/<\/code><\/li>\n\n\n\n<li>\u30ea\u30bb\u30c3\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\u3059\u308b: \u30d6\u30e9\u30a6\u30b6\u3054\u3068\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u304c\u7570\u306a\u308b\u305f\u3081\u3001\u30ea\u30bb\u30c3\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u3067\u30da\u30fc\u30b8\u304c\u6b63\u3057\u304f\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u30b9\u30bf\u30a4\u30eb\u306e\u30ea\u30bb\u30c3\u30c8\u306f\u3001\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308bCSS\u30eb\u30fc\u30eb\u306e\u5171\u901a\u30bb\u30c3\u30c8\u3067\u3059\u3002 \u305f\u3068\u3048\u3070\u3001\u6b21\u306e CSS \u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30da\u30fc\u30b8\u306e\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3067\u304d\u307e\u3059\u3002 cssCopy \u30b3\u30fc\u30c9\u3053\u306e\u4f8b\u3067\u306f\u3001\u4e00\u9023\u306e CSS \u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002<code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }<\/code><\/li>\n\n\n\n<li>\u30dd\u30ea\u30d5\u30a3\u30eb\u3092\u4f7f\u7528\u3059\u308b: \u30dd\u30ea\u30d5\u30a3\u30eb\u306f\u3001\u7279\u5b9a\u306e HTML5 \u304a\u3088\u3073 CSS3 \u6a5f\u80fd\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u306a\u3044\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u5b9f\u88c5\u3067\u304d\u308b JavaScript \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306f\u3001\u958b\u767a\u8005\u304c\u3088\u308a\u8aad\u307f\u3084\u3059\u304f\u3001\u4fdd\u5b88\u3057\u3084\u3059\u304f\u3001\u62e1\u5f35\u3057\u3084\u3059\u3044 CSS \u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002 CSS \u306e\u4e00\u822c\u7684\u306a\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af \u30af\u30e9\u30b9\u540d\u3092\u4f7f\u7528\u3059\u308b: \u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af \u30af\u30e9\u30b9\u540d\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u306e\u7406\u89e3\u3068\u4fdd\u5b88\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002 &#8220;box&#8221; \u3084 &#8220;content&#8221; \u306a\u3069\u306e\u610f\u5473\u306e\u306a\u3044\u30af\u30e9\u30b9\u540d\u306f\u907f\u3051\u3001\u4ee3\u308f\u308a\u306b\u8981\u7d20\u306e\u6a5f\u80fd\u3084\u76ee\u7684\u3092\u8aac\u660e\u3059\u308b\u30af\u30e9\u30b9\u540d\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u540d\u524d\u4ed8\u3051\u898f\u5247\u3092\u4f7f\u7528\u3059\u308b: \u540d\u524d\u4ed8\u3051\u898f\u5247\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u304c\u8aad\u307f\u3084\u3059\u304f\u3001\u4fdd\u5b88\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a\u547d\u540d\u898f\u5247\u306b\u306f\u3001BEM(\u30d6\u30ed\u30c3\u30af\u3001\u8981\u7d20\u3001\u4fee\u98fe\u5b50)\u3068OOCSS(\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411CSS)\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>ID \u30bb\u30ec\u30af\u30bf\u30fc\u3092\u907f\u3051\u308b: ID \u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u3092\u3088\u308a\u5177\u4f53\u7684\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u304c\u3001CSS \u304c\u8907\u96d1\u306b\u306a\u308a\u3001\u518d\u5229\u7528\u3067\u304d\u306a\u304f\u306a\u308b\u53ef\u80fd\u6027\u3082\u3042\u308a\u307e\u3059\u3002 \u4ee3\u308f\u308a\u306b\u3001\u30af\u30e9\u30b9\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u512a\u5148\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>CSS \u30b3\u30fc\u30c9\u3092\u6574\u7406\u3059\u308b: CSS \u30b3\u30fc\u30c9\u3092\u518d\u5229\u7528\u53ef\u80fd\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u6574\u7406\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3068\u62e1\u5f35\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002 \u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u3084\u30d5\u30a1\u30a6\u30f3\u30c7\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u306e\u30e2\u30b8\u30e5\u30e9\u30fcCSS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3082\u3001\u72ec\u81ea\u306e\u30e2\u30b8\u30e5\u30e9\u30fc\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b: \u30cd\u30b9\u30c8\u3055\u308c\u305f\u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u304c\u8aad\u307f\u3084\u3059\u304f\u306a\u308a\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306e\u30ab\u30b9\u30b1\u30fc\u30c9\u3092\u56de\u907f\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3092\u4f7f\u7528\u3059\u308b: CSS \u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001CSS \u30b3\u30fc\u30c9\u306e\u8a18\u8ff0\u3068\u4fdd\u5b88\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u306b\u306f\u3001SCSS \u304a\u3088\u3073 Less \u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b9\u30bf\u30a4\u30eb\u306e\u30ea\u30bb\u30c3\u30c8:CSS\u306e\u4f5c\u6210\u3092\u958b\u59cb\u3059\u308b\u524d\u306b\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u30ea\u30bb\u30c3\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u30af\u30ea\u30a2\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u9593\u306e\u4e00\u8cab\u6027\u304c\u78ba\u4fdd\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4e92\u63db\u6027\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9: CSS \u4e92\u63db\u6027\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u30fc\u9593\u3067 CSS \u30b3\u30fc\u30c9\u306e\u4e00\u8cab\u6027\u304c\u4fdd\u8a3c\u3055\u308c\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306b\u306f\u3001-moz- (Firefox)\u3001-webkit- (Safari \u304a\u3088\u3073 Chrome)\u3001\u304a\u3088\u3073 -ms- (Internet Explorer) \u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u5168\u4f53\u3068\u3057\u3066\u3001CSS \u306e\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306f\u3001\u958b\u767a\u8005\u304c\u3088\u308a\u9ad8\u54c1\u8cea\u306e CSS \u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3068\u62e1\u5f35\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411 CSS (OOCSS) \u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u3067\u62e1\u5f35\u53ef\u80fd\u3067\u4fdd\u5b88\u53ef\u80fd\u306a CSS \u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b\u305f\u3081\u306e\u624b\u6cd5\u3067\u3059\u3002 \u3053\u308c\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0(OOP)\u306e\u30a2\u30a4\u30c7\u30a2\u304b\u3089\u501f\u7528\u3057\u3001CSS\u30b9\u30bf\u30a4\u30eb\u3092\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3057\u3066\u6271\u3044\u3001\u5206\u5272\u3068\u62bd\u8c61\u5316\u306b\u3088\u308b\u518d\u5229\u7528\u6027\u3068\u62e1\u5f35\u6027\u3092\u5099\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u3053\u3067\u306f\u3001OOCSS \u306e\u4e3b\u8981\u306a\u6982\u5ff5\u3068\u624b\u6cd5\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u69cb\u9020\u3068\u30b9\u30bf\u30a4\u30eb\u306e\u5206\u96e2: HTML \u69cb\u9020\u3068 CSS \u30b9\u30bf\u30a4\u30eb\u3092\u5206\u96e2\u3057\u3066\u3001\u7ba1\u7406\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u6539\u5584\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30e2\u30b8\u30e5\u30e9\u30fc\u8a2d\u8a08:\u30da\u30fc\u30b8\u3092\u72ec\u7acb\u3057\u305f\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u5206\u5272\u3057\u3001\u305d\u308c\u305e\u308c\u304c\u30da\u30fc\u30b8\u3067\u518d\u5229\u7528\u3067\u304d\u308b\u72ec\u81ea\u306e\u30b9\u30bf\u30a4\u30eb\u3068HTML\u69cb\u9020\u3092\u6301\u3061\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30bf\u30a4\u30eb: \u518d\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u30af\u30e9\u30b9\u306b\u62bd\u8c61\u5316\u3057\u3001\u8907\u6570\u306e\u8981\u7d20\u306b\u9069\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u7d99\u627f\u3068\u30ab\u30b9\u30b1\u30fc\u30c9: CSS \u7d99\u627f\u3068\u30ab\u30b9\u30b1\u30fc\u30c9\u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u518d\u5229\u7528\u3068\u62e1\u5f35\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u547d\u540d\u898f\u5247: \u4e00\u8cab\u6027\u306e\u3042\u308b\u547d\u540d\u898f\u5247\u3092\u4f7f\u7528\u3057\u3066\u3001CSS \u30af\u30e9\u30b9\u540d\u3092\u8aad\u307f\u3084\u3059\u304f\u3001\u30a4\u30c7\u30aa\u30ed\u30ae\u30fc\u7684\u3067\u3001\u7406\u89e3\u3057\u3084\u3059\u304f\u3001\u4fdd\u5b88\u3057\u3084\u3059\u304f\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3:\u3055\u307e\u3056\u307e\u306a\u753b\u9762\u30b5\u30a4\u30ba\u3084\u30c7\u30d0\u30a4\u30b9\u30bf\u30a4\u30d7\u306b\u9069\u5fdc\u3057\u3066\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306b\u306a\u308b\u3088\u3046\u306bCSS\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u8a08\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>OOCSS\u306e\u5229\u70b9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u518d\u5229\u7528\u6027: \u62bd\u8c61\u5316\u3068\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u306b\u3088\u308a\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u518d\u5229\u7528\u6027\u3092\u5b9f\u73fe\u3057\u3001\u30b3\u30fc\u30c9\u306e\u91cf\u3092\u6e1b\u3089\u3057\u3001\u958b\u767a\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u62e1\u5f35\u6027: \u30b9\u30bf\u30a4\u30eb\u306f\u3001\u7d99\u627f\u3068\u30ab\u30b9\u30b1\u30fc\u30c9\u306b\u3088\u3063\u3066\u7c21\u5358\u306b\u62e1\u5f35\u304a\u3088\u3073\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4fdd\u5b88\u6027: \u547d\u540d\u898f\u5247\u3068\u30e2\u30b8\u30e5\u30fc\u30eb\u8a2d\u8a08\u306b\u3088\u308a\u3001\u30b3\u30fc\u30c9\u306e\u53ef\u8aad\u6027\u3068\u4fdd\u5b88\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3:\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30a4\u30b9\u3084\u753b\u9762\u30b5\u30a4\u30ba\u306b\u9069\u5fdc\u3057\u3066\u3001\u3088\u308a\u512a\u308c\u305f\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>OOCSS\u306e\u6b20\u70b9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5b66\u7fd2\u66f2\u7dda:OOCSS\u306b\u306f\u3001\u7279\u5b9a\u306e\u5b66\u7fd2\u66f2\u7dda\u3068\u3001\u62bd\u8c61\u5316\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u3001\u7d99\u627f\u306a\u3069\u306e\u6982\u5ff5\u306e\u7406\u89e3\u304c\u5fc5\u8981\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u8907\u96d1\u3055\u306e\u5897\u5927:OOCSS\u306f\u30b3\u30fc\u30c9\u306e\u8907\u96d1\u3055\u3068\u69cb\u9020\u3092\u5897\u5927\u3055\u305b\u3001\u3088\u308a\u591a\u304f\u306e\u958b\u767a\u6642\u9593\u3068\u52b4\u529b\u3092\u5fc5\u8981\u3068\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u904e\u5270\u8a2d\u8a08:\u8a2d\u8a08\u304c\u5408\u7406\u7684\u3067\u306a\u3044\u5834\u5408\u3001OOCSS\u306f\u904e\u5270\u8a2d\u8a08\u306b\u3064\u306a\u304c\u308a\u3001\u30b3\u30fc\u30c9\u306e\u5197\u9577\u6027\u3068\u8907\u96d1\u3055\u3092\u5897\u3059\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<p>\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306f\u4eba\u6c17\u306e\u3042\u308bCSS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3042\u308a\u3001\u958b\u767a\u8005\u304c\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u30b5\u30a4\u30c8\u3092\u3059\u3070\u3084\u304f\u69cb\u7bc9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u65e2\u88fd\u306eCSS\u30b9\u30bf\u30a4\u30eb\u3068JavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u3067\u306eCSS\u306e\u4f7f\u7528\u306b\u3064\u3044\u3066\u3001\u3044\u304f\u3064\u304b\u306e\u7d39\u4ecb\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306e\u30b9\u30bf\u30a4\u30eb\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b:\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306f\u3001Web\u30da\u30fc\u30b8\u3092\u3059\u3070\u3084\u304f\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u65e2\u88fd\u306eCSS\u30af\u30e9\u30b9\u306e\u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u958b\u767a\u8005\u306f\u3001\u3053\u308c\u3089\u306e\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30dc\u30bf\u30f3\u3001\u30d5\u30a9\u30fc\u30e0\u3001\u30ea\u30b9\u30c8\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u306a\u3069\u306e\u30da\u30fc\u30b8\u8981\u7d20\u3092\u30c7\u30b6\u30a4\u30f3\u3067\u304d\u307e\u3059\u3002 \u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306e\u30b9\u30bf\u30a4\u30eb\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001\u958b\u767a\u8005\u306f\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306eCSS\u30d5\u30a1\u30a4\u30eb\u3092Web\u30da\u30fc\u30b8\u306b\u30ea\u30f3\u30af\u3057\u3001\u9069\u5207\u306a\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u3092\u4f7f\u7528\u3057\u305f\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0:\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306f\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u88c5\u306b\u4f7f\u7528\u3067\u304d\u308b\u30b0\u30ea\u30c3\u30c9\u30d9\u30fc\u30b9\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30b7\u30b9\u30c6\u30e0\u3067\u3059\u3002 \u30b0\u30ea\u30c3\u30c9 \u30b7\u30b9\u30c6\u30e0\u3067\u306f\u3001\u753b\u9762\u306e\u5e45\u3092 12 \u5217\u306b\u5206\u5272\u3057\u3001\u5404\u5217\u306e CSS \u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u3001\u958b\u767a\u8005\u306f\u3053\u308c\u3092\u4f7f\u7528\u3057\u3066\u8981\u7d20\u306e\u5e45\u3068\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 \u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u958b\u767a\u8005\u306f\u30e2\u30d0\u30a4\u30eb\u3001\u30bf\u30d6\u30ec\u30c3\u30c8\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u30b5\u30a4\u30c8\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30e0\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u30b9\u30bf\u30a4\u30eb:\u958b\u767a\u8005\u306f\u3001\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u307e\u305f\u306f\u62e1\u5f35\u3059\u308b\u3053\u3068\u3067\u3001Web\u30da\u30fc\u30b8\u306e\u30eb\u30c3\u30af\u30a2\u30f3\u30c9\u30d5\u30a3\u30fc\u30eb\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002 \u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u30b9\u30bf\u30a4\u30eb\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u305f\u3081\u306b\u3001\u958b\u767a\u8005\u306f\u65b0\u3057\u3044CSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u4e2d\u306b\u65b0\u3057\u3044CSS\u30eb\u30fc\u30eb\u3092\u5b9a\u7fa9\u3057\u3066\u3001\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u307e\u305f\u306f\u62e1\u5f35\u3067\u304d\u307e\u3059\u3002 Sass \u3084 Less \u306a\u3069\u306e CSS \u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u3092\u4f7f\u7528\u3057\u3066\u3001\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u306e\u8a18\u8ff0\u3092\u7c21\u7565\u5316\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u3092\u4f7f\u7528\u3057\u305fJavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8:\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306f\u3001\u30ab\u30eb\u30fc\u30bb\u30eb\u3001\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3001\u30bf\u30d6\u3001\u30e2\u30fc\u30c0\u30eb\u30dc\u30c3\u30af\u30b9\u306a\u3069\u306e\u4e00\u822c\u7684\u306a\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u52b9\u679c\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u65e2\u88fd\u306eJavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30bb\u30c3\u30c8\u3082\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001\u958b\u767a\u8005\u306f\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306eJavaScript\u30d5\u30a1\u30a4\u30eb\u3092Web\u30da\u30fc\u30b8\u306b\u30ea\u30f3\u30af\u3057\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u63d0\u4f9b\u3055\u308c\u3066\u3044\u308b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306b\u5f93\u3063\u3066\u9069\u5207\u306aHTML\u304a\u3088\u3073CSS\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u7d50\u8ad6\u3068\u3057\u3066\u3001\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306f\u3001Web\u30b5\u30a4\u30c8\u958b\u767a\u306e\u901f\u5ea6\u3068\u52b9\u7387\u3092\u5927\u5e45\u306b\u9ad8\u901f\u5316\u3067\u304d\u308b\u5f37\u529b\u306aCSS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 Bootstrap\u306e\u30b9\u30bf\u30a4\u30eb\u3001\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u3001\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u3001\u304a\u3088\u3073JavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u8005\u306f\u5fdc\u7b54\u6027\u304c\u9ad8\u304f\u3001\u7f8e\u3057\u304f\u3001\u4fdd\u5b88\u304c\u5bb9\u6613\u306aWeb\u30b5\u30a4\u30c8\u3092\u3059\u3070\u3084\u304f\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u3068\u306f\u3001CSS\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3068\u304d\u306b\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u9055\u3044\u306b\u3088\u3063\u3066\u5f15\u304d\u8d77\u3053\u3055\u308c\u308b\u554f\u984c\u3092\u6392\u9664\u3057\u3001Web\u30da\u30fc\u30b8\u3092\u30d6\u30e9\u30a6\u30b6\u9593\u3067\u4e00\u8cab\u3057\u3066\u898b\u305b\u308b\u3053\u3068\u3092\u6307\u3057\u307e\u3059\u3002 \u4e00\u822c\u306b\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u306f\u3001\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u3001\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3001\u8272\u306a\u3069\u306b\u7570\u306a\u308b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001Web\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u884c\u3046\u3068\u304d\u306f\u3001\u3053\u308c\u3089\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3066\u3001\u30da\u30fc\u30b8\u304c\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u3067\u540c\u3058\u3088\u3046\u306b\u898b\u3048\u308b\u3088\u3046\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u4e00\u822c\u7684\u306a\u65b9\u6cd5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30ce\u30fc\u30de\u30e9\u30a4\u30ba\u3092\u4f7f\u7528.css: \u30ce\u30fc\u30de\u30e9\u30a4\u30ba.css\u306f\u3001\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30af\u30ed\u30b9\u30d6\u30e9\u30a6\u30b6CSS\u30b9\u30bf\u30a4\u30eb\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3001Web\u30da\u30fc\u30b8\u304c\u7570\u306a\u308b\u30d6\u30e9\u30a6\u30b6\u3067\u540c\u3058\u3088\u3046\u306b\u898b\u3048\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002 \u4e00\u9023\u306eCSS\u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3001\u57fa\u672c\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306e\u5b9a\u7fa9\u3001\u6d6e\u52d5\u5c0f\u6570\u70b9\u6570\u306e\u30af\u30ea\u30a2\u3001\u30ea\u30b9\u30c8\u306e\u524d\u5f8c\u306e\u7a7a\u767d\u306e\u30ad\u30e3\u30f3\u30bb\u30eb\u306a\u3069\u3001\u3044\u304f\u3064\u304b\u306e\u4e00\u822c\u7684\u306aCSS\u30eb\u30fc\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u30ce\u30fc\u30de\u30e9\u30a4\u30ba\u3092\u4f7f\u7528\u3059\u308b\u3068.css Web\u30da\u30fc\u30b8\u3092\u30d6\u30e9\u30a6\u30b6\u9593\u3067\u4e00\u8cab\u6027\u306e\u3042\u308b\u3082\u306e\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30e6\u30cb\u30d0\u30fc\u30b5\u30eb\u30bb\u30ec\u30af\u30bf(*)\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b:\u30e6\u30cb\u30d0\u30fc\u30b5\u30eb\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u304c\u8981\u7d20\u306b\u4e0e\u3048\u308b\u5f71\u97ff\u3092\u30af\u30ea\u30a2\u3057\u307e\u3059\u304c\u3001\u3053\u306e\u65b9\u6cd5\u3067\u306f\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u304c\u30af\u30ea\u30a2\u3055\u308c\u3001\u5f8c\u3067\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u518d\u5b9a\u7fa9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u30b3\u30fc\u30c9\u306e\u8907\u96d1\u3055\u3068\u4f5c\u696d\u8ca0\u8377\u304c\u5897\u52a0\u3059\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li>.css\u30d5\u30a1\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3092\u4f7f\u7528: \u30ea\u30bb\u30c3\u30c8.css\u306f\u3001\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u5225\u306e\u65b9\u6cd5\u3067\u3059\u3002 \u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3066\u3001Web\u30da\u30fc\u30b8\u306e\u5916\u89b3\u3092\u3088\u308a\u4e00\u8cab\u6027\u306e\u3042\u308b\u3082\u306e\u306b\u3057\u307e\u3059\u3002 \u30ea\u30bb\u30c3\u30c8 .css\u306e\u76ee\u7684\u306f\u3001\u8981\u7d20\u306e\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5171\u901a\u306e\u30b9\u30bf\u30a4\u30eb \u30bb\u30c3\u30c8\u306b\u30ea\u30bb\u30c3\u30c8\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u9055\u3044\u306b\u3088\u3063\u3066\u5f15\u304d\u8d77\u3053\u3055\u308c\u308b\u554f\u984c\u3092\u56de\u907f\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u6c4e\u7528\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u6bd4\u8f03\u3057\u3066\u3001Reset .css\u3088\u308a\u7d30\u304b\u304f\u3001\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30af\u30ea\u30a2\u3059\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u5f8c\u3067\u4e00\u90e8\u306e\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u624b\u52d5\u3067\u30ea\u30bb\u30c3\u30c8\u3059\u308b: \u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u624b\u52d5\u3067\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u3068\u306f\u3001\u7279\u5b9a\u306e\u8981\u7d20\u306e\u8981\u7d20\u3092\u624b\u52d5\u3067\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u3057\u3001\u305d\u306e\u8981\u7d20\u306b\u5bfe\u3059\u308b\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u65e2\u5b9a\u306e\u30b9\u30bf\u30a4\u30eb\u306e\u5f71\u97ff\u3092\u6392\u9664\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u3053\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u3067\u306f\u3001\u5404\u8981\u7d20\u306e\u500b\u5225\u306e\u51e6\u7406\u304c\u5fc5\u8981\u3067\u3042\u308a\u3001\u30b3\u30fc\u30c9\u5185\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u624b\u52d5\u3067\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u591a\u304f\u306e\u4f5c\u696d\u304c\u5fc5\u8981\u3067\u3059\u304c\u3001\u3088\u308a\u304d\u3081\u7d30\u304b\u3044\u5236\u5fa1\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u8981\u3059\u308b\u306b\u3001\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u30d6\u30e9\u30a6\u30b6\u3067\u306eWeb\u30da\u30fc\u30b8\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u4e00\u8cab\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u65b9\u6cd5\u3067\u3042\u308a\u3001\u7279\u5b9a\u306e\u5b9f\u88c5\u306f\u30b1\u30fc\u30b9\u30d0\u30a4\u30b1\u30fc\u30b9\u3067\u6c7a\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u6c4e\u7528\u30bb\u30ec\u30af\u30bf\u30fc\u3001\u30ea\u30bb\u30c3\u30c8.css\u3001\u6b63\u898f\u5316.css\u307e\u305f\u306f\u624b\u52d5\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306b\u306f\u3001\u80cc\u666f\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u30d5\u30a9\u30f3\u30c8\u3001\u30ea\u30f3\u30af\u3001Web \u30da\u30fc\u30b8\u306e\u30ea\u30b9\u30c8\u306a\u3069\u306e\u8981\u7d20\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304a\u3088\u3073\u8a2d\u8a08\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u591a\u304f\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3042\u308a\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a CSS \u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u305d\u306e\u4f7f\u7528\u65b9\u6cd5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9<\/li>\n<\/ol>\n\n\n\n<p>CSS\u306b\u306f\u3001\u80cc\u666f\u8272\u3001\u80cc\u666f\u753b\u50cf\u3001\u80cc\u666f\u30bf\u30a4\u30eb\u3001\u80cc\u666f\u4f4d\u7f6e\u306a\u3069\u3001Web\u30da\u30fc\u30b8\u306e\u80cc\u666f\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u80cc\u666f\u8272: \u8981\u7d20\u306e\u80cc\u666f\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u753b\u50cf: \u8981\u7d20\u306e\u80cc\u666f\u753b\u50cf\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u7e70\u308a\u8fd4\u3057: \u80cc\u666f\u753b\u50cf\u306e\u30bf\u30a4\u30ea\u30f3\u30b0\u65b9\u6cd5\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u7e70\u308a\u8fd4\u3057\u306a\u3057\u3001\u7e70\u308a\u8fd4\u3057-x\u3001\u7e70\u308a\u8fd4\u3057-y\u3001\u307e\u305f\u306f\u7e70\u308a\u8fd4\u3057\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>background-position: \u4e0a\u3001\u4e2d\u592e\u3001\u4e0b\u3001\u30d4\u30af\u30bb\u30eb\u5024\u306a\u3069\u306e\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u914d\u7f6e\u3067\u304d\u308b\u80cc\u666f\u753b\u50cf\u306e\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u30c6\u30ad\u30b9\u30c8<\/li>\n<\/ol>\n\n\n\n<p>CSS\u306f\u3001\u30d5\u30a9\u30f3\u30c8\u3001\u8272\u3001\u30b5\u30a4\u30ba\u3001\u884c\u306e\u9ad8\u3055\u3001\u914d\u7f6e\u306a\u3069\u3001\u4e2d\u56fd\u8a9e\u306eWeb\u30da\u30fc\u30b8\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>font-family: \u30d5\u30a9\u30f3\u30c8\u307e\u305f\u306f\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u306e\u540d\u524d\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>color: \u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>font-size: \u30d5\u30a9\u30f3\u30c8\u306e\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u884c\u306e\u9ad8\u3055: \u30c6\u30ad\u30b9\u30c8\u306e\u884c\u306e\u9ad8\u3055\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u306e\u914d\u7f6e: \u30c6\u30ad\u30b9\u30c8\u306e\u914d\u7f6e\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u5de6\u63c3\u3048\u3001\u4e2d\u592e\u63c3\u3048\u3001\u53f3\u63c3\u3048\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30d5\u30a9\u30f3\u30c8<\/li>\n<\/ol>\n\n\n\n<p>CSS\u306b\u306f\u3001\u592a\u5b57\u3001\u659c\u4f53\u3001\u4e0b\u7dda\u3001\u53d6\u308a\u6d88\u3057\u7dda\u306a\u3069\u3001\u30d5\u30a9\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u52b9\u679c\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>font-weight: \u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u901a\u5e38\u3001\u592a\u5b57\u306b\u8a2d\u5b9a\u3057\u305f\u308a\u3001\u6570\u5024\u3092\u4f7f\u7528\u3057\u3066\u592a\u3055\u3092\u5236\u5fa1\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>font-style: \u30d5\u30a9\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u6a19\u6e96\u3001\u659c\u4f53\u3001\u307e\u305f\u306f\u659c\u3081\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe:\u4e0b\u7dda\u3001\u53d6\u308a\u6d88\u3057\u7dda\u306a\u3069\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u88c5\u98fe\u52b9\u679c\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u30ea\u30f3\u30af<\/li>\n<\/ol>\n\n\n\n<p>CSS\u306f\u3001\u30ea\u30f3\u30af\u306e\u8272\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u52b9\u679c\u306a\u3069\u3001\u30ea\u30f3\u30af\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u52b9\u679c\u306b\u95a2\u3059\u308b\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>color: \u30ea\u30f3\u30af\u306e\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe:\u4e0b\u7dda\u3001\u53d6\u308a\u6d88\u3057\u7dda\u306a\u3069\u3001\u30ea\u30f3\u30af\u306e\u88c5\u98fe\u52b9\u679c\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>:hover: \u8272\u3084\u4e0b\u7dda\u306e\u5909\u66f4\u306a\u3069\u3001\u30db\u30d0\u30fc\u6642\u306e\u30ea\u30f3\u30af\u306e\u52b9\u679c\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>\u30ea\u30b9\u30c8<\/li>\n<\/ol>\n\n\n\n<p>CSS \u306b\u306f\u3001\u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u306e\u30b9\u30bf\u30a4\u30eb\u3001\u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u9593\u306e\u9593\u9694\u306a\u3069\u3001\u30ea\u30b9\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u52b9\u679c\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>list-style-type: \u5b9f\u7dda\u306e\u5186\u3001\u5b9f\u7dda\u306e\u6b63\u65b9\u5f62\u306a\u3069\u3001\u30ea\u30b9\u30c8\u9805\u76ee\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>list-style-image: \u30ea\u30b9\u30c8\u9805\u76ee\u306e\u30bf\u30b0\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u753b\u50cf\u3067\u3001\u753b\u50cf\u306b\u7f6e\u304d\u63db\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ea\u30b9\u30c8\u30b9\u30bf\u30a4\u30eb\u4f4d\u7f6e:\u7528<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u306e\u80cc\u666f\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u30d5\u30a9\u30f3\u30c8\u3001\u30ea\u30f3\u30af\u3001\u304a\u3088\u3073\u30ea\u30b9\u30c8\u306b\u95a2\u3057\u3066\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u4e00\u822c\u7684\u306a\u4f7f\u7528\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\uff1a<\/li>\n<\/ol>\n\n\n\n<p>\u80cc\u666f\u306f\u3001\u8981\u7d20\u306e\u80cc\u666f\u8272\u3001\u80cc\u666f\u753b\u50cf\u3001\u80cc\u666f\u306e\u7e70\u308a\u8fd4\u3057\u306a\u3069\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u80cc\u666f\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u80cc\u666f\u8272: \u8981\u7d20\u306e\u80cc\u666f\u8272\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u753b\u50cf: \u8981\u7d20\u306e\u80cc\u666f\u753b\u50cf\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u30ea\u30d4\u30fc\u30c8: \u80cc\u666f\u753b\u50cf\u306e\u7e70\u308a\u8fd4\u3057\u65b9\u6cd5(\u30ea\u30d4\u30fc\u30c8\u306a\u3057\u3001\u30ea\u30d4\u30fc\u30c8x\u3001\u30ea\u30d4\u30fc\u30c8y\u3001\u30ea\u30d4\u30fc\u30c8\u306a\u3069)\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u4f4d\u7f6e:\u4e0a\u3001\u4e2d\u592e\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u306a\u3069\u3001\u80cc\u666f\u753b\u50cf\u306e\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u30b5\u30a4\u30ba:\u30ab\u30d0\u30fc\u306a\u3069\u306e\u80cc\u666f\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u30c6\u30ad\u30b9\u30c8\uff1a<\/li>\n<\/ol>\n\n\n\n<p>\u30c6\u30ad\u30b9\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u8272\u3001\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3001\u30d5\u30a9\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb\u3001\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe\u306a\u3069\u3001\u8981\u7d20\u5185\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30c6\u30ad\u30b9\u30c8\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>color: \u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba: \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>font-weight: \u592a\u5b57\u3001\u6a19\u6e96\u306a\u3069\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>font-style: \u659c\u4f53\u3001\u6a19\u6e96\u306a\u3069\u306e\u30d5\u30a9\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe:\u4e0b\u7dda\u3001\u4e0a\u7dda\u3001\u7dda\u629c\u304d\u306a\u3069\u306e\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u306e\u914d\u7f6e: \u5de6\u63c3\u3048\u3001\u4e2d\u592e\u63c3\u3048\u3001\u53f3\u63c3\u3048\u306a\u3069\u306e\u30c6\u30ad\u30b9\u30c8\u914d\u7f6e\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30d5\u30a9\u30f3\u30c8\uff1a<\/li>\n<\/ol>\n\n\n\n<p>\u30d5\u30a9\u30f3\u30c8 \u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d5\u30a9\u30f3\u30c8 \u30d5\u30a1\u30df\u30ea\u3001\u30d5\u30a9\u30f3\u30c8 \u30b5\u30a4\u30ba\u3001\u30d5\u30a9\u30f3\u30c8\u306e\u8272\u306a\u3069\u3001\u8981\u7d20\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u7a2e\u985e\u3068\u95a2\u9023\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30d5\u30a9\u30f3\u30c8\u5c5e\u6027\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>font-family: Arial\u3001Times New Roman\u306a\u3069\u306e\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba: \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>font-weight: \u592a\u5b57\u3001\u6a19\u6e96\u306a\u3069\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>font-style: \u659c\u4f53\u3001\u6a19\u6e96\u306a\u3069\u306e\u30d5\u30a9\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>color: \u30d5\u30a9\u30f3\u30c8\u306e\u8272\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u30ea\u30f3\u30af\uff1a<\/li>\n<\/ol>\n\n\n\n<p>\u30ea\u30f3\u30af \u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30ea\u30f3\u30af\u306e\u8272\u3084\u80cc\u666f\u8272\u306a\u3069\u3001\u8981\u7d20\u306e\u30ea\u30f3\u30af \u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30ea\u30f3\u30af\u5c5e\u6027\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>color: \u30ea\u30f3\u30af\u306e\u8272\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe: \u30ea\u30f3\u30af\u306e\u4e0b\u7dda\u3084\u53d6\u308a\u6d88\u3057\u7dda\u306a\u3069\u306e\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u8272: \u30ea\u30f3\u30af\u306e\u80cc\u666f\u8272\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:hover \u64ec\u4f3c\u30af\u30e9\u30b9: \u30ea\u30f3\u30af\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u305f\u3068\u304d\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:visited\u7591\u4f3c\u30af\u30e9\u30b9: \u8a2a\u554f\u3057\u305f\u30ea\u30f3\u30af\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>\u30ea\u30b9\u30c8\uff1a<\/li>\n<\/ol>\n\n\n\n<p>\u30ea\u30b9\u30c8 \u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u9806\u5e8f\u306a\u3057\u30ea\u30b9\u30c8\u3084\u9806\u5e8f\u4ed8\u304d\u30ea\u30b9\u30c8\u306a\u3069\u3001\u8981\u7d20\u306e\u30ea\u30b9\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30ea\u30b9\u30c8\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>list-style-type: \u30c7\u30a3\u30b9\u30af\u3001\u5186\u3001\u6b63\u65b9\u5f62\u300110\u9032\u6570\u3001\u4f4e\u30a2\u30eb\u30d5\u30a1\u306a\u3069\u3001\u30ea\u30b9\u30c8\u30a2\u30a4\u30c6\u30e0\u306e\u30bf\u30b0\u30bf\u30a4\u30d7\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ea\u30b9\u30c8\u30b9\u30bf\u30a4\u30eb\u30a4\u30e1\u30fc\u30b8: \u30ea\u30b9\u30c8\u30a2\u30a4\u30c6\u30e0\u306e\u30bf\u30b0\u3092\u30a4\u30e1\u30fc\u30b8\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>list-style-position: \u30ea\u30b9\u30c8\u9805\u76ee\u30de\u30fc\u30ab\u30fc\u306e\u4f4d\u7f6e (\u5185\u5074\u3001\u5916\u5074\u306a\u3069) \u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u30c7\u30b6\u30a4\u30f3\u306b\u95a2\u3057\u3066\u306f\u3001\u30ea\u30b9\u30c8\u3001\u8868\u3001\u5883\u754c\u7dda\u3001\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u306f\u3059\u3079\u3066\u4fbf\u5229\u306aCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002 \u3053\u308c\u3089\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6982\u8981\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30ea\u30b9\u30c8<\/h2>\n\n\n\n<p>CSS \u306e\u30ea\u30b9\u30c8\u306f\u3001\u6b21\u306e\u5024\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<code>list-style<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>none<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306b\u306f\u30bf\u30b0\u304c\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li><code>disc<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306f\u9ed2\u3044\u5b9f\u7dda\u306e\u5186\u3067\u30de\u30fc\u30af\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>circle<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306f\u9ed2\u3044\u767d\u629c\u304d\u306e\u5186\u3067\u30de\u30fc\u30af\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>square<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306f\u9ed2\u3044\u56db\u89d2\u5f62\u3067\u30de\u30fc\u30af\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>decimal<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306b\u306f\u756a\u53f7\u304c\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>lower-roman<\/code>: \u30ea\u30b9\u30c8\u9805\u76ee\u306b\u306f\u5c0f\u6587\u5b57\u306e\u30ed\u30fc\u30de\u6570\u5b57\u3067\u756a\u53f7\u304c\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>upper-roman<\/code>: \u30ea\u30b9\u30c8\u9805\u76ee\u306b\u306f\u5927\u6587\u5b57\u306e\u30ed\u30fc\u30de\u6570\u5b57\u3067\u756a\u53f7\u304c\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>lower-alpha<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306b\u306f\u5c0f\u6587\u5b57\u306e\u756a\u53f7\u304c\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>upper-alpha<\/code>: \u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u306b\u306f\u5927\u6587\u5b57\u306e\u756a\u53f7\u304c\u4ed8\u3051\u3089\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u306f\u3001\u5b9f\u7dda\u306e\u5186\u30de\u30fc\u30ab\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3088\u3046\u306b\u9806\u5e8f\u306a\u3057\u30ea\u30b9\u30c8\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>ul {\n  list-style: disc;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u5f62<\/h2>\n\n\n\n<p>CSS \u306e\u30c6\u30fc\u30d6\u30eb\u306f\u3001\u4ed6\u306e HTML \u8981\u7d20\u3068\u540c\u3058\u65b9\u6cd5\u3067\u4f7f\u7528\u3055\u308c\u308b\u3001\u3001\u3001\u304a\u3088\u3073\u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u6b21\u306e\u3088\u3046\u306a\u30c6\u30fc\u30d6\u30eb\u56fa\u6709\u306e CSS \u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u3042\u308a\u307e\u3059\u3002<code>border<\/code><code>padding<\/code><code>margin<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>border-collapse<\/code>: \u30bb\u30eb\u9593\u306e\u5883\u754c\u7dda\u3092 1 \u3064\u306e\u5883\u754c\u7dda\u306b\u7d50\u5408\u3059\u308b\u304b\u3069\u3046\u304b\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002 \u306b\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u96a3\u63a5\u3059\u308b\u30bb\u30eb\u306e\u5883\u754c\u7dda\u304c 1 \u3064\u306e\u5883\u754c\u7dda\u306b\u30de\u30fc\u30b8\u3055\u308c\u307e\u3059\u3002 \u306b\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u5404\u30bb\u30eb\u306b\u72ec\u81ea\u306e\u5883\u754c\u7dda\u304c\u3042\u308a\u307e\u3059\u3002<code>collapse<\/code><code>separate<\/code><\/li>\n\n\n\n<li><code>border-spacing<\/code>: \u96a3\u63a5\u3059\u308b\u30bb\u30eb\u9593\u306e\u8ddd\u96e2\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>caption-side<\/code>: \u30c6\u30fc\u30d6\u30eb\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u8868\u793a\u3059\u308b\u5834\u6240\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u307e\u305f\u306f \u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<code>top<\/code><code>bottom<\/code><code>left<\/code><code>right<\/code><\/li>\n<\/ul>\n\n\n\n<p>\u4f8b\u3068\u3057\u3066\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u306f\u3001\u9ed2\u3044\u5883\u754c\u7dda\u3092\u6301\u3064\u30c6\u30fc\u30d6\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>table {\n  border-collapse: collapse;\n  border: 1px solid black;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d5\u30ec\u30fc\u30e0<\/h2>\n\n\n\n<p>\u5883\u754c\u7dda\u306f\u3001\u6b21\u306e\u5024\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<code>border<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>border-width<\/code>: \u5883\u754c\u7dda\u306e\u5e45\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>border-style<\/code>: \u3001\u3001\u3001 \u306a\u3069\u306e\u5883\u754c\u7dda\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<code>solid<\/code><code>dashed<\/code><code>dotted<\/code><\/li>\n\n\n\n<li><code>border-color<\/code>: \u67a0\u7dda\u306e\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001 \u3084 \u306e\u3088\u3046\u306b\u500b\u5225\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<code>border-top-width<\/code><code>border-left-color<\/code><\/p>\n\n\n\n<p>\u4f8b\u3068\u3057\u3066\u3001\u4ee5\u4e0b\u306b\u793a\u3059\u30b3\u30fc\u30c9\u306f\u3001\u8d64\u3044\u70b9\u7dda\u306e\u5883\u754c\u7dda\u3092\u6301\u3064\u8981\u7d20\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>div {\n  border: 1px dashed red;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b49\u9ad8\u7dda<\/h2>\n\n\n\n<p>\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u306f\u5883\u754c\u7dda\u306e\u5916\u5074\u306b\u3042\u308b\u7dda\u3067\u3042\u308a\u3001\u6b21\u306e\u5024\u3092\u8a2d\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<code>outline<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>outline-width<\/code>: \u30d5\u30c3\u30c8\u30d7\u30ea\u30f3\u30c8\u306e\u5e45\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u3092\u4f7f\u7528\u3057\u3066\u30c6\u30fc\u30d6\u30eb\u3092\u4f5c\u6210\u3059\u308b\u5834\u5408\u3001\u4e00\u822c\u7684\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>table-layout<\/code>: \u30c6\u30fc\u30d6\u30eb\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002(\u30c7\u30d5\u30a9\u30eb\u30c8)\u3001\u3059\u3079\u3066\u306e\u30bb\u30eb\u306e\u5e45\u304c\u56fa\u5b9a\u3055\u308c\u3001\u3001,\u5185\u5bb9\u306b\u57fa\u3065\u3044\u3066\u30bb\u30eb\u306e\u5e45\u3092\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3067\u304d\u307e\u3059\u3002<code>auto<\/code><code>fixed<\/code><code>inherit<\/code><code>fixed<\/code><code>auto<\/code><\/li>\n\n\n\n<li><code>border-collapse<\/code>: \u8868\u306e\u7f6b\u7dda\u306e\u7d50\u5408\u65b9\u6cd5\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002(\u65e2\u5b9a)\u3001\u96a3\u63a5\u3059\u308b\u30bb\u30eb\u3092\u8868\u3059\u7f6b\u7dda\u306f 1 \u672c\u306e\u7f6b\u7dda\u306b\u7d50\u5408\u3055\u308c\u3001\u96a3\u63a5\u3059\u308b\u30bb\u30eb\u3092\u793a\u3059\u7f6b\u7dda\u306f\u7d50\u5408\u3055\u308c\u307e\u305b\u3093\u3002<code>collapse<\/code><code>separate<\/code><code>collapse<\/code><code>separate<\/code><\/li>\n\n\n\n<li><code>border-spacing<\/code>: \u96a3\u63a5\u3059\u308b\u30bb\u30eb\u9593\u306e\u9593\u9694\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u3053\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001 \u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306b\u306e\u307f\u6a5f\u80fd\u3057\u307e\u3059\u3002<code>border-collapse<\/code><code>separate<\/code><\/li>\n\n\n\n<li><code>caption-side<\/code>: \u30c6\u30fc\u30d6\u30eb\u306e\u30bf\u30a4\u30c8\u30eb\u306e\u4f4d\u7f6e\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u30bf\u30a4\u30c8\u30eb\u304c\u30c6\u30fc\u30d6\u30eb\u306e\u4e0a\u307e\u305f\u306f\u4e0b\u306b\u3042\u308b\u3053\u3068\u3092\u793a\u3059\u5834\u6240\u3068\u3001\u30bf\u30a4\u30c8\u30eb\u304c\u30c6\u30fc\u30d6\u30eb\u306e\u5de6\u5074\u307e\u305f\u306f\u53f3\u5074\u306b\u3042\u308b\u3053\u3068\u3092\u793a\u3059\u5834\u6240\u3068\u5834\u6240\u3001\u3001\u3001,\u3067\u304d\u307e\u3059\u3002<code>top<\/code><code>bottom<\/code><code>left<\/code><code>right<\/code><code>top<\/code><code>bottom<\/code><code>left<\/code><code>right<\/code><\/li>\n\n\n\n<li><code>empty-cells<\/code>: \u7a7a\u306e\u30bb\u30eb\u306e\u52d5\u4f5c\u3092\u5b9a\u7fa9\u3057\u307e\u3059 (\u30c7\u30d5\u30a9\u30eb\u30c8)\u3001\u3001\u3002 [\u7a7a\u306e\u30bb\u30eb] \u306b\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30bb\u30eb\u306f\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<code>show<\/code><code>hide<\/code><code>inherit<\/code><code>hide<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\nth, td {\n  padding: 8px;\n  text-align: left;\n  border-bottom: 1px solid #ddd;\n}\n\ntr:hover {\n  background-color: #f5f5f5;\n}\n\nth {\n  background-color: #4CAF50;\n  color: white;\n}\n\n.caption {\n  caption-side: top;\n}\n\n.empty-cells {\n  empty-cells: hide;\n}\n<\/code><\/pre>\n\n\n\n<p>CSS \u3092\u4f7f\u7528\u3057\u3066\u5883\u754c\u7dda\u3092\u4f5c\u6210\u3059\u308b\u5834\u5408\u3001\u4e00\u822c\u7684\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>border<\/code>: \u8981\u7d20\u306e\u5883\u754c\u7dda\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u305f\u3068\u3048\u3070\u3001\u5883\u754c\u7dda\u306e\u5e45\u304c 1 \u30d4\u30af\u30bb\u30eb\u3001\u5883\u754c\u7dda\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u5857\u308a\u3064\u3076\u3057\u3001\u8272\u304c\u9ed2\u3067\u3042\u308b\u3053\u3068\u3092\u793a\u3059\u5f62\u5f0f\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<code>width style color<\/code><code>border: 1px solid black;<\/code><\/li>\n\n\n\n<li><code>border-width<\/code>: \u8981\u7d20\u306e\u5883\u754c\u7dda\u306e\u5e45\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u7279\u5b9a\u306e\u6570\u5024\u307e\u305f\u306f\u30ad\u30fc\u30ef\u30fc\u30c9 (, , \u306a\u3069) \u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<code>thin<\/code><code>medium<\/code><code>thick<\/code><\/li>\n\n\n\n<li><code>border-style<\/code>: \u8981\u7d20\u306e\u5883\u754c\u7dda\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002(\u5b9f\u7dda)\u3001(\u70b9\u7dda)\u3001(\u7834\u7dda)\u3001(\u4e8c\u91cd\u5b9f\u7dda)\u3001(3D \u7acb\u4f53\u52b9\u679c)\u306a\u3069\u3067\u3059\u3002<code>solid<\/code><code>dotted<\/code><code>dashed<\/code><code>double<\/code><code>groove<\/code><\/li>\n\n\n\n<li><code>border-color<\/code>: \u8981\u7d20\u306e\u5883\u754c\u7dda\u306e\u8272\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>border-radius<\/code>: \u8981\u7d20\u306e\u5883\u754c\u7dda\u30d5\u30a3\u30ec\u30c3\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u7279\u5b9a\u306e\u6570\u5024\u307e\u305f\u306f\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059 (\u305f\u3068\u3048\u3070\u3001\u5883\u754c\u7dda\u306e\u89d2\u306e\u534a\u5f84\u304c 10 \u30d4\u30af\u30bb\u30eb\u3067\u3042\u308b\u3053\u3068\u3092\u793a\u3057\u307e\u3059)\u3002<code>border-radius: 10px;<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>div {\n  border: 1px solid black;\n  border-width: 2px;\n  border-style: dashed;\n \n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u3001\u4f59\u767d\u3001\u304a\u3088\u3073\u30d1\u30c7\u30a3\u30f3\u30b0\u306f\u3001\u8981\u7d20\u306e\u5883\u754c\u3001\u9593\u9694\u3001\u304a\u3088\u3073\u5185\u90e8\u7a7a\u9593\u3092\u8abf\u6574\u3059\u308b\u305f\u3081\u306b\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30dc\u30c3\u30af\u30b9 \u30e2\u30c7\u30eb \u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6982\u8981<\/h3>\n\n\n\n<p>\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u306f\u8981\u7d20\u306e\u5916\u5074\u306e\u7dda\u3067\u3042\u308a\u3001\u5883\u754c\u7dda\u3068\u306f\u7570\u306a\u308a\u3001\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u306f\u30b9\u30da\u30fc\u30b9\u3092\u5360\u6709\u305b\u305a\u3001\u8981\u7d20\u306e\u5916\u5074\u306e\u8981\u7d20\u306b\u3001\u3088\u308a\u660e\u78ba\u306a\u8996\u899a\u7684\u306a\u5883\u754c\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u8f6e\u5ed3\u53ef\u4ee5\u7528\u4ee5\u4e0b\u5c5e\u6027\u8fdb\u884c\u63a7\u5236\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>outline-style<\/code>\uff1a\u8f6e\u5ed3\u7ebf\u6761\u7684\u6837\u5f0f\uff08solid\uff0cdotted\uff0cdashed\uff0cdouble\uff0cgroove\uff0cridge\uff0cinset\uff0coutset\uff0cnone\u7b49\uff09<\/li>\n\n\n\n<li><code>outline-color<\/code>\uff1a\u8f6e\u5ed3\u7ebf\u6761\u7684\u989c\u8272<\/li>\n\n\n\n<li><code>outline-width<\/code>\uff1a\u8f6e\u5ed3\u7ebf\u6761\u7684\u5bbd\u5ea6<\/li>\n\n\n\n<li><code>outline-offset<\/code>\uff1a\u8f6e\u5ed3\u7ebf\u6761\u4e0e\u5143\u7d20\u7684\u95f4\u8ddd<\/li>\n<\/ul>\n\n\n\n<p>\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>\/* \u7ea2\u8272\u5b9e\u7ebf\u8f6e\u5ed3 *\/\noutline: 1px solid red;\n\n\/* \u7ea2\u8272\u865a\u7ebf\u8f6e\u5ed3 *\/\noutline: 2px dashed red;\n\n\/* \u84dd\u8272\u53cc\u7ebf\u8f6e\u5ed3\uff0c\u5916\u8fb9\u8ddd\u4e3a10px\uff0c\u8f6e\u5ed3\u4e0e\u5143\u7d20\u4e4b\u95f4\u67095px\u7684\u95f4\u8ddd *\/\noutline: 3px double blue;\noutline-offset: 5px;\nmargin: 10px;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u5916\u8fb9\u8ddd\uff08margin\uff09<\/h3>\n\n\n\n<p>\u5916\u8fb9\u8ddd\uff08margin\uff09\u662f\u5143\u7d20\u548c\u5143\u7d20\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u53ef\u4ee5\u7528\u4e8e\u8c03\u6574\u5143\u7d20\u7684\u5e03\u5c40\u548c\u95f4\u8ddd\u3002\u5916\u8fb9\u8ddd\u6709\u4ee5\u4e0b\u51e0\u4e2a\u5c5e\u6027\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>margin-top<\/code>\uff1a\u4e0a\u5916\u8fb9\u8ddd<\/li>\n\n\n\n<li><code>margin-right<\/code>\uff1a\u53f3\u5916\u8fb9\u8ddd<\/li>\n\n\n\n<li><code>margin-bottom<\/code>\uff1a\u4e0b\u5916\u8fb9\u8ddd<\/li>\n\n\n\n<li><code>margin-left<\/code>\uff1a\u5de6\u5916\u8fb9\u8ddd<\/li>\n\n\n\n<li><code>margin<\/code>\uff1a\u4e00\u6b21\u6027\u8bbe\u7f6e\u56db\u4e2a\u65b9\u5411\u7684\u5916\u8fb9\u8ddd<\/li>\n<\/ul>\n\n\n\n<p>\u5916\u8fb9\u8ddd\u53ef\u4ee5\u6709\u8d1f\u503c\uff0c\u8868\u793a\u5c06\u5143\u7d20\u5411\u76f8\u5e94\u65b9\u5411\u79fb\u52a8\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>\/* \u5143\u7d20\u5de6\u79fb10px *\/\nmargin-left: -10px;\n\n\/* \u4e0a\u4e0b\u5916\u8fb9\u8ddd\u90fd\u4e3a20px\uff0c\u5de6\u53f3\u5916\u8fb9\u8ddd\u4e3a\u81ea\u52a8 *\/\nmargin: 20px auto;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u5fc3\u5730<\/h3>\n\n\n\n<p>\u30d1\u30c7\u30a3\u30f3\u30b0\u306f\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u9818\u57df\u3068\u8981\u7d20\u306e\u5883\u754c\u3068\u306e\u9593\u306e\u8ddd\u96e2\u3067\u3042\u308a\u3001\u8981\u7d20\u5185\u306e\u30b9\u30da\u30fc\u30b9\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8abf\u6574\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 \u4eba\u53e3\u306b\u306f\u6b21\u306e\u7279\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>padding-top<\/code>:\u30a2\u30c3\u30d7\u30d1\u30c7\u30a3\u30f3\u30b0<\/li>\n\n\n\n<li><code>padding-right<\/code>:\u53f3\u30d1\u30c7\u30a3\u30f3\u30b0<\/li>\n\n\n\n<li><code>padding-bottom<\/code>: \u30d1\u30c7\u30a3\u30f3\u30b0\u30c0\u30a6\u30f3<\/li>\n\n\n\n<li><code>padding-left<\/code>: \u5de6\u30d1\u30c7\u30a3\u30f3\u30b0<\/li>\n\n\n\n<li><code>padding<\/code>:\u5857\u308a\u3064\u3076\u3057\u3092\u4e00\u5ea6\u306b4\u65b9\u5411\u306b\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<p>\u5857\u308a\u3064\u3076\u3057\u3092\u8ca0\u306b\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u305a\u3001\u5857\u308a\u3064\u3076\u3057\u306e\u5024\u306f 1 \u3064\u4ee5\u4e0a\u306e\u6570\u5024\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>\/* \u4e0a\u4e0b\u586b\u5145\u4e3a10px\uff0c\u5de6\u53f3\u586b\u5145\u4e3a20px *\/\npadding: 10px 20px;\n\n\/* \u56db\u4e2a\u65b9\u5411\u7684\u586b\u5145\u90fd\u4e3a10px *\/\npadding: 10px;\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u3067\u306f\u3001\u30b0\u30eb\u30fc\u30d7\u5316\u3068\u5165\u308c\u5b50\u306f\u3001\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306e\u6574\u7406\u3092\u5bb9\u6613\u306b\u3057\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u4fdd\u5b88\u3092\u5bb9\u6613\u306b\u3059\u308b 2 \u3064\u306e\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u69cb\u6587\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0<\/h2>\n\n\n\n<p>\u30b0\u30eb\u30fc\u30d7\u5316\u3068\u306f\u3001\u8907\u6570\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u30b3\u30f3\u30de\u3067\u533a\u5207\u3063\u3066\u540c\u3058\u30b9\u30bf\u30a4\u30eb\u5ba3\u8a00\u306b\u30b0\u30eb\u30fc\u30d7\u5316\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u8907\u6570\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u540c\u3058\u30b9\u30bf\u30a4\u30eb \u30eb\u30fc\u30eb\u306b\u540c\u6642\u306b\u9069\u7528\u3057\u3066\u3001\u30b3\u30fc\u30c9\u306e\u91cd\u8907\u3092\u56de\u907f\u3067\u304d\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>h1, h2, h3 {\n  color: red;\n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306f\u3001h1\u3001h2\u3001\u304a\u3088\u3073h3\u8981\u7d20\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8d64\u3068\u592a\u5b57\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30cd\u30b9\u30c8 \u3055\u308c\u305f<\/h2>\n\n\n\n<p>CSS\u3067\u306e\u30cd\u30b9\u30c8\u3068\u306f\u3001\u3042\u308b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u5225\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u5185\u306b\u30cd\u30b9\u30c8\u3059\u308b\u3053\u3068\u3092\u6307\u3057\u307e\u3059\u3002 \u3053\u306e\u30cd\u30b9\u30c8\u3055\u308c\u305f\u69cb\u9020\u306b\u3088\u308a\u3001CSS\u306e\u8aad\u307f\u53d6\u308a\u3068\u4fdd\u5b88\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.container {\n  width: 960px;\n  margin: 0 auto;\n  \n  .header {\n    background-color: #f5f5f5;\n    height: 100px;\n    text-align: center;\n    \n    h1 {\n      font-size: 2em;\n      line-height: 100px;\n    }\n  }\n  \n  .content {\n    background-color: #fff;\n    padding: 20px;\n    \n    p {\n      font-size: 1.2em;\n      line-height: 1.5;\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001.container \u30bb\u30ec\u30af\u30bf\u30fc\u306b\u306f .header \u3068 .content \u306e 1 \u3064\u306e\u5b50\u8981\u7d20\u30bb\u30ec\u30af\u30bf\u30fc\u304c\u542b\u307e\u308c\u3001.header \u30bb\u30ec\u30af\u30bf\u30fc\u306b\u306f\u5b50\u8981\u7d20\u30bb\u30ec\u30af\u30bf\u30fc h&lt;&gt; \u304c\u542b\u307e\u308c\u3001.content \u30bb\u30ec\u30af\u30bf\u30fc\u306b\u306f\u5b50\u8981\u7d20\u30bb\u30ec\u30af\u30bf\u30fc p \u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u5165\u308c\u5b50\u306b\u306a\u3063\u305f\u69cb\u9020\u306b\u3088\u308a\u3001\u7279\u306b\u5927\u898f\u6a21\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u306e\u69cb\u9020\u304c\u3059\u3063\u304d\u308a\u3068\u8aad\u307f\u3084\u3059\u304f\u306a\u308a\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u7af6\u5408\u3092\u6e1b\u3089\u3057\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u30cd\u30b9\u30c8\u30ec\u30d9\u30eb\u304c\u6df1\u3059\u304e\u308b\u3068\u3001CSS\u30d5\u30a1\u30a4\u30eb\u306e\u30b5\u30a4\u30ba\u3068\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u901f\u5ea6\u304c\u5411\u4e0a\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001\u9069\u5ea6\u306b\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u306e\u30b5\u30a4\u30ba\u306f\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u5c5e\u6027\u3067\u3042\u308a\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30b5\u30a4\u30ba\u306e\u5358\u4f4d\u306f\u30d4\u30af\u30bb\u30eb(px)\u3001\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8(%)\u3001\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5358\u4f4d(vw\u3001vh)\u306a\u3069\u3067\u3059\u3002 CSS\u306e\u30b5\u30a4\u30ba\u8a2d\u5b9a\u3092\u8a73\u3057\u304f\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d4\u30af\u30bb\u30eb (px) \u30d4\u30af\u30bb\u30eb\u306f\u3001CSS \u306e\u30b5\u30a4\u30ba\u306e\u6700\u3082\u57fa\u672c\u7684\u306a\u5358\u4f4d\u3067\u3042\u308a\u3001\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30fc\u304c\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u6700\u5c0f\u5358\u4f4d\u3067\u3059\u3002 CSS \u3067\u306f\u3001\u30d4\u30af\u30bb\u30eb\u306f\u8981\u7d20\u306e\u7279\u5b9a\u306e\u5e45\u3068\u9ad8\u3055\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>div {\n  width: 200px;\n  height: 100px;\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u5272\u5408 (%) \u5272\u5408\u306f\u3001\u89aa\u8981\u7d20\u306e\u5bf8\u6cd5\u306b\u5bfe\u3059\u308b\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3067\u3059\u3002 \u305f\u3068\u3048\u3070\u3001\u8981\u7d20\u306e\u5e45\u304c 50% \u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001\u305d\u306e\u5e45\u306f\u89aa\u8981\u7d20\u306e\u5e45\u306e\u534a\u5206\u306b\u7b49\u3057\u304f\u306a\u308a\u307e\u3059\u3002 \u6b21\u306b\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.parent {\n  width: 400px;\n  height: 200px;\n}\n\n.child {\n  width: 50%;\n  height: 50%;\n  background-color: red;\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"parent\"&gt;\n  &lt;div class=\"child\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5358\u4f4d(vw\u3001vh) \u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5358\u4f4d\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u3092\u57fa\u6e96\u306b\u3057\u3066\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002 VW \u5358\u4f4d\u306f\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u5e45\u306b\u5bfe\u3059\u308b\u6bd4\u7387\u3092\u8868\u3057\u3001VH \u5358\u4f4d\u306f\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u9ad8\u3055\u306b\u5bfe\u3059\u308b\u6bd4\u7387\u3092\u8868\u3057\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>div {\n  width: 50vw;\n  height: 50vh;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306fCSS\u306e\u30b5\u30a4\u30ba\u306e\u57fa\u672c\u7684\u306a\u4f7f\u7528\u6cd5\u3067\u3042\u308a\u3001\u7570\u306a\u308b\u30b5\u30a4\u30ba\u306e\u5358\u4f4d\u306f\u5b9f\u969b\u306e\u30cb\u30fc\u30ba\u306b\u5fdc\u3058\u3066\u9069\u5207\u306a\u5358\u4f4d\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002 \u5b9f\u969b\u306e\u958b\u767a\u3067\u306f\u3001\u8981\u7d20\u306e\u5e45\u3092\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3067\u8a2d\u5b9a\u3057\u305f\u308a\u3001\u30d4\u30af\u30bb\u30eb\u5358\u4f4d\u3067\u30d1\u30c7\u30a3\u30f3\u30b0\u3057\u305f\u308a\u3059\u308b\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30b5\u30a4\u30ba\u5358\u4f4d\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u8981\u7d20\u306e\u8868\u793a\u30bf\u30a4\u30d7\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u5024\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>display<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>block<\/code>: \u8981\u7d20\u3092\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u306e\u8981\u7d20\u3068\u3057\u3066\u3001\u72ec\u81ea\u306e\u884c\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002 \u5e45\u306e\u65e2\u5b9a\u5024\u306f\u89aa\u8981\u7d20\u306e 100% \u3067\u3001\u9ad8\u3055\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u3088\u3063\u3066\u7570\u306a\u308a\u3001\u6b21\u306e\u3088\u3046\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3001\u3001\u3001.<code>width<\/code><code>height<\/code><code>margin<\/code><code>padding<\/code><\/li>\n\n\n\n<li><code>inline<\/code>: \u8981\u7d20\u3092\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u3068\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3001\u5e45\u306f\u65e2\u5b9a\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u3088\u3063\u3066\u5f15\u304d\u4f38\u3070\u3055\u308c\u3001\u9ad8\u3055\u306f\u30c6\u30ad\u30b9\u30c8\u884c\u306e\u9ad8\u3055\u306b\u3088\u3063\u3066\u6c7a\u307e\u308a\u307e\u3059\u3002 \u3001\u3001\u3001\u3001\u3001\u5c5e\u6027\u306f\u8981\u7d20\u306b\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002<code>width<\/code><code>height<\/code><code>margin-top<\/code><code>margin-bottom<\/code><code>padding-top<\/code><code>padding-bottom<\/code><\/li>\n\n\n\n<li><code>inline-block<\/code>: \u8981\u7d20\u3092\u30a4\u30f3\u30e9\u30a4\u30f3 \u30d6\u30ed\u30c3\u30af \u30ec\u30d9\u30eb\u306e\u8981\u7d20\u3068\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3001\u5e45\u3068\u9ad8\u3055\u306f\u6307\u5b9a\u3067\u304d\u307e\u3059\u304c\u3001\u5225\u306e\u884c\u306b\u6307\u5b9a\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002 \u305d\u306e\u4ed6\u306e\u7279\u6027\u306f\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u3068\u540c\u3058\u3067\u3059\u3002<\/li>\n\n\n\n<li><code>none<\/code>: \u30da\u30fc\u30b8\u9818\u57df\u3092\u5360\u6709\u305b\u305a\u306b\u30da\u30fc\u30b8\u304b\u3089\u8981\u7d20\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>flex<\/code>: \u67d4\u8edf\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u305f\u3081\u306b\u8981\u7d20\u3092\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u30b3\u30f3\u30c6\u30ca\u3068\u3057\u3066\u8868\u793a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>grid<\/code>: \u8981\u7d20\u3092\u30b0\u30ea\u30c3\u30c9 \u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b0\u30ea\u30c3\u30c9 \u30b3\u30f3\u30c6\u30ca\u30fc\u3068\u3057\u3066\u8868\u793a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>table<\/code>: \u8981\u7d20\u3092\u30c6\u30fc\u30d6\u30eb\u3068\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3001\u30c6\u30fc\u30d6\u30eb\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><code>table-cell<\/code>: \u8981\u7d20\u3092\u30c6\u30fc\u30d6\u30eb \u30bb\u30eb\u3068\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u306b\u306f\u3001\u901a\u5e38\u3001\u89aa\u8981\u7d20\u3092 or \u306b\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>display: table<\/code><code>display: table-row<\/code><\/li>\n\n\n\n<li><code>table-row<\/code>: \u8981\u7d20\u3092\u30c6\u30fc\u30d6\u30eb\u884c\u3068\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u306b\u306f\u3001\u901a\u5e38\u3001\u89aa\u8981\u7d20\u3092 \u306b\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>display: table<\/code><\/li>\n<\/ul>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4e00\u822c\u7684\u306a\u5024\u306b\u52a0\u3048\u3066\u3001\u3001\u306a\u3069\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u7406\u89e3\u3057\u3066\u4f7f\u7528\u3067\u304d\u308b\u4ed6\u306e\u5024\u304c\u3042\u308a\u307e\u3059\u3002<code>display<\/code><code>list-item<\/code><code>run-in<\/code><code>inherit<\/code><\/p>\n\n\n\n<p>\u5b9f\u969b\u306e\u4f7f\u7528\u3067\u306f\u3001\u5c5e\u6027\u3092\u67d4\u8edf\u306b\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u3055\u307e\u3056\u307e\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u65b9\u6cd5\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<code>display<\/code><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u3067\u306e\u914d\u7f6e\u3068\u306f\u3001HTML\u8981\u7d20\u306e\u914d\u7f6e\u3068\u914d\u7f6e\u65b9\u6cd5\u3092\u6307\u3057\u307e\u3059\u3002 \u4e3b\u306a\u30bf\u30fc\u30b2\u30c6\u30a3\u30f3\u30b0\u65b9\u6cd5\u306f 3 \u3064\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u9759\u7684\u914d\u7f6e (\u4f4d\u7f6e: \u9759\u7684) \u9759\u7684\u914d\u7f6e\u306f\u3001\u3059\u3079\u3066\u306e HTML \u8981\u7d20\u306e\u65e2\u5b9a\u306e\u914d\u7f6e\u65b9\u6cd5\u3067\u3059\u3002 \u9759\u7684\u914d\u7f6e\u3067\u306f\u3001\u8981\u7d20\u306f\u901a\u5e38\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30d5\u30ed\u30fc\u306b\u914d\u7f6e\u3055\u308c\u3001\u4e0a\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u3001\u304a\u3088\u3073 z \u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u5c5e\u6027\u306f\u7121\u8996\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4f4d\u7f6e: \u76f8\u5bfe\u4f4d\u7f6e\u306f\u3001\u8981\u7d20\u81ea\u4f53\u306e\u5143\u306e\u4f4d\u7f6e\u306b\u5bfe\u3059\u308b\u76f8\u5bfe\u7684\u306a\u52d5\u304d\u3067\u3059\u3002 \u76f8\u5bfe\u914d\u7f6e\u3067\u306f\u3001\u8981\u7d20\u306e\u4f4d\u7f6e\u306f\u3001\u5143\u306e\u4f4d\u7f6e\u3092\u57fa\u6e96\u3068\u3057\u305f\u4e0a\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u3088\u3063\u3066\u8a08\u7b97\u3055\u308c\u307e\u3059\u3002 \u76f8\u5bfe\u914d\u7f6e\u306b\u3088\u3063\u3066\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u6d41\u308c\u306f\u5909\u66f4\u3055\u308c\u305a\u3001\u4ed6\u306e\u8981\u7d20\u306e\u4f4d\u7f6e\u306f\u5f71\u97ff\u3092\u53d7\u3051\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li>\u7d76\u5bfe\u914d\u7f6e (\u4f4d\u7f6e: \u7d76\u5bfe\u914d\u7f6e) \u7d76\u5bfe\u914d\u7f6e\u306f\u3001\u89aa\u8981\u7d20\u3092\u57fa\u6e96\u306b\u3057\u3066\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002 \u7d76\u5bfe\u914d\u7f6e\u3067\u306f\u3001\u8981\u7d20\u306f\u4ed6\u306e\u8981\u7d20\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u3053\u3068\u306a\u304f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30d5\u30ed\u30fc\u304b\u3089\u524a\u9664\u3055\u308c\u307e\u3059\u3002 \u8981\u7d20\u306e\u4f4d\u7f6e\u306f\u3001\u4e0a\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u306e\u5c5e\u6027\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u6c7a\u5b9a\u3055\u308c\u3001\u89aa\u8981\u7d20\u306e\u4f4d\u7f6e\u5c5e\u6027\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u3001\u7d76\u5bfe\u4f4d\u7f6e\u306f\u30dc\u30c7\u30a3\u8981\u7d20\u306b\u5bfe\u3057\u3066\u76f8\u5bfe\u7684\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u7279\u5225\u306a\u914d\u7f6e\u65b9\u6cd5\u3082\u3042\u308a\u307e\u3059 &#8211; position: fixed\u306f\u30d6\u30e9\u30a6\u30b6\u30a6\u30a3\u30f3\u30c9\u30a6\u306b\u5bfe\u3057\u3066\u76f8\u5bfe\u7684\u306b\u914d\u7f6e\u3055\u308c\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u304c\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u8981\u7d20\u306f\u79fb\u52d5\u3057\u307e\u305b\u3093\u3002 \u56fa\u5b9a\u914d\u7f6e\u306f\u3001\u4e0a\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u306e\u5c5e\u6027\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u308a\u3001\u8981\u7d20\u306e\u4f4d\u7f6e\u3092\u6c7a\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u306b\u3001CSS\u306e\u914d\u7f6e\u5c5e\u6027\u306f\u3001\u3088\u308a\u8907\u96d1\u306a\u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u306eHTML\u8981\u7d20\u3092\u6b63\u78ba\u306b\u914d\u7f6e\u304a\u3088\u3073\u914d\u7f6e\u3059\u308b\u305f\u3081\u306b\u975e\u5e38\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u306e overflow \u30d7\u30ed\u30d1\u30c6\u30a3\u3068 float \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u3068\u30d5\u30ed\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u51e6\u7406\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc<\/li>\n<\/ol>\n\n\n\n<p>\u30b9\u30af\u30ed\u30fc\u30eb \u30d0\u30fc\u306f\u3001\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30b3\u30f3\u30c6\u30ca\u30fc\u306e\u30b5\u30a4\u30ba\u3092\u8d85\u3048\u308b\u3068\u8868\u793a\u3055\u308c\u3001overflow \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u306e\u51e6\u7406\u65b9\u6cd5\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc:\u8868\u793a:\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001\u8981\u7d20\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u30b3\u30f3\u30c6\u30ca\u3092\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u3057\u305f\u3068\u304d\u306b\u30b3\u30f3\u30c6\u30ca\u306e\u5916\u5074\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc:\u975e\u8868\u793a:\u8981\u7d20\u306e\u5185\u5bb9\u306f\u30b3\u30f3\u30c6\u30ca\u3092\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u3059\u308b\u3068\u30af\u30ea\u30c3\u30d7\u3055\u308c\u3001\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u306e\u5185\u5bb9\u306f\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li>\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc:\u30b9\u30af\u30ed\u30fc\u30eb:\u8981\u7d20\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30b3\u30f3\u30c6\u30ca\u3092\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u3059\u308b\u3068\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u304c\u8868\u793a\u3055\u308c\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>overflow: auto: \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u306f\u3001\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30b3\u30f3\u30c6\u30ca\u3092\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u3057\u305f\u3068\u304d\u306b\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u304c\u5fc5\u8981\u306a\u5834\u5408\u306b\u306e\u307f\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u6d6e\u304f<\/li>\n<\/ol>\n\n\n\n<p>float \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u901a\u5e38\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u30d5\u30ed\u30fc\u304b\u3089\u8981\u7d20\u3092\u30c7\u30bf\u30c3\u30c1\u3057\u3001\u305d\u306e\u89aa\u8981\u7d20\u5185\u306e\u7279\u5b9a\u306e\u4f4d\u7f6e\u306b\u6d6e\u52d5\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u753b\u50cf\u306e\u5468\u308a\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u6298\u308a\u8fd4\u3057\u305f\u308a\u3001\u8907\u6570\u5217\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u73fe\u3057\u305f\u308a\u3059\u308b\u305f\u3081\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>float: left: \u8981\u7d20\u306f\u5de6\u306b\u6d6e\u52d5\u3057\u3001\u5de6\u5074\u306f\u4ed6\u306e\u5de6\u6d6e\u52d5\u8981\u7d20\u3068\u6574\u5217\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>float: right: \u8981\u7d20\u306f\u53f3\u306b\u6d6e\u52d5\u3057\u3001\u53f3\u5074\u306f\u4ed6\u306e\u53f3\u6d6e\u904a\u8981\u7d20\u3068\u6574\u5217\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>float: none: \u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3067\u3001\u8981\u7d20\u306f\u6d6e\u52d5\u5c0f\u6570\u70b9\u6570\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u6ce8: float \u5c5e\u6027\u306f\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3068\u4f4d\u7f6e\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u305f\u3081\u3001float \u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u89aa\u8981\u7d20\u3068\u5144\u5f1f\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3068\u4f4d\u7f6e\u306e\u95a2\u4fc2\u3001\u304a\u3088\u3073 float \u3092\u30af\u30ea\u30a2\u3059\u308b\u52b9\u679c\u306b\u6ce8\u610f\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u3067\u306e\u914d\u7f6e\u3068\u306f\u3001\u4ed6\u306e\u8981\u7d20\u307e\u305f\u306f\u30da\u30fc\u30b8\u306e\u7aef\u306b\u5bfe\u3057\u3066\u8981\u7d20\u304c\u30da\u30fc\u30b8\u4e0a\u3067\u3069\u306e\u3088\u3046\u306b\u914d\u7f6e\u3055\u308c\u308b\u304b\u3092\u6307\u3057\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a\u914d\u7f6e\u306b\u306f\u3001\u6c34\u5e73\u65b9\u5411\u3068\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u7684\u306a CSS \u914d\u7f6e\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u4f7f\u7528\u65b9\u6cd5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u6c34\u5e73\u65b9\u5411\u306e\u914d\u7f6e<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c6\u30ad\u30b9\u30c8\u6574\u5217\u30d7\u30ed\u30d1\u30c6\u30a3: \u30c6\u30ad\u30b9\u30c8\u3092\u6c34\u5e73\u65b9\u5411\u306b\u6574\u5217\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u5024\u306b\u306f\u3001\u5de6\u3001\u53f3\u3001\u4e2d\u592e\u3001\u4e21\u7aef\u63c3\u3048\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30de\u30fc\u30b8\u30f3\u5c5e\u6027: \u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u306e\u8981\u7d20\u3092\u6c34\u5e73\u65b9\u5411\u306b\u6574\u5217\u3055\u305b\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 auto \u5024\u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u3092\u4e2d\u592e\u63c3\u3048\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5782\u76f4\u65b9\u5411\u306e\u6574\u5217\u30d7\u30ed\u30d1\u30c6\u30a3: \u884c\u5185\u306e\u8981\u7d20\u307e\u305f\u306f\u8868\u306e\u30bb\u30eb\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5782\u76f4\u65b9\u5411\u306b\u6574\u5217\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u5024\u306b\u306f\u3001\u4e0a\u3001\u4e2d\u592e\u3001\u4e0b\u3001\u304a\u3088\u3073\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>line-height \u30d7\u30ed\u30d1\u30c6\u30a3: \u884c\u306e\u9ad8\u3055\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u306e\u8981\u7d20\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u6574\u5217\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u8868\u793a: \u30d5\u30ec\u30c3\u30af\u30b9\u5c5e\u6027: \u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u8981\u7d20\u3092\u6574\u5217\u3055\u305b\u307e\u3059\u3002 \u9805\u76ee\u306e\u6574\u5217\u5c5e\u6027\u3068\u5185\u5bb9\u63c3\u3048\u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u3068\u6c34\u5e73\u65b9\u5411\u306e\u914d\u7f6e\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4e0a\u8a18\u306fCSS\u306e\u4e00\u822c\u7684\u306a\u30a2\u30e9\u30a4\u30e1\u30f3\u30c8\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u4f7f\u7528\u6cd5\u3067\u3042\u308a\u3001\u7279\u5b9a\u306e\u72b6\u6cc1\u306b\u5fdc\u3058\u3066\u30a2\u30e9\u30a4\u30e1\u30f3\u30c8\u52b9\u679c\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306b\u9069\u5207\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u306e\u7d44\u307f\u5408\u308f\u305b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u8907\u6570\u306e\u5c5e\u6027\u306b\u57fa\u3065\u3044\u3066\u8981\u7d20\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002 \u7d50\u5408\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u8907\u6570\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u8981\u7d20\u3092\u3088\u308a\u6b63\u78ba\u306b\u9078\u629e\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n\n\n\n<p>CSS \u306e\u4e00\u822c\u7684\u306a\u7d44\u307f\u5408\u308f\u305b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5b50\u5b6b\u30bb\u30ec\u30af\u30bf\u30fc<\/li>\n<\/ol>\n\n\n\n<p>\u5b50\u5b6b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u7279\u5b9a\u306e\u7956\u5148\u3092\u6301\u3064\u8981\u7d20\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002 \u30b9\u30da\u30fc\u30b9\u3092\u4f7f\u7528\u3057\u3066\u8981\u7d20\u306e\u7956\u5148\u3092\u533a\u5207\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u6b21\u306e CSS \u30b3\u30fc\u30c9\u306f\u3001\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u5b50\u5b6b\u306b\u30af\u30e9\u30b9\u3092\u6301\u3064\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002<code>&lt;p&gt;<\/code><code>.example<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>p .example {\n  \/* styles here *\/\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u30b5\u30d6\u30bb\u30ec\u30af\u30bf<\/li>\n<\/ol>\n\n\n\n<p>\u30b5\u30d6\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u8981\u7d20\u306e\u76f4\u63a5\u306e\u5b50\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002 \u5927\u306a\u308a\u8a18\u53f7 () \u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u3068\u5b50\u8981\u7d20\u3092\u533a\u5207\u308a\u307e\u3059\u3002<code>&gt;<\/code><\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u6b21\u306e CSS \u30b3\u30fc\u30c9\u306f\u3001\u3059\u3079\u3066\u306e\u76f4\u63a5\u306e\u5b50\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002<code>&lt;li&gt;<\/code><code>&lt;ul&gt;<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>ul &gt; li {\n  \/* styles here *\/\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30cd\u30a4\u30d0\u30fc\u5144\u5f1f\u30bb\u30ec\u30af\u30bf\u30fc<\/li>\n<\/ol>\n\n\n\n<p>\u96a3\u63a5\u5144\u5f1f\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u6307\u5b9a\u3055\u308c\u305f\u8981\u7d20\u306e\u76f4\u5f8c\u306e\u5144\u5f1f\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002 \u30d7\u30e9\u30b9\u8a18\u53f7 () \u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u3092\u305d\u306e\u5f8c\u306e\u5144\u5f1f\u304b\u3089\u5206\u96e2\u3057\u307e\u3059\u3002<code>+<\/code><\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u6b21\u306e CSS \u30b3\u30fc\u30c9\u306f\u3001\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u5f8c\u306b\u6700\u521d\u306e\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002<code>&lt;h2&gt;<\/code><code>&lt;p&gt;<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>h2 + p {\n  \/* styles here *\/\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u30e6\u30cb\u30d0\u30fc\u30b5\u30eb\u30d6\u30e9\u30b6\u30fc\u30bb\u30ec\u30af\u30bf\u30fc<\/li>\n<\/ol>\n\n\n\n<p>\u30e6\u30cb\u30d0\u30fc\u30b5\u30eb\u5144\u5f1f\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u6307\u5b9a\u3055\u308c\u305f\u8981\u7d20\u306e\u5f8c\u306e\u3059\u3079\u3066\u306e\u5144\u5f1f\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002 \u30c1\u30eb\u30c0 () \u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u3092\u305d\u306e\u5f8c\u306e\u5144\u5f1f\u8981\u7d20\u304b\u3089\u5206\u96e2\u3057\u307e\u3059\u3002<code>~<\/code><\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u6b21\u306e CSS \u30b3\u30fc\u30c9\u306f\u3001\u3059\u3079\u3066\u306e\u8981\u7d20\u306e\u5f8c\u306b\u3059\u3079\u3066\u306e\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002<code>&lt;h2&gt;<\/code><code>&lt;p&gt;<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>h2 ~ p {\n  \/* styles here *\/\n}\n<\/code><\/pre>\n\n\n\n<p>\u7d44\u307f\u5408\u308f\u305b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3059\u308b\u8981\u7d20\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u9078\u629e\u3067\u304d\u3001\u30b3\u30fc\u30c9\u3092\u3088\u308a\u9069\u5207\u306b\u7ba1\u7406\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS\u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u306e\u8a73\u7d30\u3092\u6559\u3048\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>CSS\u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u306f\u3001\u7279\u5b9a\u306e\u6761\u4ef6\u4e0b\u3067\u8981\u7d20\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306e\u30bb\u30ec\u30af\u30bf\u3067\u3042\u308a\u3001\u7279\u5b9a\u306e\u72b6\u614b\u307e\u305f\u306f\u4f4d\u7f6e\u3067\u306e\u30b9\u30bf\u30a4\u30eb\u306b\u57fa\u3065\u3044\u3066\u8981\u7d20\u306e\u5916\u89b3\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002 \u4e00\u822c\u7684\u306a\u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>:hover: \u30e6\u30fc\u30b6\u30fc\u304c\u8981\u7d20\u306e\u4e0a\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u7f6e\u3044\u305f\u3068\u304d\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:active: \u30e6\u30fc\u30b6\u30fc\u304c\u8981\u7d20\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b (\u30bf\u30c3\u30d7) \u3057\u305f\u3068\u304d\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:focus: \u8981\u7d20\u304c\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u53d6\u5f97\u3057\u305f\u3068\u304d\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:visited: \u8a2a\u554f\u3057\u305f\u30ea\u30f3\u30af\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:nth-child(n): \u6307\u5b9a\u3057\u305f\u89aa\u8981\u7d20\u306e\u4e0b\u306b\u3042\u308b n \u756a\u76ee\u306e\u5b50\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:nth-of-type(n): \u6307\u5b9a\u3057\u305f\u578b\u306e n \u756a\u76ee\u306e\u5b50\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:first-child: \u6700\u521d\u306e\u5b50\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:last-child: \u6700\u5f8c\u306e\u5b50\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:not(\u30bb\u30ec\u30af\u30bf\u30fc): \u6307\u5b9a\u3057\u305f\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u4e00\u81f4\u3057\u306a\u3044\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>:\u30c1\u30a7\u30c3\u30af\u6e08\u307f: \u9078\u629e\u3057\u305f\u5165\u529b\u8981\u7d20\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4ed6\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u3001\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u308b\u8981\u7d20\u3092\u3088\u308a\u5177\u4f53\u7684\u306b\u9078\u629e\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001\u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u305f\u3059\u3079\u3066\u306e\u30ea\u30f3\u30af\u3092\u9078\u629e\u3057\u3001\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<code>:hover<\/code><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u64ec\u4f3c\u8981\u7d20\u306f\u3001\u8981\u7d20\u306e\u7279\u5b9a\u306e\u90e8\u5206\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u64ec\u4f3c\u8981\u7d20\u306e\u69cb\u6587\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u3001\u4e8c\u91cd\u30b3\u30ed\u30f3 (::) \u306b\u64ec\u4f3c\u8981\u7d20\u540d\u3092\u52a0\u3048\u305f\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>selector::pseudo-element {\n  property: value;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u64ec\u4f3c\u8981\u7d20\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>::before<\/code>&nbsp;\u2013\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u524d\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u633f\u5165\u3057\u307e\u3059<\/li>\n\n\n\n<li><code>::after<\/code>&nbsp;\u2013\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5f8c\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u633f\u5165\u3057\u307e\u3059<\/li>\n\n\n\n<li><code>::first-letter<\/code>&nbsp;\u2013\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u6700\u521d\u306e\u6587\u5b57\u3092\u9078\u629e\u3057\u307e\u3059<\/li>\n\n\n\n<li><code>::first-line<\/code>&nbsp;\u2013\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u6700\u521d\u306e\u884c\u3092\u9078\u629e\u3057\u307e\u3059<\/li>\n\n\n\n<li><code>::selection<\/code>&nbsp;\u2013\u30e6\u30fc\u30b6\u30fc\u304c\u9078\u629e\u3057\u305f\u30c6\u30ad\u30b9\u30c8\u3092\u9078\u629e\u3057\u307e\u3059<\/li>\n<\/ul>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u306e\u524d\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u633f\u5165\u3067\u304d\u307e\u3059\u3002<code>::before<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>p::before {\n  content: \"&gt;&gt;\";\n  font-weight: bold;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u3001\u64ec\u4f3c\u8981\u7d20\u304c\u8981\u7d20\u306b\u9069\u7528\u3055\u308c\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u304c \u3067\u3042\u308a\u3001\u30d5\u30a9\u30f3\u30c8\u304c\u592a\u5b57\u3067\u3059\u3002<code>::before<\/code><code>p<\/code><code>&gt;&gt;<\/code><\/p>\n\n\n\n<p>\u540c\u69d8\u306b\u3001\u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5f8c\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u633f\u5165\u3067\u304d\u307e\u3059\u3002<code>::after<\/code><\/p>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u64ec\u4f3c\u8981\u7d20\u306b\u52a0\u3048\u3066\u3001 \u306a\u3069\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u9078\u629e\u3057\u3066\u4f7f\u7528\u3067\u304d\u308b\u4ed6\u306e\u64ec\u4f3c\u8981\u7d20\u304c\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002<code>::marker<\/code><code>::backdrop<\/code><code>::placeholder<\/code><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306f\u3001Web\u30b5\u30a4\u30c8\u3067\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e1\u3064\u3067\u3042\u308a\u3001Web\u30b5\u30a4\u30c8\u306e\u30e1\u30a4\u30f3\u30da\u30fc\u30b8\u3068\u6a5f\u80fd\u30ea\u30f3\u30af\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u4e00\u822c\u7684\u306aCSS\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u30c8\u30ea\u30c3\u30af\u3068\u5b9f\u88c5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>HTML \u3068 CSS \u3092\u4f7f\u7528\u3057\u3066\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u306e\u69cb\u9020\u3092\u69cb\u7bc9\u3059\u308b: \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u306f\u901a\u5e38\u3001\u9806\u5e8f\u306a\u3057\u30ea\u30b9\u30c8\u3068\u8907\u6570\u306e\u30ea\u30b9\u30c8 \u30a2\u30a4\u30c6\u30e0\u3067\u69cb\u6210\u3055\u308c\u3001HTML \u8a00\u8a9e\u3092\u4f7f\u7528\u3057\u3066\u30da\u30fc\u30b8 \u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u69cb\u9020\u5316\u3057\u3001CSS \u3092\u4f7f\u7528\u3057\u3066\u30b9\u30bf\u30a4\u30eb\u3068\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u307e\u305f\u306f\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b: \u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u5185\u306e\u500b\u3005\u306e\u8981\u7d20\u3092\u3059\u3070\u3084\u304f\u67d4\u8edf\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u304d\u307e\u3059\u3002 Flexbox \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u306e\u8981\u7d20\u3092\u6c34\u5e73\u65b9\u5411\u307e\u305f\u306f\u5782\u76f4\u65b9\u5411\u306b\u30a2\u30c0\u30d7\u30c6\u30a3\u30d6\u306b\u914d\u7f6e\u3057\u3001\u30b0\u30ea\u30c3\u30c9 \u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u5185\u306e\u500b\u3005\u306e\u8981\u7d20\u306e\u4f4d\u7f6e\u3068\u30b5\u30a4\u30ba\u3092\u3088\u308a\u7d30\u304b\u304f\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u64ec\u4f3c\u30af\u30e9\u30b9\u3068\u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u7528\u3059\u308b: CSS \u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u3068\u64ec\u4f3c\u8981\u7d20\u306f\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u52b9\u679c\u3001\u9078\u629e\u72b6\u614b\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3 \u30e1\u30cb\u30e5\u30fc\u306a\u3069\u306e\u5bfe\u8a71\u578b\u52b9\u679c\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001:hover \u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30db\u30d0\u30fc\u6642\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3057\u3001::before \u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u77e2\u5370\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u900f\u660e\u5ea6\u3068\u5207\u308a\u66ff\u3048\u52b9\u679c\u3092\u4f7f\u7528\u3059\u308b: \u900f\u660e\u5ea6\u3068\u5207\u308a\u66ff\u3048\u52b9\u679c\u306f\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u306e\u8981\u7d20\u3092\u30db\u30d0\u30fc\u307e\u305f\u306f\u30af\u30ea\u30c3\u30af\u6642\u306b\u30b9\u30e0\u30fc\u30ba\u306b\u9077\u79fb\u3055\u305b\u308b\u3053\u3068\u3067\u3001\u30e6\u30fc\u30b6\u30fc \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3:\u30e2\u30d0\u30a4\u30eb\u30c7\u30d0\u30a4\u30b9\u306e\u4eba\u6c17\u306b\u3088\u308a\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306f\u6700\u65b0\u306eWeb\u30b5\u30a4\u30c8\u306e\u6a19\u6e96\u6a5f\u80fd\u306e1\u3064\u306b\u306a\u308a\u307e\u3057\u305f\u3002 \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u30c7\u30b6\u30a4\u30f3\u3067\u306f\u3001\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u3084\u305d\u306e\u4ed6\u306eCSS\u30c8\u30ea\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u30b9\u30bf\u30a4\u30eb\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u8981\u7d04\u3059\u308b\u3068\u3001HTML\u3068CSS\u3092\u4f7f\u7528\u3057\u3066\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u3092\u4f5c\u6210\u3059\u308b\u3068\u3001Web\u30b5\u30a4\u30c8\u306e\u4f7f\u7528\u3068\u30ca\u30d3\u30b2\u30fc\u30c8\u304c\u5bb9\u6613\u306b\u306a\u308b\u3068\u540c\u6642\u306b\u3001CSS\u306e\u624b\u6cd5\u3068\u30b9\u30bf\u30a4\u30eb\u3092\u67d4\u8edf\u306b\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u3092\u3088\u308a\u7f8e\u3057\u304f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u4f7f\u3044\u3084\u3059\u304f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u975e\u8868\u793a\u306e\u30e1\u30cb\u30e5\u30fc\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u5c55\u958b\u3067\u304d\u307e\u3059\u3002 \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3 \u30e1\u30cb\u30e5\u30fc\u306f\u3001Web \u958b\u767a\u306e\u4e00\u822c\u7684\u306a\u30e6\u30fc\u30b6\u30fc \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e 1 \u3064\u3067\u3042\u308a\u3001Web \u30b5\u30a4\u30c8\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30d0\u30fc\u3001\u30d5\u30a9\u30fc\u30e0 \u30bb\u30ec\u30af\u30bf\u30fc\u3001\u8a2d\u5b9a\u30aa\u30d7\u30b7\u30e7\u30f3\u306a\u3069\u306e\u30b7\u30ca\u30ea\u30aa\u3067\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 CSS \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3 \u30e1\u30cb\u30e5\u30fc\u306e\u5b9f\u88c5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>CSS \u64ec\u4f3c\u30af\u30e9\u30b9\u3068\u96a3\u63a5\u5144\u5f1f\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>CSS\u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u5b9f\u88c5\u3057\u307e\u3059:\u30db\u30d0\u30fc\u3068\u96a3\u4eba\u306e\u5144\u5f1f\u30bb\u30ec\u30af\u30bf\u30fc+\u3002 \u30e1\u30cb\u30e5\u30fc \u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u3068\u3001\u96a3\u63a5\u3059\u308b\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3 \u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002 \u3053\u306e\u65b9\u6cd5\u306e\u6b20\u70b9\u306f\u3001\u30de\u30a6\u30b9\u304c\u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u3092\u96e2\u308c\u308b\u3068\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u304c\u6d88\u3048\u308b\u3053\u3068\u3067\u3042\u308a\u3001\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u9577\u6642\u9593\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306f\u3001\u30e1\u30cb\u30e5\u30fc\u306b\u30ce\u30f3\u30b9\u30c8\u30c3\u30d7\u3067\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u69cb\u9020:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopy code<code>&lt;nav&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Products&lt;\/a&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Product 1&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Product 2&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Product 3&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;About Us&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Contact Us&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b9\u30bf\u30a4\u30eb:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>nav ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: #f2f2f2;\n}\n\nnav ul li {\n  display: inline-block;\n}\n\nnav ul li a {\n  display: block;\n  padding: 10px;\n  color: #333;\n  text-decoration: none;\n}\n\nnav ul li:hover ul {\n  display: block;\n}\n\nnav ul ul {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  background-color: #f2f2f2;\n  min-width: 160px;\n}\n\nnav ul ul li {\n  display: block;\n}\n<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>CSS \u64ec\u4f3c\u30af\u30e9\u30b9\u3068\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u7528\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>CSS\u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3059\u308b:\u30db\u30d0\u30fc\u3068\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002 \u30e1\u30cb\u30e5\u30fc\u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u3068\u3001\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002 \u6700\u521d\u306e\u65b9\u6cd5\u3068\u306f\u5bfe\u7167\u7684\u306b\u3001\u3053\u308c\u306b\u3088\u308a\u3001\u30de\u30a6\u30b9\u304c\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u96e2\u308c\u308b\u307e\u3067\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u305f\u307e\u307e\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u69cb\u9020:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopy code<code>&lt;nav&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Products&lt;\/a&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Product 1&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Product 2&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Product 3&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;About Us&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Contact Us&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b9\u30bf\u30a4\u30eb:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>nav ul {<br>  list-style: none;<br>  margin: 0;<br>  padding: 0;<br> <br><\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u30c4\u30fc\u30eb\u306f\u3001\u30c4\u30fc\u30eb\u30d2\u30f3\u30c8\u307e\u305f\u306f\u30c4\u30fc\u30eb\u30d2\u30f3\u30c8\u3068\u3082\u547c\u3070\u308c\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\u3057\u3066\u4f7f\u7528\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u8ffd\u52a0\u60c5\u5831\u307e\u305f\u306f\u6307\u793a\u3092\u30e6\u30fc\u30b6\u30fc\u306b\u63d0\u4f9b\u3059\u308b\u4e00\u822c\u7684\u306a\u30e6\u30fc\u30b6\u30fc \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<p>CSS\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306f\u901a\u5e38\u3001\u30de\u30a6\u30b9\u306e\u30db\u30d0\u30fc\u307e\u305f\u306f\u30af\u30ea\u30c3\u30af\u306b\u3088\u3063\u3066\u30c8\u30ea\u30ac\u30fc\u3055\u308c\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u30a2\u30a4\u30b3\u30f3\u3001\u753b\u50cf\u3001\u305d\u306e\u4ed6\u306eHTML\u8981\u7d20\u3092\u542b\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 CSS \u3067\u306f\u3001\u64ec\u4f3c\u8981\u7d20\u3068 CSS \u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u30d7\u30ed\u30f3\u30d7\u30c8 \u30c4\u30fc\u30eb\u306e\u4f5c\u6210\u306b\u4f7f\u7528\u3055\u308c\u308b\u4e00\u822c\u7684\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u64ec\u4f3c\u8981\u7d20\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>content: \u64ec\u4f3c\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u30d2\u30f3\u30c8\u30c6\u30ad\u30b9\u30c8\u307e\u305f\u306f\u4ed6\u306eHTML\u8981\u7d20\u3092\u5024\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>position: \u76f8\u5bfe\u3001\u7d76\u5bfe\u3001\u56fa\u5b9a\u306a\u3069\u3092\u542b\u3080\u30d7\u30ed\u30f3\u30d7\u30c8\u30c4\u30fc\u30eb\u306e\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>display: \u306a\u3057\u3001\u30d6\u30ed\u30c3\u30af\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u306a\u3069\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u30c4\u30fc\u30eb\u306e\u8868\u793a\u30e2\u30fc\u30c9\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>z-index: \u30c4\u30fc\u30eb\u306e\u30ab\u30b9\u30b1\u30fc\u30c9\u9806\u5e8f\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u5e38\u306b\u4ed6\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u4e0a\u306b\u914d\u7f6e\u3055\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u80cc\u666f\u8272: \u30c4\u30fc\u30eb\u306e\u80cc\u666f\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>color: \u30c4\u30fc\u30eb\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>border: \u30d7\u30ed\u30f3\u30d7\u30c8\u30c4\u30fc\u30eb\u306e\u5883\u754c\u7dda\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u5e45\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>border-radius: \u30d7\u30ed\u30f3\u30d7\u30c8\u30c4\u30fc\u30eb\u306e\u5883\u754c\u7dda\u306e\u4e38\u307f\u3092\u5e2f\u3073\u305f\u534a\u5f84\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>:hover \u64ec\u4f3c\u30af\u30e9\u30b9: \u30de\u30a6\u30b9\u3092\u8981\u7d20\u306e\u4e0a\u306b\u7f6e\u3044\u305f\u3068\u304d\u306b\u8868\u793a\u3055\u308c\u308b\u30c4\u30fc\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>CSS \u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30f3\u30d7\u30c8 \u30c4\u30fc\u30eb\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u30b5\u30f3\u30d7\u30eb \u30b3\u30fc\u30c9\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>.HTML\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopy code<code>&lt;button class=\"tooltip\"&gt;Hover Me&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<p>.CSS\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.tooltip {\n  position: relative;\n  display: inline-block;\n}\n\n.tooltip::before {\n  content: \"\";\n  display: none;\n  position: absolute;\n  z-index: 1;\n  width: 100px;\n  height: 30px;\n  top: -40px;\n  left: 50%;\n  margin-left: -50px;\n  border-radius: 6px;\n  background-color: #555;\n  color: #fff;\n  text-align: center;\n  line-height: 30px;\n}\n\n.tooltip:hover::before {\n  display: block;\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u6700\u521d\u306b\u30dc\u30bf\u30f3\u8981\u7d20\u306e position \u5c5e\u6027\u3092\u76f8\u5bfe\u306b\u8a2d\u5b9a\u3057\u3066\u3001\u64ec\u4f3c\u8981\u7d20\u3092\u76f8\u5bfe\u7684\u306b\u914d\u7f6e\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001::before \u64ec\u4f3c\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30f3\u30d7\u30c8 \u30c4\u30fc\u30eb\u3092\u4f5c\u6210\u3057\u3001content \u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u30d2\u30f3\u30c8 \u30c6\u30ad\u30b9\u30c8\u3092\u8a2d\u5b9a\u3057\u3001position \u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u7d76\u5bfe\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3057\u3001z-index \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u3066\u4ed6\u306e\u8981\u7d20\u306e\u4e0a\u306b\u914d\u7f6e\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002 \u30dc\u30bf\u30f3\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u308b\u3068\u3001:hover \u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30f3\u30d7\u30c8\u30c4\u30fc\u30eb\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u30ae\u30e3\u30e9\u30ea\u30fc\u306f\u3001\u753b\u50cf\u306e\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u3092\u7d39\u4ecb\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u4e00\u822c\u7684\u306aWeb\u30c7\u30b6\u30a4\u30f3\u8981\u7d20\u3067\u3059\u3002 \u901a\u5e38\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u3001\u30ba\u30fc\u30e0\u30a4\u30f3\u30d7\u30ec\u30d3\u30e5\u30fc\u3001\u5de6\u77e2\u5370\u3068\u53f3\u77e2\u5370\u306e\u5207\u308a\u66ff\u3048\u3001\u753b\u50cf\u306e\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u306a\u3069\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u57fa\u672c\u7684\u306a CSS \u30ae\u30e3\u30e9\u30ea\u30fc\u306e\u5b9f\u88c5\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>HTML \u69cb\u9020:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"gallery\"&gt;\n  &lt;div class=\"thumbnails\"&gt;\n    &lt;img src=\"img1-thumb.jpg\" data-large=\"img1-large.jpg\" alt=\"Image 1\"&gt;\n    &lt;img src=\"img2-thumb.jpg\" data-large=\"img2-large.jpg\" alt=\"Image 2\"&gt;\n    &lt;img src=\"img3-thumb.jpg\" data-large=\"img3-large.jpg\" alt=\"Image 3\"&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"preview\"&gt;\n    &lt;img src=\"img1-large.jpg\" alt=\"Image 1\"&gt;\n    &lt;h2&gt;Image 1 Title&lt;\/h2&gt;\n  &lt;\/div&gt;\n  &lt;a class=\"prev\" href=\"#\"&gt;&lt;\/a&gt;\n  &lt;a class=\"next\" href=\"#\"&gt;&lt;\/a&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>CSS \u30b9\u30bf\u30a4\u30eb:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>\/* Gallery Container *\/\n.gallery {\n  width: 100%;\n  max-width: 800px;\n  margin: 0 auto;\n  position: relative;\n  overflow: hidden;\n}\n\n\/* Thumbnail Container *\/\n.thumbnails {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 20px 0;\n}\n\n\/* Thumbnail Images *\/\n.thumbnails img {\n  max-width: 100%;\n  height: auto;\n  margin: 0 10px;\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\n\n\/* Preview Image and Title *\/\n.preview {\n  position: relative;\n  text-align: center;\n}\n\n.preview img {\n  max-width: 100%;\n  height: auto;\n  margin-bottom: 20px;\n}\n\n.preview h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: bold;\n}\n\n\/* Previous and Next Buttons *\/\n.prev, .next {\n  position: absolute;\n  top: 50%;\n  width: 40px;\n  height: 40px;\n  margin-top: -20px;\n  background-color: rgba(255, 255, 255, 0.8);\n  border-radius: 50%;\n  text-align: center;\n  line-height: 40px;\n  font-size: 24px;\n  color: #333;\n  text-decoration: none;\n  transition: all 0.3s ease-in-out;\n}\n\n.prev:hover, .next:hover {\n  background-color: rgba(0, 0, 0, 0.8);\n  color: #fff;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001 \u306f\u30ae\u30e3\u30e9\u30ea\u30fc \u30b3\u30f3\u30c6\u30ca\u30fc\u3001 \u306f\u30b5\u30e0\u30cd\u30a4\u30eb \u30b3\u30f3\u30c6\u30ca\u30fc\u3001 \u306f\u30d7\u30ec\u30d3\u30e5\u30fc\u753b\u50cf\u3068\u30bf\u30a4\u30c8\u30eb \u30b3\u30f3\u30c6\u30ca\u30fc\u3001 \u306f\u30c8\u30b0\u30eb\u77e2\u5370\u30b3\u30f3\u30c6\u30ca\u30fc\u3067\u3059\u3002<code>.gallery<\/code><code>.thumbnails<\/code><code>.preview<\/code><code>.prev<\/code><code>.next<\/code><\/p>\n\n\n\n<p>\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u5927\u304d\u306a\u753b\u50cf\u306b\u30ea\u30f3\u30af\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u3001\u5bfe\u5fdc\u3059\u308b\u5927\u304d\u306a\u753b\u50cf\u30a2\u30c9\u30ec\u30b9\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002 JavaScript\u30b3\u30fc\u30c9\u3092\u901a\u3058\u3066\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u753b\u50cf\u306e\u30ea\u30f3\u30af\u3001\u304a\u3088\u3073\u5de6\u77e2\u5370\u3068\u53f3\u77e2\u5370\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u306b\u3088\u308a\u3001\u5b8c\u5168\u306a\u753b\u50cf\u30ae\u30e3\u30e9\u30ea\u30fc\u6a5f\u80fd\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<code>data-large<\/code><\/p>\n\n\n\n<p>\u5b9f\u969b\u306e\u958b\u767a\u3067\u306f\u3001\u753b\u50cf\u30ae\u30e3\u30e9\u30ea\u30fc\u306f\u3001\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u52b9\u679c\u3084\u30e2\u30fc\u30b7\u30e7\u30f3\u306e\u8ffd\u52a0\u306a\u3069\u3001\u7279\u5b9a\u306e\u30cb\u30fc\u30ba\u306b\u5fdc\u3058\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u4e0d\u900f\u660e\u5ea6\u30d7\u30ed\u30d1\u30c6\u30a3\u3092 CSS \u3067\u4f7f\u7528\u3057\u3066\u3001\u753b\u50cf\u306b\u900f\u660e\/\u4e0d\u900f\u660e\u306e\u52b9\u679c\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002 opacity \u5c5e\u6027\u306f\u8981\u7d20\u306e\u900f\u660e\u5ea6\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u305d\u306e\u5024\u306e\u7bc4\u56f2\u306f 0 \u304b\u3089 1 \u306e\u9593\u3067\u30010 \u306f\u5b8c\u5168\u306b\u900f\u660e\u30011 \u306f\u5b8c\u5168\u306b\u4e0d\u900f\u660e\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u753b\u50cf\u3092\u534a\u900f\u660e\u306b\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306b CSS \u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>img {\n  opacity: 0.5;\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u753b\u50cf\u304c\u534a\u900f\u660e\u306b\u306a\u308a\u3001\u80cc\u666f\u306e\u4e00\u90e8\u304c\u900f\u3051\u3066\u898b\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002 \u307e\u305f\u3001RGBA \u30ab\u30e9\u30fc\u5024\u3092\u4f7f\u7528\u3057\u3066\u3001\u753b\u50cf\u306b\u900f\u660e\/\u4e0d\u900f\u660e\u306a\u52b9\u679c\u3092\u4e0e\u3048\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u3001A \u306f\u30a2\u30eb\u30d5\u30a1\u30c1\u30e3\u30f3\u30cd\u30eb\u3092\u8868\u3057\u3001\u5024\u306e\u7bc4\u56f2\u306f 0 \u304b\u3089 1 \u306e\u9593\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>img {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n<\/code><\/pre>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u753b\u50cf\u306e\u80cc\u666f\u8272\u304c\u534a\u900f\u660e\u306b\u306a\u308a\u3001\u305d\u306e\u4e0b\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u90e8\u5206\u7684\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS\u753b\u50cf\u30b9\u30d4\u30c3\u30c1\u30f3\u30b0\u306f\u3001\u8907\u6570\u306e\u753b\u50cf\u30921\u3064\u306e\u753b\u50cf\u306b\u30de\u30fc\u30b8\u3059\u308b\u624b\u6cd5\u3067\u3059\u3002 \u305d\u306e\u4e3b\u306a\u76ee\u7684\u306f\u3001Web\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u6642\u9593\u3068HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u6570\u3092\u6e1b\u3089\u3057\u3001\u30da\u30fc\u30b8\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<p>CSS \u30a4\u30e1\u30fc\u30b8\u306e\u30d5\u30e9\u30c3\u30c8\u5316\u624b\u6cd5\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u8907\u6570\u306e\u5c0f\u3055\u306a\u30a4\u30e1\u30fc\u30b8\u3092 1 \u3064\u306e\u5927\u304d\u306a\u30a4\u30e1\u30fc\u30b8\u306b\u7d50\u5408\u3057\u3001CSS \u306e\u80cc\u666f\u4f4d\u7f6e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u8868\u793a\u3059\u308b\u4f4d\u7f6e\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u8907\u6570\u306e\u5c0f\u3055\u306a\u753b\u50cf\u3067\u306f\u306a\u304f1\u3064\u306e\u5927\u304d\u306a\u753b\u50cf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u3060\u3051\u3067\u3088\u3044\u305f\u3081\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u6570\u3092\u6e1b\u3089\u3059\u3068\u3044\u3046\u5229\u70b9\u304c\u3042\u308a\u307e\u3059\u3002 \u307e\u305f\u3001\u753b\u50cf\u306f\u30e1\u30e2\u30ea\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3055\u308c\u308b\u305f\u3081\u3001\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u6642\u306e\u8aad\u307f\u8fbc\u307f\u901f\u5ea6\u3082\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u753b\u50cf\u306e\u30d5\u30e9\u30c3\u30c8\u5316\u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;div class=\"sprite\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>.sprite {\n  width: 30px;\n  height: 30px;\n  background-image: url('sprites.png');\n  background-position: -10px -10px;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30af\u30e9\u30b9 &#8220;sprite&#8221; \u3092\u6301\u3064 div \u8981\u7d20\u3092\u5b9a\u7fa9\u3057\u3001\u305d\u306e\u5e45\u3068\u9ad8\u3055\u3092 30 \u30d4\u30af\u30bb\u30eb\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u80cc\u666f\u753b\u50cf\u3092 &#8220;sprites.png&#8221; \u306b\u8a2d\u5b9a\u3057\u3001background-position \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u753b\u50cf\u3092\u4e0a\u4e0b\u306b 10 \u30d4\u30af\u30bb\u30eb\u79fb\u52d5\u3057\u3001\u76ee\u7684\u306e\u753b\u50cf\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS\u753b\u50cf\u306e\u30d5\u30e9\u30c3\u30c8\u5316\u624b\u6cd5\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u753b\u50cf\u304c\u91cd\u306a\u3089\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u3053\u308c\u306f\u3001\u5404\u753b\u50cf\u304c\u9577\u65b9\u5f62\u3092\u5360\u3081\u308b\u9577\u65b9\u5f62\u306e\u30b0\u30ea\u30c3\u30c9\u306b\u753b\u50cf\u3092\u914d\u7f6e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u5404\u753b\u50cf\u306e\u30b0\u30ea\u30c3\u30c9\u5185\u306e\u4f4d\u7f6e\u3092\u8a08\u7b97\u3057\u3001\u305d\u306e\u4f4d\u7f6e\u3092\u80cc\u666f\u4f4d\u7f6e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3068\u3057\u3066\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u753b\u50cf\u306e\u30d5\u30e9\u30c3\u30c8\u5316\u624b\u6cd5\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001Web \u30da\u30fc\u30b8\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5927\u5e45\u306b\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u304c\u3001\u614e\u91cd\u306b\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u8aa4\u3063\u3066\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u306e\u8907\u96d1\u3055\u304c\u5897\u3057\u3001Web\u30da\u30fc\u30b8\u306e\u4fdd\u5b88\u304c\u56f0\u96e3\u306b\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001CSS\u753b\u50cf\u306e\u30d5\u30e9\u30c3\u30c8\u5316\u624b\u6cd5\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u30b3\u30fc\u30c9\u304c\u8aad\u307f\u3084\u3059\u304f\u4fdd\u5b88\u3057\u3084\u3059\u3044\u3088\u3046\u306b\u3001\u547d\u540d\u898f\u5247\u306e\u4f7f\u7528\u3001\u30b3\u30fc\u30c9\u306e\u30b3\u30e1\u30f3\u30c8\u5316\u306a\u3069\u3001\u3044\u304f\u3064\u304b\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u63a1\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>CSS \u30ab\u30a6\u30f3\u30bf\u306f\u3001\u7ae0\u756a\u53f7\u3001\u30ea\u30b9\u30c8\u756a\u53f7\u306a\u3069\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u69cb\u9020\u306b\u57fa\u3065\u3044\u3066\u30ab\u30a6\u30f3\u30bf\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u7279\u5225\u306a\u624b\u6cd5\u3067\u3059\u3002 \u30ab\u30a6\u30f3\u30bf\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u6570\u5024\u3092\u81ea\u52d5\u7684\u306b\u751f\u6210\u3057\u3001\u30b9\u30bf\u30a4\u30eb \u30b7\u30fc\u30c8\u3067\u306e\u8868\u793a\u3092\u5236\u5fa1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u3067\u306f\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u306f\u30ab\u30a6\u30f3\u30bf\u30fc \u30ea\u30bb\u30c3\u30c8\u3068\u30ab\u30a6\u30f3\u30bf\u30fc\u5897\u5206\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002 counter-reset \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001counter-increment \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u3092\u5897\u3084\u3059\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>CSS \u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u81ea\u52d5\u756a\u53f7\u4ed8\u304d\u30ea\u30b9\u30c8\u3092\u4f5c\u6210\u3059\u308b\u7c21\u5358\u306a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopy code<code>&lt;style&gt;\n    ul {\n        counter-reset: mycounter;\n        list-style-type: none;\n    }\n    li:before {\n        counter-increment: mycounter;\n        content: counter(mycounter) \". \";\n    }\n&lt;\/style&gt;\n\n&lt;ul&gt;\n    &lt;li&gt;Item one&lt;\/li&gt;\n    &lt;li&gt;Item two&lt;\/li&gt;\n    &lt;li&gt;Item three&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n\n\n\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u3001\u6700\u521d\u306b counter-reset \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066 &#8220;mycounter&#8221; \u3068\u3044\u3046\u540d\u524d\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u5b9a\u7fa9\u3057\u3001\u305d\u306e\u521d\u671f\u5024\u3092 0 \u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001:before \u64ec\u4f3c\u8981\u7d20\u3068 counter-increment \u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u3092\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\u3057\u3001counter \u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u524d\u306b\u633f\u5165\u3057\u3001\u81ea\u52d5\u756a\u53f7\u4ed8\u3051\u306e\u52b9\u679c\u3092\u5f62\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u898b\u51fa\u3057\u3001\u7ae0\u3001\u30ea\u30b9\u30c8\u3001\u8868\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u8981\u7d20\u306e\u81ea\u52d5\u756a\u53f7\u4ed8\u3051\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002 \u3055\u3089\u306b\u3001\u756a\u53f7\u4ed8\u3051\u306e\u8272\u3001\u30d5\u30a9\u30f3\u30c8\u3001\u30b5\u30a4\u30ba\u306a\u3069\u3092\u5909\u66f4\u3059\u308b\u306a\u3069\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066\u3001\u3088\u308a\u67d4\u8edf\u306a\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>.CSS\uff01 \u91cd\u8981\u306a\u898f\u5247\u306f\u3001\u4ed6\u306e\u5ba3\u8a00\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3057\u3001\u6700\u9ad8\u306e\u512a\u5148\u9806\u4f4d\u3092\u4e0a\u3052\u308b\u5fc5\u9808\u306e\u5ba3\u8a00\u3067\u3059\u3002 CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u306e\u5f8c\u306b\u8ffd\u52a0\u3067\u304d\u307e\u3059! \u91cd\u8981\u306a\u30ad\u30fc\u30ef\u30fc\u30c9\u304c\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u4f8b\u3048\u3070\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cssCopy code<code>color: red !important;\n<\/code><\/pre>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u4ed6\u306e\u30b9\u30bf\u30a4\u30eb\u306e\u5b9a\u7fa9\u65b9\u6cd5\u306b\u95a2\u4fc2\u306a\u304f\u3001\u30c6\u30ad\u30b9\u30c8\u306e\u8272\u304c\u5f37\u5236\u7684\u306b\u8d64\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>!important \u30eb\u30fc\u30eb\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3068\u512a\u5148\u9806\u4f4d\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u304c\u3001\u30b3\u30fc\u30c9\u304c\u4e71\u96d1\u306b\u306a\u308a\u3001\u4fdd\u5b88\u304c\u56f0\u96e3\u306b\u306a\u308b\u305f\u3081\u3001\u614e\u91cd\u306b\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u3001\u305d\u308c\u306f\u3067\u304d\u308b\u3060\u3051\u907f\u3051\u308b\u3079\u304d\u3067\u3059! \u91cd\u8981\u306a\u30eb\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3001\u3088\u308a\u5177\u4f53\u7684\u306a\u30bb\u30ec\u30af\u30bf\u30fc\u3068\u3088\u308a\u512a\u308c\u305f\u7d44\u7e54\u69cb\u9020\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u512a\u5148\u9806\u4f4d\u3092\u7ba1\u7406\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u540c\u3058\u8981\u7d20\u306b\u8907\u6570\u4f7f\u7528\u3059\u308b\u5834\u5408! \u91cd\u8981\u306a\u30eb\u30fc\u30eb\u3067\u306f\u3001\u512a\u5148\u5ea6\u306e\u9ad8\u3044\u30eb\u30fc\u30eb\u306e\u307f\u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002 2\u3064\u306e\u3068\u304d! \u91cd\u8981\u306a\u30eb\u30fc\u30eb\u306e\u512a\u5148\u5ea6\u304c\u540c\u3058\u5834\u5408\u3001\u5f8c\u306e\u30eb\u30fc\u30eb\u304c\u524d\u306e\u30eb\u30fc\u30eb\u3088\u308a\u3082\u512a\u5148\u3055\u308c\u307e\u3059\u3002 \u7d99\u627f\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u306e\u89aa\u8981\u7d20\u3068\u5b50\u8981\u7d20\u306e\u4e21\u65b9\u3067\u4f7f\u7528\u3055\u308c\u308b\u5834\u5408! \u91cd\u8981\u306a\u30eb\u30fc\u30eb\u3067\u306f\u3001\u5b50\u8981\u7d20\u306e\u30eb\u30fc\u30eb\u304c\u89aa\u8981\u7d20\u306e\u30eb\u30fc\u30eb\u3088\u308a\u3082\u512a\u5148\u3055\u308c\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IT\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30d3\u30c7\u30aa\u3092\u3084\u308a\u305f\u3044\u306e\u3067 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-954","post","type-post","status-publish","format-standard","hentry","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=954"}],"version-history":[{"count":2,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/954\/revisions"}],"predecessor-version":[{"id":3739,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/954\/revisions\/3739"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}