新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
途中で色が変わる見出し罫線を作る方法【CSS3】

ホームページの本文の見出しには、様々なものを見かけます。

見出しの文字の背景に背景色とは異なる色を使って目立たせたり、文字の左側に線を引いてみたり。

あるいは、下線の一部にアクセントカラーを使う形式もよく見かけます。

こちらの画像は、左端の一部の色が変わっています。

左端にアクセントカラーを使うスタイル

今回の記事は、CSS3を使って、途中で色が変わる見出し罫線を作る方法をご紹介します。

この記事の目次

【結論】途中で色が変わる見出し罫線をCSSで作る方法

まずは結論から、途中で色が変わる見出し罫線をつくるCSSのスタイル定義はこちらです!

h1 {
border-bottom: solid 4px #999999; /*[1]線の太さと地の色を指定*/
position: relative;
}
h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 4px #00a0e9; /*[2]アクセントの色を指定(太さは上記[1]に揃える)*/
bottom: -4px; /*[3]太さの分だけ線の位置を調整*/
width: 33%; /*[4]アクセントカラーの幅を指定*/
}

ページの先頭へ戻る

[詳細]CSSのスタイル定義の仕組み

上記のCSSの定義について、少し触れておきます。

見出しのタグを[h1]として、基本的に、[h1]と[h1:after]とで、色や位置を指定します。

前者ではベースの色を、後者ではアクセントカラーをしています。

そして、アクセントカラーの線はデフォルトでベースカラーの線の後に表示されてしまうので、[3]のように、線の太さだけ上に持ち上げます。

アクセントカラーの線の幅は、サイトのイメージやご自身のご希望などに応じて、自由に設定してください。

(※アクセントとしての意味合いであれば、だいたい15%〜35%くらいがオススメです!)

ページの先頭へ戻る

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[途中で色が変わる見出し罫線を作る方法【CSS3】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:途中で色が変わる見出し罫線を作る方法【CSS3】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.