menu
menu

キーワード検索

 

10月更新・前月(9月)の人気記事トップ10 - 10/01/2019

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 4 ↑) 【jQuery】jQueryでドロップダウンメニュー
  4. (圏外↑) 【制作Tips】iPhone画面解像度まとめ
  5. ( 6 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 5 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  7. ( 8 ↑) 【Mac】Safariでソースコードを見る方法
  8. ( 9 ↑) 【制作Tips】画面解像度一覧表
  9. ( 7 ↓) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  10. ( 10 - ) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

【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 リンク
このエントリーをはてなブックマークに追加