見出しにアイコンを入れてみる HTMLタグ、CSS復習⑨

こんにちは、今回はHMTLタグ,CSS復習の９回目です。

見出しにアイコンを入れてみます。

見出しにアイコンを入れてみる

アイコンを入れない場合の見出しは

purechan22.hatenablog.com

のページも参照してください。

見出しにアイコンを入れない場合は

・スタイルシート

h2.lightblue{
font-size: 15px;
background: lightblue;
padding: 10px;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
border-radius: 10px;
}

・記事中の記述

<h2 class="lightblue">見出しにアイコンが入っていない場合</h2>

となります。

するとこうなります。

見出しにアイコンが入っていない場合

ここに見出しのアイコン画像

を入れていきます。

まず見出しの左にアイコン画像を入れるための余白を設定します。

padding-left: 50px;

ここに画像を入れていきます。

background: lightblue url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/purechan22/20221007/20221007180814.png);

画像の大きさはcontainを入れると自動で調整してくれます。画像は一回しか使わず繰り返さないのでno-repeatを入れます。

background-size: contain;
background-repeat: no-repeat;

まとめると追加する部分はこうなります。

padding-left: 50px;
background: lightblue url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/purechan22/20221007/20221007180814.png);
background-size: contain;
background-repeat: no-repeat;

全体のスタイルシート

h2.lightbluekingyo{
font-size: 15px;
padding: 10px;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
border-radius: 10px;
padding-left: 50px;
background: lightblue url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/purechan22/20221007/20221007180814.png);
background-size: contain;
background-repeat: no-repeat;
}

記事中の記述

<h2 class="lightbluekingyo">見出しにアイコンを入れてみる</h2>

これで出来上がりです。↓↓

見出しにアイコンを入れてみる

♯スタイルシート
♯CSS
♯HTMLタグ