menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【CSS3】CSSでテキストリンクや画像リンクを装飾

【CSS3】CSSでテキストリンクや画像リンクを装飾

こんにちは(・∀・)

CSSを使用したサンプルをご紹介します。今回はテキストリンクや画像リンクを装飾するサンプルです。

CSSでテキストリンクや画像リンクを装飾

  1. マウスオーバーでテキストリンクの色を変更
  2. マウスオーバーでテキストリンクにアンダーライン
  3. マウスオーバーでテキストリンクの色を変えて動かす
  4. マウスオーバーで画像リンクを動かす
  5. CSSでテキストリンクに画像を表示
1. マウスオーバーでテキストリンクの色を変更
HTML

<a href="#">マウスオーバーでこのテキストリンクの色が変わります。</a>
CSS

a:hover {
  color: #f00;
  text-decoration: none;
}
Result
2. マウスオーバーでテキストリンクにアンダーライン
HTML

<a href="#">マウスオーバーでこのテキストリンクにアンダーラインがでます。</a>
CSS

a:hover {
  text-decoration: underline;
}
Result
3. マウスオーバーでテキストリンクの色を変えて動かす
HTML

<a href="#">マウスオーバーでこのテキストリンクの色が変わって動きます。</a>
CSS


a:hover {
  color: #f00;
  position: relative;
  top: 1px;
  left: 1px;
  text-decoration: none;
}
Result
4. マウスオーバーで画像リンクを動かす
HTML

<a href="#"><img src="logo.png" alt="サンプル"></a>
CSS

a:hover {
  position: relative;
  top: 1px;
  left: 1px;
}
Result

サンプル

5. CSSでテキストリンクに画像を表示
HTML

<a href="#" class="left">戻る</a>
<a href="#" class="right">進む</a>
CSS

a.right {
  background: url("right.png") no-repeat center right;
  margin-right: 1px;
  padding-right: 20px;
}
a.left {
  background: url("left.png") no-repeat center left;
  margin-left: 1px;
  padding-left: 20px;
}
Result
  • CSS リンク
このエントリーをはてなブックマークに追加