もう迷わない！CSS下線デザインサンプル集とコード例

By /

もう迷わない！CSS下線デザインサンプル集とコード例：脱マンネリ！表現力豊かなWebデザインへ

Webサイトのデザインにおいて、下線はテキストに注目を集めたり、リンクであることを示したりする重要な役割を果たします。しかし、デフォルトの下線ではどうしても単調になりがちで、Webサイト全体の印象を損ねてしまうこともあります。

この記事では、CSSを使って様々な下線デザインを実現するためのテクニックを、豊富なサンプルコードと詳細な解説付きでご紹介します。シンプルなものから、アニメーション、グラデーション、装飾付きなど、幅広いデザインを網羅し、あなたのWebサイトに最適な下線デザインを見つける手助けをします。

目次

  1. 下線の基本的な設定：text-decorationプロパティ
    • 1.1 text-decoration-line: 下線の種類（underline, overline, line-through）
    • 1.2 text-decoration-color: 下線の色
    • 1.3 text-decoration-style: 下線のスタイル（solid, double, dotted, dashed, wavy）
    • 1.4 text-decoration-thickness: 下線の太さ
    • 1.5 text-decoration 一括指定
  2. 応用編：下線の位置と間隔を調整する
    • 2.1 text-underline-offset: 下線の位置を調整
    • 2.2 text-underline-position: 下線の位置を調整（親要素のボックスモデルに影響）
  3. さらに表現豊かに！アニメーション下線
    • 3.1 ホバー時に出現する下線
    • 3.2 スライドする下線
    • 3.3 グラデーションアニメーション下線
    • 3.4 波打つアニメーション下線
  4. デザイン性の高い下線：装飾とグラデーション
    • 4.1 ドットや破線を使った装飾下線
    • 4.2 グラデーション下線
    • 4.3 角丸の下線
  5. ::beforeと::after疑似要素を使った自由な下線
    • 5.1 長さ調整可能な下線
    • 5.2 テキストに合わせた伸縮する下線
    • 5.3 ユニークな形状の下線
  6. SVGを使った複雑な下線
    • 6.1 パスアニメーション下線
    • 6.2 カスタムシェイプ下線
  7. JavaScriptとの組み合わせ：インタラクティブな下線
    • 7.1 スクロール連動下線
    • 7.2 マウス追従下線
  8. 実用例：Webサイトで使える下線デザイン
    • 8.1 ナビゲーションメニューの下線
    • 8.2 ボタンの下線
    • 8.3 見出しの下線
  9. レスポンシブデザインにおける下線
    • 9.1 メディアクエリを使った下線の調整
    • 9.2 相対的な単位を使った下線の太さ指定
  10. アクセシビリティに配慮した下線
    • 10.1 コントラスト比の確保
    • 10.2 下線以外の視覚的な強調
  11. まとめ：下線デザインをマスターしてWebサイトをレベルアップ

1. 下線の基本的な設定：text-decorationプロパティ

まずは、CSSで下線を引くための基本的なプロパティであるtext-decorationについて学びましょう。text-decorationは、テキストに下線、上線、打ち消し線などを追加するためのプロパティです。

  • text-decoration-line: 下線の種類を指定します。
  • text-decoration-color: 下線の色を指定します。
  • text-decoration-style: 下線のスタイルを指定します。
  • text-decoration-thickness: 下線の太さを指定します。
  • text-decoration 一括指定: 上記のプロパティをまとめて指定できます。

1.1 text-decoration-line: 下線の種類

text-decoration-lineプロパティは、下線の種類を指定します。主な値は以下の通りです。

  • underline: 下線
  • overline: 上線
  • line-through: 打ち消し線
  • none: 線を削除

“`css
p {
text-decoration-line: underline; / 下線 /
}

a {
text-decoration-line: none; / デフォルトの下線を削除 /
}
“`

1.2 text-decoration-color: 下線の色

text-decoration-colorプロパティは、下線の色を指定します。色の指定方法は、colorプロパティと同様に、カラーネーム、HEXコード、RGB、RGBA、HSL、HSLAなどを使用できます。

css
a {
text-decoration-line: underline;
text-decoration-color: red; /* 赤色の下線 */
}

1.3 text-decoration-style: 下線のスタイル

text-decoration-styleプロパティは、下線のスタイルを指定します。主な値は以下の通りです。

  • solid: 実線 (デフォルト)
  • double: 二重線
  • dotted: 点線
  • dashed: 破線
  • wavy: 波線

css
a {
text-decoration-line: underline;
text-decoration-style: dotted; /* 点線の下線 */
}

1.4 text-decoration-thickness: 下線の太さ

text-decoration-thicknessプロパティは、下線の太さを指定します。値は、px, em, remなどの単位を使用できます。autoを指定すると、ブラウザが自動的に適切な太さを決定します。

css
a {
text-decoration-line: underline;
text-decoration-thickness: 3px; /* 太さ3pxの下線 */
}

1.5 text-decoration 一括指定

text-decorationプロパティを使うと、text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thicknessの値をまとめて指定できます。

css
a {
text-decoration: underline red dotted 2px; /* 赤色の点線で太さ2pxの下線 */
}

2. 応用編：下線の位置と間隔を調整する

より洗練された下線デザインを実現するために、下線の位置と間隔を調整する方法を見ていきましょう。

  • text-underline-offset: 下線の位置を調整します。
  • text-underline-position: 下線の位置を調整します（親要素のボックスモデルに影響）。

2.1 text-underline-offset: 下線の位置を調整

text-underline-offsetプロパティは、テキストから下線までの距離を調整します。値は、px, em, remなどの単位を使用できます。正の値で下線が下がり、負の値で下線が上がります。

css
a {
text-decoration: underline;
text-underline-offset: 0.3em; /* 下線を少し下げる */
}

2.2 text-underline-position: 下線の位置を調整（親要素のボックスモデルに影響）

text-underline-positionプロパティは、下線の位置を調整します。値はautoとunderがあります。autoはブラウザのデフォルトの動作で、underは下線をテキストの下に描画します。これは特に、文字がベースラインよりも下にはみ出すようなフォントを使用する場合に便利です。

css
p {
text-underline-position: under; /* 下線をテキストの下に描画 */
}

3. さらに表現豊かに！アニメーション下線

下線にアニメーションを加えることで、Webサイトに動きとインタラクティブ性をもたらすことができます。ここでは、いくつかの代表的なアニメーション下線の実装方法をご紹介します。

  • 3.1 ホバー時に出現する下線
  • 3.2 スライドする下線
  • 3.3 グラデーションアニメーション下線
  • 3.4 波打つアニメーション下線

3.1 ホバー時に出現する下線

ホバー時に下線がアニメーションで出現する効果は、ユーザーに視覚的なフィードバックを与え、インタラクティブ性を高めます。

html
<a href="#">Hover Me</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #007bff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease-in-out;
}

a:hover::after {
transform: scaleX(1);
}
“`

3.2 スライドする下線

下線が左から右へ、または右から左へスライドするアニメーションは、スタイリッシュでモダンな印象を与えます。

html
<a href="#">Slide Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::before {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #007bff;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}

a:hover::before {
transform: translateX(0);
}
“`

3.3 グラデーションアニメーション下線

グラデーションがアニメーションする下線は、視覚的に非常に魅力的で、Webサイトに個性を加えることができます。

html
<a href="#">Gradient Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: linear-gradient(to right, #f00, #00f);
background-size: 200% 100%;
background-position: left bottom;
transition: background-position 0.3s ease-in-out;
}

a:hover::after {
background-position: right bottom;
}
“`

3.4 波打つアニメーション下線

波打つアニメーション下線は、ユニークで遊び心のある印象を与えます。

html
<a href="#">Wavy Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-image: url(“data:image/svg+xml,%3Csvg width=’100′ height=’2′ viewBox=’0 0 100 2′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath d=’M0 1C16.6667 1 25 0 50 0C75 0 83.3333 1 100 1′ stroke=’%23007bff’ stroke-width=’2’/%3E%3C/svg%3E”);
background-repeat: repeat-x;
background-size: auto 2px;
animation: wavy 1s linear infinite;
}

@keyframes wavy {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100px;
}
}
“`

4. デザイン性の高い下線：装飾とグラデーション

より個性的な下線デザインを実現するために、装飾やグラデーションを施す方法をご紹介します。

  • 4.1 ドットや破線を使った装飾下線
  • 4.2 グラデーション下線
  • 4.3 角丸の下線

4.1 ドットや破線を使った装飾下線

text-decoration-styleプロパティを使うだけでなく、border-bottomプロパティを使ってドットや破線などの装飾的な下線を作成することも可能です。

html
<a href="#">Dotted Underline</a>

css
a {
text-decoration: none;
border-bottom: 2px dotted #007bff;
}

4.2 グラデーション下線

linear-gradientやradial-gradientを使って、下線にグラデーションを適用することができます。

html
<a href="#">Gradient Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: linear-gradient(to right, #f00, #00f);
}
“`

4.3 角丸の下線

border-radiusプロパティを使って、下線を角丸にすることができます。

html
<a href="#">Rounded Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
height: 4px; / 下線の太さを調整 /
background-color: #007bff;
border-radius: 5px; / 角丸にする /
}
“`

5. ::beforeと::after疑似要素を使った自由な下線

::beforeと::after疑似要素を使うことで、より自由度の高い下線デザインを実現できます。

  • 5.1 長さ調整可能な下線
  • 5.2 テキストに合わせた伸縮する下線
  • 5.3 ユニークな形状の下線

5.1 長さ調整可能な下線

テキスト全体ではなく、一部にだけ下線を引くことができます。

html
<a href="#">Partial Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 50%; / 下線の長さを50%にする /
height: 2px;
background-color: #007bff;
}
“`

5.2 テキストに合わせた伸縮する下線

テキストの長さに合わせて、下線が自動的に伸縮するようにすることができます。

html
<a href="#">Dynamic Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
display: inline-block; / 幅を内容に合わせて調整 /
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #007bff;
}
“`

5.3 ユニークな形状の下線

clip-pathプロパティやtransformプロパティを使って、ユニークな形状の下線を作成することができます。

html
<a href="#">Shaped Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 8px;
background-color: #007bff;
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%); / 波のような形状にする /
}
“`

6. SVGを使った複雑な下線

SVG (Scalable Vector Graphics) を使うことで、より複雑で表現力豊かな下線デザインを実現できます。

  • 6.1 パスアニメーション下線
  • 6.2 カスタムシェイプ下線

6.1 パスアニメーション下線

SVGのpath要素とstroke-dasharray, stroke-dashoffsetプロパティを使うことで、線が描画されるアニメーションを作成できます。

html
<a href="#">SVG Path Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: transparent;
border-bottom: 2px solid #007bff;
clip: rect(0, 100%, 2px, 0); / 下線のみを表示 /
-webkit-clip-path: inset(0 0 0 0); / for Safari /
clip-path: inset(0 0 0 0);

animation: dash 2s linear forwards;
animation-play-state: paused;
}

a:hover::after {
animation-play-state: running;
}

@keyframes dash {
0% {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
100% {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
}
“`

6.2 カスタムシェイプ下線

SVGで作成したカスタムシェイプを下線として使用することができます。

html
<a href="#">Custom Shape Underline</a>

“`css
a {
position: relative;
text-decoration: none;
color: #333;
}

a::after {
content: “”;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 10px; / 高さ調整 /
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 100 10’%3E%3Cpath d=’M0,10 L10,0 L20,10 L30,0 L40,10 L50,0 L60,10 L70,0 L80,10 L90,0 L100,10 Z’ fill=’%23007bff’/%3E%3C/svg%3E”);
background-size: cover;
}
“`

7. JavaScriptとの組み合わせ：インタラクティブな下線

JavaScriptとCSSを組み合わせることで、より高度なインタラクティブな下線デザインを実現できます。

  • 7.1 スクロール連動下線
  • 7.2 マウス追従下線

7.1 スクロール連動下線

スクロール量に応じて下線の長さが変化するアニメーションを作成できます。

（具体的なJavaScriptコードは、使用するライブラリやフレームワーク、デザインの複雑さに依存するため、ここでは概要のみを説明します。）

  1. スクロールイベントをリッスンします。
  2. スクロール量を取得します。
  3. スクロール量に応じて、下線の幅を動的に変更します。

7.2 マウス追従下線

マウスカーソルの位置に合わせて下線が追従するアニメーションを作成できます。

（具体的なJavaScriptコードは、使用するライブラリやフレームワーク、デザインの複雑さに依存するため、ここでは概要のみを説明します。）

  1. マウスムーブイベントをリッスンします。
  2. マウスカーソルの位置を取得します。
  3. マウスカーソルの位置に応じて、下線の位置を動的に変更します。

8. 実用例：Webサイトで使える下線デザイン

これまで学んだテクニックを使って、Webサイトの様々な要素に適用できる下線デザインの例をご紹介します。

  • 8.1 ナビゲーションメニューの下線
  • 8.2 ボタンの下線
    • 8.3 見出しの下線

8.1 ナビゲーションメニューの下線

ナビゲーションメニューにホバー時に出現する下線を追加することで、選択されたメニュー項目を視覚的に強調できます。

(上記の「3.1 ホバー時に出現する下線」を参照)

8.2 ボタンの下線

ボタンにアニメーションする下線を追加することで、クリックを促す効果を高めることができます。

(上記の「3.2 スライドする下線」を参照)

8.3 見出しの下線

見出しに装飾的な下線を追加することで、セクションの区切りを明確にし、Webサイト全体のデザイン性を高めることができます。

(上記の「4.2 グラデーション下線」を参照)

9. レスポンシブデザインにおける下線

Webサイトを様々なデバイスで快適に閲覧できるように、レスポンシブデザインに対応した下線デザインを実装する必要があります。

  • 9.1 メディアクエリを使った下線の調整
  • 9.2 相対的な単位を使った下線の太さ指定

9.1 メディアクエリを使った下線の調整

画面サイズに応じて、下線の色、太さ、スタイルなどを変更することができます。

“`css
a {
text-decoration: underline;
text-decoration-thickness: 2px;
}

@media (max-width: 768px) {
a {
text-decoration-thickness: 1px; / スマートフォンでは下線を細くする /
}
}
“`

9.2 相対的な単位を使った下線の太さ指定

emやremなどの相対的な単位を使うことで、フォントサイズに応じて下線の太さを調整することができます。

css
a {
text-decoration: underline;
text-decoration-thickness: 0.1em; /* フォントサイズの0.1倍の太さにする */
}

10. アクセシビリティに配慮した下線

下線デザインを実装する際には、アクセシビリティにも配慮する必要があります。

  • 10.1 コントラスト比の確保
  • 10.2 下線以外の視覚的な強調

10.1 コントラスト比の確保

下線と背景色のコントラスト比を十分に確保することで、視覚障碍のあるユーザーでも下線を認識しやすくする必要があります。WCAG (Web Content Accessibility Guidelines) では、コントラスト比の最低要件が定められています。

10.2 下線以外の視覚的な強調

リンクを強調する手段として、下線だけでなく、色、太字、アイコンなどを組み合わせることで、様々なユーザーに配慮したデザインを実現できます。

11. まとめ：下線デザインをマスターしてWebサイトをレベルアップ

この記事では、CSSを使って様々な下線デザインを実現するためのテクニックを、豊富なサンプルコードと詳細な解説付きでご紹介しました。

下線は、Webサイトのデザインにおいて、テキストに注目を集めたり、リンクであることを示したりする重要な役割を果たします。デフォルトの下線ではどうしても単調になりがちですが、CSSを駆使することで、Webサイトの印象を大きく変えることができます。

今回ご紹介したテクニックを参考に、あなたのWebサイトに最適な下線デザインを見つけて、より魅力的で使いやすいWebサイトを構築してください。

補足:

  • 上記はあくまでサンプルであり、Webサイトのデザインや目的に合わせて適宜変更してください。
  • ブラウザの互換性にも注意して、必要に応じてベンダープレフィックスを使用してください。
  • 様々な下線デザインを試して、自分だけのオリジナルな下線デザインを見つけてください。

この情報が、あなたのWebデザインのスキルアップに役立つことを願っています。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール