{"id":163,"date":"2025-05-10T21:33:47","date_gmt":"2025-05-10T12:33:47","guid":{"rendered":"https:\/\/noisette.espresso.earth\/wordpress\/?p=163"},"modified":"2025-07-10T00:02:39","modified_gmt":"2025-07-09T15:02:39","slug":"headerdesign","status":"publish","type":"post","link":"https:\/\/blog.espresso.earth\/index.php\/2025\/05\/10\/headerdesign\/","title":{"rendered":"\u9752\u7cfb\u898b\u51fa\u3057\u30c7\u30b6\u30a4\u30f310\u30d1\u30bf\u30fc\u30f3"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>\u4f7f\u7528\u3059\u308b\u9752\u7cfb\u306e\u8272\u306e\u4f8b:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#0077cc<\/code> (\u9bae\u3084\u304b\u306a\u9752)<\/li>\n\n\n\n<li><code>#3498db<\/code> (\u660e\u308b\u3044\u9752)<\/li>\n\n\n\n<li><code>#2c3e50<\/code> (\u6fc3\u3044\u3001\u843d\u3061\u7740\u3044\u305f\u9752)<\/li>\n\n\n\n<li><code>lightblue<\/code> (\u6de1\u3044\u9752)<\/li>\n\n\n\n<li><code>steelblue<\/code> (\u5c11\u3057\u7070\u8272\u304c\u304b\u3063\u305f\u9752)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 1: \u30b7\u30f3\u30d7\u30eb\u306a\u4e0b\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u4e0b\u306b\u7d30\u3044\u5b9f\u7dda\u306e\u9752\u3044\u7dda\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"58\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f31.png\" alt=\"\" class=\"wp-image-164\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f31.png 470w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f31-300x37.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  border-bottom: 2px solid #0077cc;\n  padding-bottom: 5px; \/* \u7dda\u3068\u306e\u9593\u306b\u5c11\u3057\u9699\u9593\u3092\u4f5c\u308b *\/\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 2: \u5de6\u5074\u306e\u592a\u3044\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u5de6\u5074\u306b\u592a\u3044\u9752\u3044\u7dda\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30af\u306e\u3088\u3046\u306a\u5370\u8c61\u3092\u4e0e\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"84\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f32.png\" alt=\"\" class=\"wp-image-165\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f32.png 471w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f32-300x54.png 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  border-left: 8px solid #3498db;\n  padding-left: 10px; \/* \u7dda\u3068\u306e\u9593\u306b\u9699\u9593\u3092\u4f5c\u308b *\/\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 3: \u80cc\u666f\u8272\u306b\u3088\u308b\u30cf\u30a4\u30e9\u30a4\u30c8<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u80cc\u666f\u306b\u8584\u3044\u9752\u8272\u3092\u3064\u3051\u3066\u3001\u76ee\u7acb\u305f\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"475\" height=\"89\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f33.png\" alt=\"\" class=\"wp-image-166\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f33.png 475w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f33-300x56.png 300w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  background-color: lightblue;\n  padding: 10px 15px; \/* \u5185\u5074\u306e\u4f59\u767d *\/\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 4: \u70b9\u7dda\u306e\u4e0b\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u4e0b\u306b\u70b9\u7dda\u306e\u9752\u3044\u7dda\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"469\" height=\"89\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f34.png\" alt=\"\" class=\"wp-image-167\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f34.png 469w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f34-300x57.png 300w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  border-bottom: 2px dashed steelblue;\n  padding-bottom: 5px;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 5: \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u4e0b\u7dda<\/strong><\/h2>\n\n\n\n<p>\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u4e0b\u7dda\u3067\u3059\u3002\u9752\u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"86\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f35.png\" alt=\"\" class=\"wp-image-168\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f35.png 473w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f35-300x55.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  position: relative;\n  padding: 0.25em 0;\n  padding-bottom: 5px; \/* \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3068\u306e\u9699\u9593 *\/\n}\n\nh1:after {\n  content: \"\";\n  display: block;\n  height: 3px; \/* \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u9ad8\u3055 *\/\n  background: linear-gradient(to right, #0077cc, transparent); \/* \u9752\u304b\u3089\u900f\u660e\u3078\u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3 *\/\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 6: \u30c6\u30ad\u30b9\u30c8\u306e\u8272\u3068\u6ce2\u7dda\u306e\u4e0b\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u6587\u5b57\u8272\u3092\u9752\u306b\u3057\u3001\u6ce2\u7dda\u306e\u4e0b\u7dda\u3092\u3064\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"89\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f36.png\" alt=\"\" class=\"wp-image-169\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f36.png 470w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f36-300x57.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  color: #2c3e50; \/* \u6fc3\u3044\u9752\u306e\u898b\u51fa\u3057\u6587\u5b57 *\/\n  text-decoration: underline wavy #3498db; \/* \u6ce2\u7dda\u306e\u4e0b\u7dda *\/\n  text-underline-offset: 5px; \/* \u30c6\u30ad\u30b9\u30c8\u304b\u3089\u306e\u8ddd\u96e2 *\/\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 7: \u64ec\u4f3c\u8981\u7d20\uff08::before\uff09\u3092\u4f7f\u3063\u305f\u88c5\u98fe<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u524d\u306b\u9752\u3044\u56db\u89d2\u5f62\u3084\u4e38\u306a\u3069\u306e\u88c5\u98fe\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"69\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f37.png\" alt=\"\" class=\"wp-image-170\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f37.png 472w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f37-300x44.png 300w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  position: relative;\n  padding-left: 20px; \/* \u64ec\u4f3c\u8981\u7d20\u306e\u5206\u306e\u30b9\u30da\u30fc\u30b9 *\/\n}\n\nh1::before {\n  content: \"\";\n  display: block;\n  width: 10px; \/* \u88c5\u98fe\u306e\u5e45 *\/\n  height: 10px; \/* \u88c5\u98fe\u306e\u9ad8\u3055 *\/\n  background-color: #0077cc;\n  position: absolute;\n  left: 0;\n  top: 50%; \/* \u5782\u76f4\u65b9\u5411\u4e2d\u592e *\/\n  transform: translateY(-50%); \/* \u4e2d\u592e\u63c3\u3048 *\/\n  \/* border-radius: 50%; \u4e38\u306b\u3059\u308b\u5834\u5408 *\/\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 8: \u4e8c\u91cd\u7dda\u306e\u4e0b\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u4e0b\u306b\u4e8c\u91cd\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"81\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f38.png\" alt=\"\" class=\"wp-image-171\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f38.png 471w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f38-300x52.png 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  border-bottom: 4px double #3498db;\n  padding-bottom: 5px;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 9: \u592a\u3044\u4e0b\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u4e0b\u306b\u592a\u3044\u9752\u3044\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"71\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f39.png\" alt=\"\" class=\"wp-image-172\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f39.png 471w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f39-300x45.png 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  border-bottom: 5px solid #2c3e50;\n  padding-bottom: 5px;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u30d1\u30bf\u30fc\u30f3 10: \u4e0a\u4e0b\u4e8c\u91cd\u7dda<\/strong><\/h2>\n\n\n\n<p>\u898b\u51fa\u3057\u306e\u4e0a\u4e0b\u306b\u4e8c\u91cd\u7dda\u3092\u5f15\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"90\" src=\"https:\/\/noisette.espresso.earth\/wordpress\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f310.png\" alt=\"\" class=\"wp-image-173\" srcset=\"https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f310.png 468w, https:\/\/blog.espresso.earth\/wp-content\/uploads\/2025\/05\/\u30d1\u30bf\u30fc\u30f310-300x58.png 300w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/figure>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  border-top: 3px double #0077cc;\n  border-bottom: 3px double #0077cc;\n  padding: 5px 0; \/* \u4e0a\u4e0b\u30d1\u30c7\u30a3\u30f3\u30b0 *\/\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4f7f\u7528\u3059\u308b\u9752\u7cfb\u306e\u8272\u306e\u4f8b: \u30d1\u30bf\u30fc\u30f3 1:  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1453,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,24,13,12,26],"tags":[80],"class_list":["post-163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it","category-web","category-wordpress","category-idea","category-design","tag-web"],"_links":{"self":[{"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":4,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"predecessor-version":[{"id":1209,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/posts\/163\/revisions\/1209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/media\/1453"}],"wp:attachment":[{"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espresso.earth\/index.php\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}