はじめに
見出しに線を入れたり、飾り付けて見やすくしているページをよくみるのですが、どうやって実装しているんですかね・・
見出しに線を入れたりするのは、見出しのタグh2,h3などにcssを使うことで実装していますね。
なるほど・・見出しタグのh2,h3などにcssを使ってやっているんですね・・具体的にはどうやって実装しているんでしょうか?
では今回は、見出しタグにcssで簡単な飾り付けを行っていこうと思います。
cssを使って見出しを飾る
今回の記事では、cssを使って見出しタグによく使われているborderを使って飾り付けていくサンプルを数点ご紹介したいと思います。
サンプルコード
<!DOCTYPE html> <head> <title>cssで見出しダグを飾りつけよう</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h4 class="midashi_sample1">見出しタグh4の左側をcssで飾り付けます。</h4> <h4 class="midashi_sample2">見出しタグh4の左側と下側をcssで飾り付けます。</h4> <h4 class="midashi_sample3">見出しタグh4の上下をcssで飾り付けます。</h4> <h4 class="midashi_sample4">見出しタグh4の中央に線を引いてcssで飾り付けます。</h4> <h4 class="midashi_sample5">見出しタグh4の背景に色を塗り角を丸くしてcssで飾り付けます。</h4> </body> </html>
CSS
.midashi_sample1{ border-left:5px solid blue; text-indent:1em; } .midashi_sample2{ border-left:5px solid blue; border-bottom:2px solid blue; } .midashi_sample3{ border-top:2px solid blue; border-bottom:2px solid blue; padding-top:10px; padding-bottom:10px; } .midashi_sample4{ display: flex; align-items: center; } .midashi_sample4:before,.midashi_sample4:after{ content: ""; flex-grow: 1; height:1px; background:blue; margin:0 1em; } .midashi_sample5{ background:blue; color:#fff; border-radius:10px; padding-bottom:10px; padding-top:10px; text-indent:1em; }
サンプルコードの実行例
見出しタグh4の左側をcssで飾り付けます。
見出しタグh4の左側と下側をcssで飾り付けます。
見出しタグh4の左側と下側をcssで飾り付けます。
見出しタグh4の中央に線を引いてcssで飾り付けます。
見出しタグh4の背景に色を塗り角を丸くしてcssで飾り付けます。
上記のように、様々なパターンが見出しを彩る際に考えられます。今回の記事では5点ご紹介させていただきましたが、そのほかにも様々なやり方がありますので、またご紹介したいと思います。