• css

CSSで見出しを飾りつけよう

はじめに

見出しに線を入れたり、飾り付けて見やすくしているページをよくみるのですが、どうやって実装しているんですかね・・
見出しに線を入れたりするのは、見出しのタグ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点ご紹介させていただきましたが、そのほかにも様々なやり方がありますので、またご紹介したいと思います。

関連記事

  1. 特定の番号の要素のcssだけ変更してみよう

  2. テキスト文字を中央、左右にcssで寄せよう

  3. cssでフェードをかけてみよう

  4. hoverした時に文字の間隔をつかってアニメーションしてみよう

  5. CSSを使って画面サイズに対応しよう

  6. 画像をhoverして時にズームさせるcssを書こう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930