menu
menu

キーワード検索

 

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

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5 Tips】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【制作Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【JavaScript Tips】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • Labs

CSS

こんにちは(・∀・)

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

Contents

  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
  • カテゴリー:Labs