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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

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

2018.8.27 2019.1.15

途中で色が変わる見出し罫線を作る方法【CSS3】
Web制作 0 0

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

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

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

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

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

今回の記事は、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%くらいがオススメです!)

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

企業のWeb担当者さん向け!メルマガ購読はこちら

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「無料でお仕事を依頼する&お受けするときに気をつけたい事」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

メルマガをご購読いただいた方には、妙高Web屋作成の無料レポート「ホントは公表したくない!受注につなげるホームページ作りの話」をプレゼントいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ