実戦で使える見出しのクラスをスタイルシートで作成 HTML(CSS)復習⑤
こんにちは、
今回は実戦で使える”見出し"のクラスをスタイルシートで作成していきます。
HTMLタグでは見出しをH1～H5ぐらいまでのタグを使って見出しを作成していきます。
例えば新聞で言えば大見出しがH1 小さい見出しがh2~h5みたいなイメージです。
ブログで言えばタイトルがH1
次の大きな見出しがH2です。
ということで、今回はH2タグをスタイルシートで設定していきます。
フォントサイズは20pxにしたいので
font-size: 20px;
領域の背景色はbackground: lightblue;
文字と領域の余白はpadding: 10px;
領域の左と下に黒の実線を引きたいので
border-bottom: 3px solid ♯000;
border-left: 3px solid #000;
また四隅を丸くしたいので
border-radius: 10px;
とします。
スタイルシート(h2タグのlightblueクラス)には次のように記述します。
h2.lightblue{
font-size: 25px;
background: lightblue;
padding: 10px;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
border-radius: 10px;
}
記事中には次のように記述します。
<h2 class="lightblue">実戦で使える見出しのクラスをCSSで作成</h2>
するとこうなります。
実戦で使える見出しのクラスをCSSで作成
かなり実戦で使っても違和感がない感じになってきました！
次は文字の大きさや線の引き方などいくつか見出しのクラスをCSSで作成していきたいと思います。
♯HTMLタグ
♯CSS
♯ブログ編集方法
