css実例!見出しデザインをおしゃれにするための100選を公開!
ブログやホームページの見た目を整え、読みやすくしてくれる見出し。
訪問するユーザーにとって見出しがない文章はとても読みにくく、離脱率も高くなってしまいますが、
見出し構成がしっかりとしている記事はちゃんと読んでもらうことができます。
さらに見出しはSEOとしても重要で、最近のGoogle検索ではユーザーが検索したワードが見出しに含まれている場合、
その見出しも検索結果に表示しページの該当部分を直接表示してくれる場合もあります。
今回は、その見出しをコピペで簡単にオシャレにする方法をご紹介します。
見出しデザインの変更方法
HTMLやCSSに慣れていない方にとって、文字だらけのファイルをいじるのはちょっと不安ですよね。
でも、そこで一歩踏み出しチャレンジすることで自分のスキルアップにもなるし、やってみたら意外と簡単！と思えると思いますので、ぜひ挑戦してみてくださいね。
なお、不安な方は必ず実装前のファイルのバックアップをとることをお勧めします。
バックアップは難しいことはなく、編集しようとしているファイルの中身を丸々コピーし、メモ帳などにペーストしておくだけです。（できればデスクトップなど分かりやすいところに保存しておきましょう）
編集してみてうまくいかなかった場合はそのバックアップの中身を再度コピペして元に戻せばいいですし、うまく編集ができてバックアップファイルが不要な場合は削除していただいてOKです。
実装方法
それでは、このページで紹介している見出しデザインの、ワードプレスへの実装方法を説明していきます。
ワードプレス以外のサービスへの実装方法に関しては、Googleで「○○ css追加」等で調べてみると方法が出てくると思いますので、ぜひ探してみてくださいね。
ワードプレスへの実装
ワードプレス で実装する場合、まずワードプレスのダッシュボードから、左側メニュー【外観】＞【カスタマイズ】と進みます。（使用しているテンプレート等で表示が異なる場合もありますのでご了承ください。）
次に、【追加CSS】をクリックします。
出てきた画面に、このページで紹介している見出しデザインの中から、使いたいデザインのCSSをコピペして、【公開】をクリックします。
なお、今回のサンプルでは全て【h2】タグのデザインとしてご紹介していますが、【h2】の部分を【h3】や【h4】にしてももちろん使用可能です。
全見出し好きな見出しデザインに変更して、素敵なブログを作ってくださいね！
基本のHTML
まずは基本のHTMLのご紹介。ワードプレスの場合はビジュアルモードで「見出し2」を選択すれば自動的に下記のようなHTMLが挿入されます。
|
1 |
<h2>これは見出しです</h2> |
このHTMLを基本として、CSSでデザインを整えていきます。
シンプルな見出しデザイン
最近はシンプルなデザインのブログも流行っていますよね。シンプルだけどしっかり主張して見出しだということをユーザーに分かってもらえるようなデザインがおすすめです。それではシンプルな見出しデザインのサンプルをご紹介します。
◆下線
まずは無難に下線を引いたデザインをご紹介。
実線
|
1 2 3 |
h2{ border-bottom: 3px solid #b0f416; } |
シンプルに実線の見出し。【solid】というのが実線の指定です。
ここから色と太さを変えてみるとこんな感じになります。
|
1 2 3 |
h2{ border-bottom: 1px solid #4d08f3; } |
だいぶ印象が変わりますよね！
ご自身の好きな色でいろいろ試してみると面白いと思います。
ここから先の見出しも色違いや太さ違いなどバリエーションを紹介していきますので、ぜひご自身好みにカスタマイズして楽しんでみてくださいね。
二重線
|
1 2 3 |
h2{ border-bottom: 3px double #ba1d46; } |
今度は二重線です。（画像だとほとんど分からないですね。汗）
二重線の時は、3px以上で指定するように注意してください。
3px以下に指定すると実線と見た目が変わらなくなってしまいます。
|
1 2 3 |
h2{ border-bottom: 10px double #42c8ae; } |
今度も色と太さを変えてみました。
二重線の場合は、指定した太さが【上下の線＋間の余白】全ての高さになります。
ドット
|
1 2 3 |
h2{ border-bottom: 1px dotted #b30000; } |
点線の見出しです。
実線に見えると思うのですが、画像をクリックして原寸大でみていただくと点線になっているのがわかると思います。
|
1 2 3 |
h2{ border-bottom: 3px dotted #36b2f2; } |
こちらの方が分かりやすいですね。
太さと色を変更しています。
太くするとわかるのですが、丸いドットではなく正方形のドットです。
ダッシュ
|
1 2 3 |
h2{ border-bottom: 1px dashed #4DB6AC; } |
ドットとダッシュ、微妙な違いなんですが、ドットは点ですがダッシュは短い線です。
よく切り取り線なんかで使われているような見た目ですね。
|
1 2 3 |
h2{ border-bottom: 3px dashed #EF6C00; } |
太さと色を変更して見るとドットとの違いが分かりやすいと思います。
余白の間隔を調整することはできません。
斜め線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h2{ position: relative; } h2:before{ content: ""; width: 100%; height: 6px; position: absolute; bottom: -6px; left: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.1, #80CBC4), color-stop(.1, transparent),color-stop(.5, transparent), color-stop(.5, #80CBC4),color-stop(.6, #80CBC4), color-stop(.6, transparent),to(transparent)); -webkit-background-size: 6px 6px; } |
ちょっとお洒落な斜め線の見出しです。
【:before】というのは擬似要素と呼ばれるもので、CSSで指定するとHTMLには存在しない要素を追加することができます。
【:before】の他に【:after】というのもあり、それぞれ指定したタグ（今回の例で言うとh2）の前後に要素を追加することができると言うことになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h2{ position: relative; } h2:before{ content: ""; width: 100%; height: 6px; position: absolute; bottom: -6px; left: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.2, #6D4C41), color-stop(.2, transparent),color-stop(.5, transparent), color-stop(.5, #6D4C41),color-stop(.7, #6D4C41), color-stop(.7, transparent),to(transparent)); -webkit-background-size: 6px 6px; } |
少し太い斜め線です。
色を変更する場合は、【background-image】の中にある#から始まる6桁の数字（カラーコード）が3箇所ありますので、全て同じものに変更してくださいね。
チビ線
|
1 2 3 4 5 6 7 8 9 10 11 12 |
h2{ position: relative; } h2:before{ content: ""; width: 3em; height: 5px; background: #C51162; position: absolute; bottom: -5px; left: 0; } |
見出し全体ではなく、ちょこっとだけ線を入れてみました。
大見出しではなく小見出しなどで活躍するかもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ position: relative; text-align: center; } h2:before{ content: ""; width: 3em; height: 5px; background: #00B0FF; position: absolute; bottom: -5px; left: 0; right: 0; margin: auto; } |
このチビ線はテキストをセンター揃えしてもお洒落に見えます。
異なる色での二重線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h2{ border-bottom: 2px solid #3421e2; position: relative; } h2:before{ content: ""; width: 100%; height: 1px; border-bottom: 2px solid #c8db23; position: absolute; bottom: -6px; left: 0; } |
単色での二重線は非常にシンプルなCSSでしたが、上下の色を変えた二重線にする場合は、擬似要素を使用して二重にしていきます。
擬似要素の位置はh2の線の太さ＋擬似要素の太さ＋余白分下に下げます。今回の例だと、h2の線の太さが2px＋擬似要素の太さが2px＋余白が2pxで合計6px下に下げる→【bottom: -6px】と指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h2{ border-bottom: 2px solid #CE93D8; position: relative; } h2:after{ content: ""; width: 100%; height: 1px; border-bottom: 12px solid #FFC107; position: absolute; bottom: 2px; left: 0; z-index: -1; } |
一方、わざと文字と被らせてマーカーのような雰囲気にすることも可能です。
このように擬似要素は一味違った見出しを作るのに大活躍します。
二色線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h2{ border-bottom: 3px solid #FFC107; position: relative; } h2:before{ content: ""; width: 100px; height: 1px; border-bottom: 3px solid #388E3C; position: absolute; bottom: -3px; left: 0; } |
色が途中で変化する見出しです。
元々の下線の上に、擬似要素で短い線を重ねています。
色の組み合わせでかなり印象が変わります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h2{ border-bottom: 3px solid #78909C; position: relative; } h2:before{ content: ""; width: 150px; height: 1px; border-bottom: 3px solid #651FFF; position: absolute; bottom: -3px; left: 0; } |
色を変更し、短い方の線の長さを少し長くしてみました。
グラデーション線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
h2{ position: relative; } h2:before{ content: ""; width: 100%; height: 3px; position: absolute; bottom: -3px; left: 0; /* ここから下を削除してコピペ */ background: #002400; /* Old browsers */ background: -moz-linear-gradient(left, #002400 0%, #005700 17%, #008a00 33%, #52b152 67%, #83c783 83%, #b4ddb4 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #002400 0%,#005700 17%,#008a00 33%,#52b152 67%,#83c783 83%,#b4ddb4 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #002400 0%,#005700 17%,#008a00 33%,#52b152 67%,#83c783 83%,#b4ddb4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002400', endColorstr='#b4ddb4',GradientType=1 ); /* IE6-9 */ } |
左から右へ、グラデーションになっている線です。
グラデーションは自分でCSSを書こうとすると時間がかかってしまうので、便利なジェネレーターを使うのがおすすめです。
【 /* ここから下を削除してコピペ */】と書かれているところから下を全て削除し、ジェネレーターで作成したCSSをコピペしてくださいね。
その際、右側にある【Orientation】を【horizontal →】にすると見本のように左から右に色が変わる線になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
h2{ position: relative; } h2:before{ content: ""; width: 100%; height: 5px; border-radius: 2.5px; position: absolute; bottom: -5px; left: 0; /* ここから下を削除してコピペ */ background: #0fb4e7; /* Old browsers */ background: -moz-linear-gradient(left, #0fb4e7 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #0fb4e7 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #0fb4e7 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fb4e7', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } |
最後を背景と同じ色（ここでは白）にすると、徐々に消えていくような線になります。
今回はそれに加え、【border-radius】で線に丸みをつけています。
高さの半分の値を指定することで先が丸い線にすることができますよ。
◆左にのみ線
次はブログなどでよく見る、左側だけに線があるパターンです。
一本線
|
1 2 3 4 |
h2{ padding-left: 10px; border-left: 5px solid #E84900; } |
お好きな色で入れてみてください。
色や太さ、長さで雰囲気が変わります。
|
1 2 3 4 |
h2{ padding: 10px; border-left: 3px solid #2BE800; } |
こちらは線を細くした上で、上下にも少し伸ばしてあります。
1つ目の例が【padding-top: 10px;】だったのに対し、今回は【padding: 10px;】となっていますね？
paddingとは内側の余白のことで、top・bottom・right・leftといった指定を入れずに数字を設定した場合、
全てに対して同じ余白が適用されます。
【padding: 10px 20px;】とスペースを空けて2つ指定した場合は最初の数字が上下、2番目が左右の指定です。
二本線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h2{ padding-left: 20px; border-left: 5px solid #00DFE8; position: relative; } h2:before{ content: ""; width: 1px; height: 100%; border-left: 2px solid #00DFE8; position: absolute; top: 0; left: 3px; } |
左側に２本、線を入れるとちょっとお洒落な雰囲気になります。
擬似要素【before】を使って２本目の線を表現しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h2{ padding-left: 20px; border-left: 5px solid #E8006C; position: relative; } h2:before{ content: ""; width: 1px; height: 100%; border-left: 2px solid #E8A2C3; position: absolute; top: 0; left: 3px; } |
１本目と２本目の線の色を変えるだけでもだいぶ雰囲気が変わりますね。
◆左＋下に線
こちらもブログの見出しでよく見るデザイン。
実線
|
1 2 3 4 5 |
h2{ padding: 10px; border-left: 10px solid #A2E6E8; border-bottom: 2px solid #A2E6E8; } |
左側が太線、下が細線の定番デザインです。
|
1 2 3 4 5 |
h2{ padding: 10px; border-left: 2px solid #A2E8A5; border-bottom: 10px solid #A2E8A5; } |
逆にしてみるとまた印象が変わりますね。
お好みで色々と試してみてください。
二本線
|
1 2 3 4 5 |
h2{ padding: 10px; border-left: 5px solid #E0E846; border-bottom: 5px double #E0E846; } |
下線だけ２本線にしてみました。
左と下を同じ大きさにすると境が綺麗です。
|
1 2 3 4 5 |
h2{ padding: 10px; border-left: 10px double #4E46E8; border-bottom: 10px solid #4E46E8; } |
今度は左側を２本線にしてみました。
境をよく見てみると45度の角度で左の線と下の線が隣接しているのが分かります。
ドット
|
1 2 3 4 5 |
h2{ padding: 10px; border-left: 5px solid #E89F46; border-bottom: 3px dotted #E89F46; } |
ちょっと遊び心を持って点線の下線も面白いですね。
|
1 2 3 4 5 |
h2{ padding: 10px; border-left: 5px solid #E8382E; border-bottom: 2px dotted #222222; } |
左の線と下線の色を変えてみるのも良いですよ。
いろんな組み合わせで試してみてください。
◆上下に線
見出しの上下に線を入れることでより見出しを強調することができます。
太線
|
1 2 3 4 5 6 |
h2{ padding: 10px 0; border-top: 10px solid #2EDFE8; border-bottom: 10px solid #2EDFE8; text-align: center; } |
ガッツリと太い上下の線の間に、文字を中央寄せで配置しました。
|
1 2 3 4 5 6 7 |
h2{ padding: 10px 0; border-top: 10px solid #222222; border-bottom: 10px solid #222222; text-align: center; color: #E8382E; } |
あえて見出しの文字色を変えて、線の色は黒にしてみるというのもアリです。
細線
|
1 2 3 4 5 |
h2{ padding: 10px 0; border-top: 2px solid #952EE8; border-bottom: 2px solid #952EE8; } |
細い線だとより大人しい印象ですが、しっかり見出しだと分かりますね。
|
1 2 3 4 5 |
h2{ padding: 10px 0; border-top: 5px solid #E8952E; border-bottom: 2px solid #E8952E; } |
上下で線の色を変えてみるのも面白いですよ。
前の段落とはっきり差をつけたい時などに良いかもしれません。
上だけ二重線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ padding: 10px 0; border-top: 5px solid #E82EDF; border-bottom: 5px solid #E82EDF; position: relative; } h2:before{ content: ""; width: 100%; height: 1px; border-top: 2px solid #E82EDF; position: absolute; top: 3px; left: 0; } |
擬似要素で上にもう１本線を追加してみました。
普通の上下線よりも可愛いですね!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ padding: 10px 0; border-top: 2px solid #222; border-bottom: 2px solid #222; position: relative; } h2:before{ content: ""; width: 100%; height: 1px; border-top: 5px solid #A6A2E8; position: absolute; top: 0; left: 0; } |
上下の線とは色を変えて、あえて上の線と隙間を作らず配置してみるとマーカーをひいたような雰囲気になります。
下だけ二重線
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ padding: 10px 0; border-top: 5px solid #A2E8C9; border-bottom: 5px solid #A2E8C9; position: relative; } h2:after{ content: ""; width: 100%; height: 1px; border-top: 2px solid #A2E8C9; position: absolute; bottom: 3px; left: 0; } |
先ほどとは反対に、下を二重にしてみたパターン。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ padding: 10px 0; border-top: 5px solid #E8A2E5; border-bottom: 5px solid #E8A2E5; position: relative; } h2:after{ content: ""; width: 100%; height: 1px; border-bottom: 3px solid #ccc; position: absolute; bottom: 0px; left: 0; } |
今度は擬似要素の線を下にぴったり付けてみました。
さりげない色の変化がお洒落です。
◆背景
見出しに背景色がついていると、スクロールしても目につきやすいので読んでもらえる確率が高くなります。
文字の色とのバランスを考えて背景色を決めてみてくださいね。
単色背景
オーソドックスな単色背景です。明るい色がオススメです。
|
1 2 3 |
h2{ background: #ffcc00; } |
ただ、このままだとちょっと詰まっている感じがして見づらいので、内側の余白（padding）を入れてあげるのがオススメです。
|
1 2 3 4 |
h2{ background: #2EDFE8; padding: 20px; } |
かなり見やすくなりましたね！適度な余白を入れることで見やすくなりますので、背景色を設定する際は必ずpaddingを設定するようにしてください。
グラデーション背景
|
1 2 3 4 5 6 7 8 9 |
h2{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#febbbb+0,fe9090+45,ff5c5c+100;Red+3D+%231 */ background: #febbbb; /* Old browsers */ background: -moz-linear-gradient(left, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=1 ); /* IE6-9 */ padding: 20px; } |
グラデーションが美しい背景です。
前でご紹介した、便利なジェネレーターを使ってお好みのグラデーション背景を作ってみてくださいね。
こちらもpaddingを設定することで見やすくしています。
|
1 2 3 4 5 6 7 8 9 |
h2{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#febbbb+0,fe9090+45,ff5c5c+100;Red+3D+%231 */ background: #febbbb; /* Old browsers */ background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */ padding: 20px } |
グラデーションの向きを水平から垂直に変えるだけでも雰囲気がだいぶ変わります。
先ほどのジェネレータの右側に、向きを変える項目があるのでここを変更してからコピペしてくださいね。
ボーダー背景
|
1 2 3 4 |
h2{ background-image: repeating-linear-gradient(-45deg, #fff 0 4px, #eee 4px 7px); padding: 20px; } |
CSSだけでボーダー背景が作れるなんて驚きですよね！
しかもとってもシンプルなコードで設定することができます。
repeating-linear-gradientで角度、１色目の色＆太さ、２色目の色＆太さと決めることができます。
|
1 2 3 4 |
h2{ background-image: repeating-linear-gradient(-45deg, #fbdf93 0 4px, #FCEABB 4px 7px); padding: 20px; } |
色の組み合わせを変えるだけで自由自在にボーダー背景を作成することができます。
|
1 2 3 4 |
h2{ background-image: repeating-linear-gradient(-45deg, #fff 0 10px, #eee 10px 20px); padding: 20px; } |
太さも簡単に変えることができますね。
最初の0〜10pxは#fff、次の10px〜20pxは#eeeにしてください、という指示ですので、今回は白10px、グレー10pxのボーダーが出来上がりました。
幅を自在に変えることで雰囲気の違うボーダーを作ることができますよ。
|
1 2 3 4 |
h2{ background-image: repeating-linear-gradient(0deg, #fff 0 5px, #eee 5px 7px); padding: 20px; } |
横ボーダーの場合は角度を0度にするだけ。簡単！
|
1 2 3 4 |
h2{ background-image: repeating-linear-gradient(90deg, #fff 0 5px, #eee 5px 7px); padding: 20px; } |
縦ボーダーは横に対して90度回転するだけです。
こちらもボーダーの幅は好きに変えることができますので試してみてくださいね。
画像背景
|
1 2 3 4 |
h2{ background-image: url(背景画像のURL); padding: 20px; } |
背景画像を使うことで一味違った見出しにすることができます。
background-imageのカッコ内にアップロードした画像のURLを入れてくださいね。
ちなみに上記のように設定した場合、元画像の大きさで表示されるのではなく、見出しのサイズに合わせて表示されます。
|
1 2 3 4 5 |
h2{ background-image: url(背景画像のURL); color: #fff; padding: 50px 20px; } |
暗めの背景画像を使うときは、文字色を白などに変更しておきましょう。
paddingも大きめにとっておくと背景画像が表示される範囲が広がるので、より背景画像が活きます。
ただし、あまり1ページ内で多用するとうるさくなるので気をつけましょう。
◆線＋背景
線と背景を組み合わせるとより印象的な見出しを作ることができます。
下線＋背景
|
1 2 3 4 5 |
h2{ background: #B7DEED; border-bottom: #21b4e2 3px solid; padding: 20px } |
王道は下線＋背景。同系色でまとめると綺麗にまとまります。
|
1 2 3 4 5 |
h2{ background: #A2E8A5; border-bottom: #005700 3px dotted; padding: 20px; } |
下線を点線にしてみても面白いですね。
上線＋背景
|
1 2 3 4 5 |
h2{ background: #E8A2C3; border-top: 5px solid #E8006C; padding: 20px; } |
線を上に持ってくるのもよくあります。
前のセクションとの区切りがはっきりするので読み物系のブログにいいかもしれません。
|
1 2 3 4 5 |
h2{ background: #eee; border-top: #333 5px double; padding: 20px } |
二重線にするとまた雰囲気が変わりますね。
カラフルに色を使わなくても、しっかり背景を強調することができます。
左線＋背景
|
1 2 3 4 5 |
h2{ background: #febbbb; border-left: #ff5c5c 10px solid; padding: 20px; } |
背景色の左側に線をつけることで付箋のようなデザインになります。
|
1 2 3 4 5 |
h2{ background: #A6A2E8; border-left: #222 solid 30px; padding: 20px; } |
思いっきり太くしてみても良いですね。
ご自身のサイトの雰囲気に合った太さを探してみてください。
◆枠
見出しに枠をつけることで強調する方法もあります。
シンプル枠
|
1 2 3 4 |
h2{ border: 3px solid #EF6C00; padding: 10px; } |
シンプルですがしっかり強調されますね。
|
1 2 3 4 |
h2{ border: 10px solid #FCEABB; padding: 10px; } |
枠を太くする場合は、少し薄めの色を選ぶとバランスがいいですよ。
ドット枠
|
1 2 3 4 |
h2{ border: 2px dotted #E82EDF; padding: 10px; } |
ドット枠にすると、少し雰囲気が変わります。
borderの中をdottedにするだけなので簡単ですね。
|
1 2 3 4 |
h2{ border: 5px dotted #A2E8C9; padding: 10px; } |
太めのドット枠にするとポップな印象になりますね。
二重枠
|
1 2 3 4 |
h2{ border: 5px double #00B0FF; padding: 10px; } |
二重枠にするとよりおしゃれな見出しになります。
|
1 2 3 4 |
h2{ border: 10px double #CE93D8; padding: 10px; } |
太くするのもおすすめです。
ずらした二重枠
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h2{ border: 1px solid #000; padding: 15px 10px 10px 15px; position: relative; } h2::before{ content: ""; width: 100%; height: 100%; border: 1px solid #000; position: absolute; top: 5px; left: 5px; } |
ずらし枠の見出しは一気にお洒落になりますね。
擬似要素を使ってずらし枠を表現します。
見出しのpaddingをずらした分だけ増やすのがポイントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h2{ border: 3px solid #E89F46; padding: 18px 10px 10px 18px; position: relative; } h2::before{ content: ""; width: 100%; height: 100%; border: 3px solid #E89F46; position: absolute; top: 5px; left: 5px; } |
線を太くした場合はその分もpaddingを増やすのがおすすめです。
タイトル付き枠
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h2{ border: 1px solid #333; padding: 20px; position: relative; } h2::before{ content: "メモ"; width: 100px; height: 30px; border-radius: 10px 10px 0 0; background: #333; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; position: absolute; top: -30px; left: 30px; } |
タイトルが付いた見出しも個性的で面白いですよね。
擬似要素内のcontentの文字列を変えればタグのタイトルを簡単に変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h2{ border: 1px solid #52b152; padding: 20px; position: relative; } h2::before{ content: "タグタイトル"; width: 150px; height: 30px; border-radius: 10px 10px 0 0; background: #52b152; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; position: absolute; top: -30px; right: 30px; } |
書類のインデックスのようなデザインでおしゃれですよね。
左右はお好みで決めてみてくださいね。
◆枠＋背景
枠と背景を組み合わせるとより目立つ見出しになります。
枠＋背景
|
1 2 3 4 5 |
h2{ background: #A2E6E8; border: 3px solid #36b2f2; padding: 10px; } |
同系色でまとめるとすっきりします。
|
1 2 3 4 5 6 |
h2{ background: #002400; border: 5px solid #008a00; color: #fff; padding: 10px; } |
背景を濃い色にする場合は文字色を白にすると見やすくなります。
枠＋背景をずらす
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ background: #febbbb; padding: 10px 15px 15px 10px; position: relative; } h2::before{ content: ""; width: 100%; height: 100%; border: 2px solid #C51162; box-sizing: border-box; position: absolute; top: -5px; left: -5px; } |
枠をずらす見出しの応用編、背景が少しずれた見出しです。
ちょっと上級な見出しに見えますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h2{ background: #222; color: #fff; padding: 10px 15px 15px 10px; position: relative; } h2::before{ content: ""; width: 100%; height: 100%; border: 2px solid #777; box-sizing: border-box; position: absolute; top: -5px; left: -5px; } |
濃い背景色もかっこいいですよ！
◆左右中央に線
見出しの両端に線を入れるとちょっとお洒落な感じになりますよね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h2{ text-align: center; position: relative; width: fit-content; } h2::before, h2::after{ content: ""; width: 100px; height: 1px; background: #000; position: absolute; top: 50%; } h2::before{ left: -110px; } h2::after{ right: -110px; } |
この例は線の長さを100pxにしています。お好みで変えていただいてもOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h2{ text-align: center; position: relative; width: fit-content; } h2::before, h2::after{ content: ""; width: calc((1000px - 100% - 20px)/2); height: 1px; background: #000; position: absolute; top: 50%; } h2::before{ left: calc((1000px - 100%)/2*(-1)); } h2::after{ right: calc((1000px - 100%)/2*(-1)); } |
横幅いっぱいに線を表示させたい場合はこちらをお使いください。下のようにタイトルの文章が長くなっても大丈夫です。
おしゃれな見出しデザイン
ここからはより複雑なCSSを使いこなして、お洒落な見出しデザインにチャレンジしてみましょう。
◆リボン
シンプルリボン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
h2{ text-align: center; background: #aef1f5; line-height: 70px; position: relative; } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: transparent 35px solid; border-bottom: transparent 35px solid; position: absolute; top: 0; } h2::before{ border-right: #fff 30px solid; right: 0; } h2::after{ border-left: #fff 30px solid; left: 0; } |
両側がリボンの切れ目のようになっている見出しです。h2のbackgroundを変更すればお好きな色のリボンにできますよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
h2{ text-align: center; background: #ff5c5c; color: #fff; line-height: 70px; position: relative; } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: transparent 35px solid; border-bottom: transparent 35px solid; position: absolute; top: 0; } h2::before{ border-right: #fff 30px solid; right: 0; } h2::after{ border-left: #fff 30px solid; left: 0; } |
濃い色のリボンにする場合は文字色を白にすると読みやすいです。ただし、見出しが2行以上になってしまうと崩れてしまうので注意してください。
片方だけリボン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
h2{ background: #EF6C00; color: #fff; line-height: 70px; padding-left: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-right: #fff 30px solid; border-top: transparent 35px solid; border-bottom: transparent 35px solid; position: absolute; top: 0; right: 0; } |
片側だけリボンのデザインです。こちらも1行のみに対応しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
h2{ background: #52b152; line-height: 70px; padding-left: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-right: #fff 50px solid; border-top: transparent 35px solid; border-bottom: transparent 35px solid; position: absolute; top: 0; right: 0; } |
リボンの切り込みを深くしたい場合、h2::beforeのborder-rightの太さを大きくしてみてくださいね。
影付きリボン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
h2{ text-align: center; background: #A2E8A5; line-height: 70px; position: relative; box-shadow: 0 3px 3px rgba(0,0,0,.2); } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: transparent 38px solid; border-bottom: transparent 38px solid; position: absolute; top: -3px; } h2::before{ border-right: #fff 30px solid; right: -3px; } h2::after{ border-left: #fff 30px solid; left: -3px; } |
リボンに影を付けてみるとより立体的になって目立ちますね。
影をつけるときは、擬似要素も少し大きくしないと長方形に影が出てしまいますので、サイズを変える時は気をつけてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
h2{ text-align: center; background: #E89F46; line-height: 70px; width: fit-content; padding: 0 100px; position: relative; box-shadow: 0 3px 3px rgba(0,0,0,.2); } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: transparent 38px solid; border-bottom: transparent 38px solid; position: absolute; top: -3px; } h2::before{ border-right: #fff 30px solid; right: -3px; } h2::after{ border-left: #fff 30px solid; left: -3px; } |
リボンの幅を見出しの長さに合わせて短くするとよりリボンっぽくなります。
width: fit-content; は要素の横幅に合わせてくれます。リボンの切り込み分を考えてpaddingを設定してみてくださいね。
ステッチありのリボン
今回のHTMLは少し要素を追加します。
|
1 |
<h2><span>これは見出しです</span></h2> |
CSSはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
h2{ text-align: center; background: #87db87; color: #fff; height: 70px; line-height: 46px; padding: 10px; box-sizing: border-box; position: relative; } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: transparent 35px solid; border-bottom: transparent 35px solid; position: absolute; top: 0; } h2::before{ border-right: #fff 30px solid; right: 0; } h2::after{ border-left: #fff 30px solid; left: 0; } h2 span{ border-top: #fff dashed 2px; border-bottom: #fff dashed 2px; display: block; box-sizing: border-box; } |
h2 spanの部分でステッチを追加しています。ステッチ付きだと可愛らしい印象になりますね！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
h2{ text-align: center; background: #E8A2C3; color: #fff; height: 100px; padding: 10px; box-sizing: border-box; position: relative; } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: transparent 50px solid; border-bottom: transparent 50px solid; position: absolute; top: 0; } h2::before{ border-right: #fff 50px solid; right: 0; } h2::after{ border-left: #fff 50px solid; left: 0; } h2 span{ border-top: #fff dashed 2px; border-bottom: #fff dashed 2px; box-sizing: border-box; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; } |
縦幅を太くする場合は、h2の高さ、h2 spanの高さ両方とも大きくする必要があります。h2 spanの高さはh2の高さからpadding 10px×2=20px分を引いた80pxにしました。
また、こちらは太くしたことで2行まで対応しています。
用途に合わせて選んでみてくださいね。
折り目付きリボン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ background: #febbbb; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #fe9090 20px solid; border-left: transparent 30px solid; position: absolute; bottom: -20px; left: 0; } |
紙が折れたようなデザインの見出しです。基本的には、影で濃くなっているように見せるため、同系色の濃い目の色を影の部分に選ぶのがおすすめです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ background: #21b4e2; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #B7DEED 20px solid; border-left: transparent 30px solid; position: absolute; bottom: -20px; left: 0; } |
色の濃さを反対にしてみると両面の色紙が折れているような感じになりますね。
ぐるっと一周リボン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
h2{ background: #febbbb; padding: 20px; position: relative; } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: #fe9090 20px solid; position: absolute; bottom: -20px; } h2::before{ border-left: transparent 30px solid; left: 0; } h2::after{ border-right: transparent 30px solid; right: 0; } |
両端に折れ目のあるリボンを表現しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
h2{ background: #87db87; padding: 20px; position: relative; } h2::before, h2::after{ content: ""; width: 0; height: 0; border-top: #388E3C 20px solid; position: absolute; bottom: -20px; } h2::before{ border-left: transparent 50px solid; left: 0; } h2::after{ border-right: transparent 50px solid; right: 0; } |
擬似要素のborder-leftの太さを大きくすると、影の部分が長くなり深く折り返しているように見えます。
縦のリボン
HTMLはこちら
|
1 |
<h2><span>★</span>これは見出しです</h2> |
CSSはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
h2{ height: 80px; display: flex; align-items: center; padding-left: 80px; position: relative; } h2 span{ content: ""; width: 60px; height: 80px; background: #b30000; color: #ffcc00; display: flex; align-items: center; justify-content: center; padding-bottom: 20px; box-sizing: border-box; position: absolute; top: 0; left: 10px; } h2 span::before{ content: ""; width: 0; height: 0; border-bottom: #fff solid 20px; border-left: transparent solid 30px; border-right: transparent solid 30px; position: absolute; bottom: 0; left: 0; } |
ワンポイントで垂れ幕のように縦のリボンを入れてみました。
テキストを入れることもできますよ。
|
1 |
<h2><span>注目</span>これは見出しです</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
h2{ height: 80px; display: flex; align-items: center; padding-left: 80px; position: relative; } h2 span{ content: ""; width: 60px; height: 80px; background: #b30000; color: #fff; font-size: .7em; display: flex; align-items: center; justify-content: center; padding-bottom: 20px; box-sizing: border-box; position: absolute; top: 0; left: 10px; } h2 span::before{ content: ""; width: 0; height: 0; border-bottom: #fff solid 20px; border-left: transparent solid 30px; border-right: transparent solid 30px; position: absolute; bottom: 0; left: 0; } |
見出しのフォントサイズよりリボンの文字は小さいサイズがおすすめです。
裏からぐるっと縦のリボン
|
1 |
<h2><span>注目</span>これは見出しです</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
h2{ height: 80px; display: flex; align-items: center; padding-left: 80px; position: relative; } h2 .ribbon{ content: ""; width: 60px; height: 80px; background: #b30000; color: #fff; font-size: .7em; display: flex; align-items: center; justify-content: center; padding-bottom: 20px; box-sizing: border-box; position: absolute; top: 0; left: 10px; } h2 .ribbon::before{ content: ""; width: 0; height: 0; border-bottom: #fff solid 20px; border-left: transparent solid 30px; border-right: transparent solid 30px; position: absolute; bottom: 0; left: 0; } h2 .ribbon::after{ content: ""; width: 0; height: 0; border-bottom: #850000 20px solid; border-right: transparent 10px solid; position: absolute; top: 0; right: -10px; } |
折り目付きのリボンの応用編です。後ろからぐるっと折られているようなデザインで立体感を出しています。
◆吹き出し
ちょっとユニークな吹き出しの見出しをご紹介します。
シンプル吹き出し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h2{ background: #B7DEED; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #B7DEED 15px solid; border-left: transparent 10px solid; border-right: transparent 10px solid; position: absolute; bottom: -15px; left: 100px; } |
四角の下に擬似要素で三角を作り、吹き出しを作成しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
h2{ background: #CE93D8; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #CE93D8 15px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -15px; left: 0; right: 0; margin: auto; } |
吹き出しの三角を真ん中に持ってくるのもユニークです。擬似要素のborder-leftとborder-rightの幅を太くすると、横幅な三角形になります。
外枠吹き出し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
h2{ background: #fff; border: 2px solid #EF6C00; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #EF6C00 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -20px; left: 100px; } h2::after{ content: ""; width: 0; height: 0; border-top: #fff 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -17px; left: 100px; } |
吹き出しに外枠をつけたい場合、少し複雑になってきます。
背景色の三角、外枠の色の三角2つを擬似要素で作成し、少しずらして配置することで外枠を表現しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
h2{ color: #fff; background: #36b2f2; border: 2px solid #3421e2; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #3421e2 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -20px; left: 100px; } h2::after{ content: ""; width: 0; height: 0; border-top: #36b2f2 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -17px; left: 100px; } |
背景色を追加しても良いですね。
角丸吹き出し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
h2{ background: #83c783; border-radius: 10px; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #83c783 15px solid; border-left: transparent 10px solid; border-right: transparent 10px solid; position: absolute; bottom: -15px; left: 100px; } |
吹き出しの角を丸くすることで柔らかい印象になります。
角丸にするには、h2にborder-radiusを設定してあげれば良いですよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
h2{ color: #fff; background: #ba1d46; border-radius: 30px; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #ba1d46 15px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -15px; left: 0; right: 0; margin: auto; } |
角丸を大きくするとまた印象が変わりますね。
角丸外枠吹き出し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
h2{ background: #fff; border: 2px solid #005700; border-radius: 10px; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #005700 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -20px; left: 100px; } h2::after{ content: ""; width: 0; height: 0; border-top: #fff 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -17px; left: 100px; } |
角丸の吹き出しを外枠のみで表現しています。基本的には普通の外枠吹き出しと同様です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
h2{ background: #fbdf93; border: 2px solid #ffcc00; border-radius: 50px; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #ffcc00 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -20px; left: 100px; } h2::after{ content: ""; width: 0; height: 0; border-top: #fbdf93 20px solid; border-left: transparent 20px solid; border-right: transparent 20px solid; position: absolute; bottom: -17px; left: 100px; } |
border-radiusを縦幅の半分以上の大きさにすると、両端が半円の形になります。
下線のみ吹き出し
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
h2{ background: #fff; border-bottom: #000 2px solid; padding: 20px; position: relative; } h2::before{ content: ""; width: 0; height: 0; border-top: #000 15px solid; border-left: transparent 10px solid; border-right: transparent 10px solid; position: absolute; bottom: -15px; left: 100px; } h2::after{ content: ""; width: 0; height: 0; border-top: #fff 15px solid; border-left: transparent 10px solid; border-right: transparent 10px solid; position: absolute; bottom: -12px; left: 100px; } |
h2の外枠を下のみにすることでちょっとお洒落な吹き出しになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
h2{ background: #fff; border-bottom: #b30000 2px solid; padding: 20px; position: relative; text-align: center; } h2::before{ content: ""; width: 0; height: 0; border-top: #b30000 15px solid; border-left: transparent 10px solid; border-right: transparent 10px solid; position: absolute; bottom: -15px; left: 0; right: 0; margin: auto; } h2::after{ content: ""; width: 0; height: 0; border-top: #fff 15px solid; border-left: transparent 10px solid; border-right: transparent 10px solid; position: absolute; bottom: -12px; left: 0; right: 0; margin: auto; } |
吹き出しは文字のあるところにあった方が良いと思うので、文字を中央揃えにする場合は吹き出しも中央に配置すると良いでしょう。
◆ワンポイント付き
最後に、ワンポイント付きの見出しをご紹介します。
四角のワンポイント
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ padding-left: 30px; position: relative; } h2::before{ content: ""; width: 20px; height: 20px; background: #388E3C; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } |
シンプルに見出しの直前に四角のワンポイントを入れた見出しです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
h2{ border-bottom: 3px solid #00B0FF; padding-bottom: 20px; padding-left: 50px; position: relative; } h2::before{ content: ""; width: 20px; height: 20px; background: #B7DEED; position: absolute; left: 10px; bottom: 25px; } h2::after{ content: ""; width: 20px; height: 20px; border: #00B0FF 1px solid; position: absolute; left: 15px; bottom: 30px; } |
もうちょっとお洒落にしてみました。下線を追加し、四角のワンポイントを外枠と背景がずれたようなデザインです。
先頭を大文字に
|
1 2 3 |
h2:first-letter{ font-size: 2em; } |
シンプルなCSSですがこれで最初の文字だけCSSを反映させることができます。
|
1 2 3 4 |
h2:first-letter{ font-size: 2em; color: #C51162; } |
文字色を変えてみてもお洒落です。
丸を重ねる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ padding: 20px; position: relative; } h2::before{ content: ""; width: 60px; height: 60px; border-radius: 30px; background: #FCEABB; position: absolute; top: 0; left: 0; z-index: -1; } |
見出しの前に円を重ねてみました。ポップな印象になりますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
h2{ padding-left: 15px; position: relative; } h2::before{ content: ""; width: 60px; height: 60px; border-radius: 30px; background: #FCEABB; position: absolute; top: 0; left: 0; z-index: -1; } h2:first-letter{ font-size: 2em; } |
先ほどの最初の文字だけ大きくする見出しと組み合わせてみました。なかなかお洒落ですよね！
オリジナルの見出しにする方法
ここまで見出しの例をご紹介してきましたが、ここからは今までご紹介してきた見出しを、オリジナルのものに変更する方法を解説していきます。
色の変更方法
CSSで色を表現する際は、カラーコードと呼ばれるものを使用します。
「カラーコード」で検索すると色々参考になるサイトが出てきますので参考にしてみてくださいね。
カラーコードを使用しているのは以下のような個所です。
|
1 2 3 4 5 |
h2{ color: #CC0000; /*文字色*/ background: #FFFFCC; /*背景色*/ border: 3px solid #00B0FF; /*枠線の色*/ } |
それぞれ#で始まる6桁の数字を変更することで好みの色の見出しに変更することができます。
線の太さの変更方法
線の太さは以下の部分で指定しています。
|
1 2 3 |
h2{ border-bottom: 3px solid #00B0FF; } |
上の3pxの部分を大きい数字にすれば太くなりますし、小さい数字にすれば細くなります。
上下左右の太さを変えたい場合は、以下のようにも指定することができます。
|
1 2 3 |
h2{ border-width: 3px 2px 10px 1px; } |
左から上、右、下、左の線の太さを指定しています。下の記述でも同じ指定になります。
|
1 2 3 4 5 6 |
h2{ border-top-width: 3px; border-right-width: 2px; border-bottom-width: 10px; border-left-width: 1px; } |
実際の画面で確認しながらCSSを決定してみてくださいね。
複数のデザインの使い分け方
同じh2でも、ここだけ違うデザインにしたいとか、2種類のデザインを使い分けたいなんて時もあると思います。そういったときには「クラス」というのを使うと便利です。
例えば標準の見出しはこれ
たまにこちらも使いたい
なんてときには、それぞれ以下のようにHTMLを書きます。
|
1 2 3 |
<h2 class="double-border">これは見出しです</h2> <h2 class="center-line">これは見出しです</h2> |
class=””がミソです。double-border等の名前は自分が分かりやすい名前をつけてくださいね。
その上で、CSSは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*上の見出し*/ h2.double-border{ border: 5px double #00B0FF; padding: 10px; } /*下の見出し*/ h2.center-line{ text-align: center; position: relative; width: fit-content; } h2.center-line::before, h2.center-line::after{ content: ""; width: 100px; height: 1px; background: #000; position: absolute; top: 50%; } h2.center-line::before{ left: -110px; } h2.center-line::after{ right: -110px; } |
クラスは先頭に「.」をつけるというルールになっています。
このようにすることで簡単に使い分けることができますのでぜひ試してみてくださいね。
