リンクの表示・装飾 (HTML,CSS,JavaScript)

更新日:2002年08月14日

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

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

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

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

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

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

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

実現の方法

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

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

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

具体的な記述方法へ →

1 2
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

西村 文宏

関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…

続きを読む

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載! さぁ、いますぐチェック!

人気ホームページ作成ランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

マネしたくなるアイデア住宅

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?