【CSS】見出しやテキストの装飾でサイトを一段と魅力的に

Webサイトをデザインする際、見出しやテキストの装飾は欠かせませんよね。単なるテキストでも、CSSを使って少し工夫するだけで、サイト全体の印象が大きく変わります。今回は、初心者でも簡単にできる見出しやテキストのCSS装飾の基本を紹介します。

見出しとテキストの基本
見出しのパターン
テキストの装飾
まとめ

見出しとテキストの基本

皆さん、Webサイトを作るとき、見出しやテキストのデザインってどうしていますか？何も装飾しないとシンプルすぎて物足りないし、かといって派手すぎると逆に見にくくなってしまう…。ちょうどいいバランスを取るのが難しいところですよね。

そこで今回は、CSSを使って見出しやテキストをちょっとおしゃれに、でも読みやすく仕上げる方法をご紹介します。

まず、見出しの装飾から始めましょう。見出しはサイト全体の印象を左右する重要な要素です。例えば、h1タグやh2タグに少し装飾を加えるだけで、全体のデザインがぐっと引き締まります。基本的にはフォントサイズや色を変えることから始めるのが簡単です。

見出しの例

h2 {
  font-size: 2.5em;
  color: #333;
  text-align: center;
  border-bottom: 2px solid #666;
  padding-bottom: 10px;
}

この例では、h1見出しを少し大きめにして、中央揃えにしつつ、下線を引いてみました。これだけでも、かなりプロっぽい雰囲気になりますよね。

次に、テキスト全体のスタイルを見ていきましょう。本文は、サイトの中で一番多く表示される部分なので、読みやすさが重要です。基本的なところで言えば、行間（line-height）や文字の間隔（letter-spacing）を調整するだけで、かなり読みやすさが変わってきます。

テキストの例

p {
  font-size: 1em;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #444;
}

このコードでは、pタグに少し余白を持たせ、文字が詰まりすぎないようにしてあります。読みやすさがグンとアップしますよ。

それから、リンクのスタイルもお忘れなく。リンクはただ青色で下線が引いてあるだけだと味気ないですから、少し手を加えるといいですね。

テストリンク

a {
  color: #1a73e8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #0c47b6;
}

このように、リンクにホバーしたときに色が変わるようにすると、ユーザーにとっても分かりやすくなりますし、ちょっとしたアクセントにもなります。

見出しのパターン

2色の線を重ねた見出し

見出しの例

.double-line {
  font-size: 2em;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

.double-line::before,
.double-line::after {
  content: '';
  position: absolute;
  height: 5px;
  width: 100%;
  left: 0;
  border-radius: 3px;
}

.double-line::before {
  background-color: #ff6b6b;
  bottom: 0;
}

.double-line::after {
  background-color: #ff6b6b;
  bottom: -8px;
}

左右に線を配置した見出し

見出しの例

.side-lines {
  font-size: 2em;
  text-align: center;
  position: relative;
}

.side-lines::before,
.side-lines::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background-color: #666;
  top: 50%;
  transform: translateY(-50%);
}

.side-lines::before {
  left: 0;
}

.side-lines::after {
  right: 0;
}

ワンポイント風の見出し

見出しの例

.drawer-style {
  font-size: 2em;
  position: relative;
  padding-left: 30px;
  background-color: #f7f7f7;
}

.drawer-style::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 15px;
  background-color: #333;
  transform: translateY(-50%);
}

英字を背景にした見出し

見出しの例

.english-bg {
  font-size: 2em;
  color: #000;
  display: block;
  position: relative;
  padding: 5px 10px;
}

.english-bg::before {
  content: 'ENGLISH TEXT';
  position: absolute;
  font-size: 1.5em;
  top: -2rem;
  left: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
}

英字と線を組み合わせた見出し

見出しの例

.english-line {
  font-size: 2em;
  color: #333;
  position: relative;
  padding-left: 10px;
  display: block;
}

.english-line::before {
  content: 'TITLE';
  position: absolute;
  font-size: 1em;
  color: #999;
  top: -20px;
  left: 0;
}

.english-line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
  bottom: 0;
  left: 0;
}

数字と線を組み合わせた見出し

見出しの例

.number-line {
  font-size: 2em;
  color: #333;
  position: relative;
  padding-left: 30px;
}


.number-line::before {
  content: '01';
  position: absolute;
  font-size: 0.8em;
  color: #333;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


.number-line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
  bottom: 0;
  left: 0;
}

テキストの装飾

蛍光ペンのような下線

このスタイルでは、テキストに蛍光ペンで引いたような下線を追加します。backgroundプロパティを使って、テキストの背後にハイライトを描画しています。

.highlight-underline {
  background: linear-gradient(transparent 60%, #ffff66 60%);
  padding: 0 2px;
}

波線のような下線

このコードは、text-decorationプロパティを使用して、波線の下線をテキストに適用します。波線の色を指定できるので、デザインに合わせて調整可能です。

.wavy-underline {
  text-decoration: underline;
  text-decoration-color: #ff6347;
  text-decoration-style: wavy;
}

背景色（box-decoration-break）

box-decoration-breakプロパティを使うと、改行されても背景色が途切れることなく適用されます。clone値により、テキストが複数行にわたる場合でも、一貫した背景が維持されます。

.highlight-background {
  background-color: #ffeb3b;
  padding: 0 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

一字ごとに点をつける

このコードは、一字ごとに点をつける効果を実現します。::before疑似要素を使って文字の上にドットを配置しています。radial-gradientを利用して円形のドットを作成し、それを文字の上部に繰り返し配置することで、一字ごとにドットが表示されるようになっています。

.dotted-text-above {
  position: relative;
}

.dotted-text-above::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle, #333 2px, transparent 2px);
  background-size: 1em 1em;
  background-repeat: repeat-x;
  background-position: 0 top;
}