スタッフブログ

みなさま、GWはいかがお過ごしでしたでしょうか？

私は、シフトに恵まれ、しっかりと連休をいただくことができたので、
完全に頭も体もリフレッシュしてきましたっ！

お久しぶりです。スタッフ「ほ」です。

さて、今日はCSSで、リンクの装飾に関するネタです。

通常、文字に対してリンクを張ると、文字の色は青くなり、下線が設定されます。

通常はリンクの線は一本線で、この種類を変更することはできないのですが、ちょっと変則的な方法を利用すると、線の種類を別の線種に変更できます。

先に手順だけを書くと

１．リンク文字の下線を消す
２．リンクのボックスが持つ下罫線を設定する

の２つです。

まずはHTMLのファイルでリンクを張った文字列を用意しましょう。

<p>
  詳細は
  <a href="http://www.vanfu-vts.jp">バンフーのサイト</a>
  をご覧ください
</p>

この段階では、以下のような状態ができているはずです。

※サンプル

まずはリンク文字が持つ下線を外します。

CSSに以下を記述します。

a {
	text-decoration:none;
}

リンクの<a>タグから「文字飾りを『無し』にする」という指定です。

この指定によって、まずは下線が外れます。

※サンプル

リンクの<a>タグは、以下のようなボックスを持っています。

このボックスは通常、無色透明なので、目で見ることができませんが、CSSを利用して上下左右に罫線をつけることができます。

今回は、上下左右のうち、下の罫線をCSSで表示させることで、リンク文字の下線代わりにしてしまおう、というものです。

先程のリンクに追加していきます。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
}

※サンプル

リンクの文字の色と下線を合わせるには、colorプロパティを指定して、罫線と同じ色を指定します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

※サンプル

訪問済みの色を指定したい場合は疑似クラスセレクタをさらに追加します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

a:visited {
	border-bottom:1px dotted #ccc;
	color:#ccc;
}

※サンプル

マウスポインタを乗せた時に色を変えたい場合は、さらにさらに追加します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

a:visited {
	border-bottom:1px dotted #ccc;
	color:#ccc;
}

a:hover {
	border-bottom:1px dotted #f80;
	color:#f80;
}

※サンプル

今回指定した「dotted」は点線を意味します。

これを「dashed」に変更すると破線になります。

また、線の太さが3px以上必要になりますが、
「double」という指定をすることで二重線の表現も可能です。

バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎！ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

最新記事 by スタッフ 「ほ」 (全て見る)

• [Photoshop]生成塗りつぶしを使ってみよう - 2023
• [Premiere Pro]使わなかったデータをプロジェクトから除外する - 2022
• [新講座]イラストレーター（オンライン講座）始めました - 2022