はいはい。今日から始まりました、CSSサンプルのコーナーでございます。

いろいろ、CSSの本やら、ウェブサイトやらいっぱいあるのですが、なかなか分かりやすいものがないもので・・・この際、自分でまとめちゃおうっちゅうことになりましてん。

記念すべき、第一回目は、テキストリンクのCSSについてまとめてみました～。

基本的にコピー＆ペーストで使えるようにしておりますよん。

1. 基本テキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
text-decoration: none; /*下線無し*/
}

a:hover {
color: #D63597; /*リンクの色*/
text-decoration: underline; /*下線あり*/
}

2. 色変えテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
text-decoration: none; /*下線無し*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
text-decoration: underline; /*下線あり*/
}

3. 訪問済み打消しテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
text-decoration: none; /*下線無し*/
}

a:visited {
color: #D63597;/*リンクの色*/
text-decoration: line-through; /*打ち消し線*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
text-decoration: underline; /*下線あり*/
}

4. 点線囲みテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
border: 1px dotted #D63597; /*囲み線*/
padding: 2px;/*文字と囲み線のすきま*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
border: 1px dotted #5ABCD9;/*囲み線*/
padding: 2px;/*文字と囲み線のすきま*/
}

5. 斜体テキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
font-style:italic; /*フォントのスタイル*/
}

6. ずらしテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
position:relative;
top:1px; /*ずらす距離（上から）*/
left:1px; /*ずらす距離（左から）*/
}

Similar Posts:

• CSSで訪問済み(visited)リンクをデザインしてみる。
• リンクをデザインするCSSいろいろ
• CSSで引用をデザインする。
• CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント
• フェードイン＆アウトするスライドショーJavaScript: xfade2.js