HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● リンク文字の装飾

A要素は上のようなスタイルの設定では、通常の表示状態のみの装飾になっていまいます。 A要素を与えられた内容には4つの状態があります。それぞれ装飾の対象にするための記号があります。

active』はクリックされている状態
visited』はブラウザが訪問済みと認識しているリンク
link』は訪問されていないリンク
hover』はマウスカーソルが通過した時の状態

この4つの状態をヘッダ又は、別ファイルへ記述し、A要素の内容となる文字を装飾します。

A:active{color: #0000ff ; text-decoration:none}
A:visited{color: #0000cc ; text-decoration:none}
A:link{color: #0000ff ; text-decoration:none}
A:hover{color: #0000ff; background-color:#ffffff; text-decoration:none}

なお、1つの要素に対して複数のスタイルを与えたい場合は、『class』を利用して、 スタイルを変えることができます。
A要素の場合は下のように、『A』(要素)と『:』(コロン)の間に、『.』(ピリオド)を置きその後にclassの値を入れます。(ココでは、type2)

A.type2:visited{color: #0000cc ; text-decoration:none}
A.type2:link{color: #0000ff ; text-decoration:none}

これによりリンク文字を自由に装飾できますが、リンクは閲覧者に分かり易い装飾がなされているべきです。 記事にリンクがあることがわからなくなってしまうような装飾にならないように、 サイト内では統一した装飾をするなどの注意が必要です。
このようなリンクは気づかれないかも・・・

<<前へ  |上へ|  次へ>>
1234567891011121314151617

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/09