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

ホーム
BLOG
css
CSSで見出しを飾りつけよう

css
2019.06.26

はじめに

見出しに線を入れたり、飾り付けて見やすくしているページをよくみるのですが、どうやって実装しているんですかね・・

見出しに線を入れたりするのは、見出しのタグ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;
}