スタイルシートでリンクを装飾してみよう｜ホームページの作り方｜ホームページで広告収入MASTER！

ホームページで広告収入MASTER！ >
ホームページの作り方 >
スタイルシートでリンクを装飾してみよう

スタイルシートでリンクを装飾してみよう

スタイルシートでリンクを装飾してみよう

リンクを装飾する
リンクのスタイルを指定するリンクの擬似クラスを指定するリンクに背景色を指定する

リンクのスタイルを指定する

CSSコード	ブラウザ表示画面
p.a{ font-size:large } p.b{ color:green } p.c{ font-weight:bold } p.d{ text-decoration:none }	リンクの文字を大きくするリンクの色を指定するリンクを太字にするリンクの下線をなくす
HTMLコード
<a href="ファイル名.html" class="a">リンクの文字を大きくする</a> <b href="ファイル名.html" class="a">リンクの色を指定する</a> <c href="ファイル名.html" class="a">リンクを太字にする</a> <d href="ファイル名.html" class="a">リンクの下線をなくす</a>
コンテンツメニューに戻る

リンクの擬似クラスを指定する

CSSコード	ブラウザ表示画面
a.links:link{ color:#0000FF } a.links:visited{ color:#9933CC } a.links:hover{ color:red } a.links:active{ text-decoration:none }	擬似クラスを指定したリンク a:link → まだ見ていないリンク a:visited → すでに見たリンク a:hover → カーソルを上に乗せた状態(アクティブでない) a:active → カーソルが上にあり、クリックされている状態(アクティブ)
HTMLコード
<a href="ファイル名.html" class="links">擬似クラスを指定したリンク</a>
コンテンツメニューに戻る

リンクに背景色を指定する

CSSコード	ブラウザ表示画面
a{ background-color:#FFFF99 }	リンクに背景色を指定する
HTMLコード
<a href="ファイル名.html">リンクに背景色を指定する</a>
コンテンツメニューに戻る

ホームページ作成・ホームページの作り方

ホームページ作成の手順

ホームページのオプション機能

検索エンジン対策

自由度の高いホームページを作成

アマゾンタイトル画像

ショートカットコンテンツ

コンテンツナビ

初めての方へ

自分のホームページを作ろう

アクセスを集めよう

HPで広告収入を稼ごう

ご質問やご意見ご感想はこちらのフォームをお使いください。

便利なツール

SEO		[PR] ��!��u��O ��z�[��y�[�W�J�� C�u��