ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

リンクの下線を装飾したい

リンクの下線を装飾してみましょう。破線・点線・二重線に変えてみたり、色を変えてみたり、また、文字と下線との間隔を広げることもできます。非常に簡単ですので、ぜひお試しを。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

リンクの下線を装飾してみましょう

リンク文字に引かれる下線はたいてい実線ですが、スタイルシートを使うことで他の線種に変更したり色を加えたり、装飾することもできます。 今回は、リンクの下線を装飾する方法をご説明致します。

以下の文字列は、全てリンクになっています。

■下線の種類を変える:
■下線の太さや文字との距離を変える:
■下線の色を変える:

※注意:
リンクの下線は、「そこがリンクである」ことを示す重要なサインになります。 明らかにリンクだと分かるような位置に記述するのでなければ、リンクなのかどうか判断ができなくなるような装飾は施さない方が良いでしょう。 文章中に使用する場合は、そこが「リンクである」と分かる程度にとどめた装飾にしておきましょう。

実現の方法

これらは全て、次の2つの方法を使って実現しています。

(1) リンクの下線を消す
(2) ボーダー(枠線)のうち、下線だけを表示させる

スタイルシートを使うと、枠線の「種類」・「太さ」・「色」を自由に変化させられます。 この「枠線の下線」を、リンクの下線代わりに使用しているわけです。

具体的な記述方法へ →

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます