10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

CSSで何も指定しない場合、画像にリンクを張ると画像の周りに枠線が表示されてしまいます。
これを表示しないようにするやり方を紹介します。

サンプルソース

HTMLソース

<a href=”http://www.yahoo.co.jp”><img src=”test.gif”/></a>

CSSソース

a img {border-style:none;}

サンプル表示

Yahooへ
何もしなかった場合(画像の周りに青い線が見えるはず)
Yahooへ
CSSで指定して画像の周りの線を消した場合

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通に画像にリンクを張る時と同じように書けばOKです。

CSSソース

a img {border-style:none;}を指定します。
これは、画像(img)にリンク(a)を張った時に、周りに枠線を表示しない(border-style:none;)という意味です。
a imgがaタグの中にimgタグがある場合という意味。つまり、画像にリンクを張った場合となる。
で、その時にborder-style:none;。つまり、枠線のスタイルを「線なし」にすると指定しているという意味になります。

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<a href=”http://www.yahoo.co.jp”>Yahoo!JAPAN</a>

CSSソース

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

サンプル表示

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にリンクを張る時と同じように書けばOKです。

CSSソース

a:hover {position:relative; top:1px; left:1px;}を指定します。
これは、リンク(a)の上にマウスカーソルが乗った時(hover)に、aタグで囲まれた文字(リンク文字)を右に1px・下に1px移動させるという指定です。
position:relative;は現在の位置からtopとleftで指定した分だけ移動させるという意味。
top:1px;は上から下へ1px、left:1px;は左から右へ1px移動するという意味です。

10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<a href=”http://www.yahoo.co.jp”>Yahoo!JAPAN</a>

CSSソース

a:hover {background-color:gray;}

サンプル表示

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にリンクを張る時と同じように書けばOKです。

CSSソース

a:hover {background-color:色;}を指定します。
これは、リンク(a)の上にマウスカーソルが乗った時(hover)に、background-colorで指定した色にリンクの背景色が変わるという意味です。
上のサンプルでは、カーソルが乗った時に「灰色」に変える為に、CSSのa:hover {background-color:gray;}を指定しています。
ちなみに、灰色以外にしたい場合はgrayを他の色に変えればOKです。
例)
■緑色に変える
a:hover {color:green;}
■色コード#000000に変える
a:hover {color:#000000;}
[参考]色見本 – 色名称/カラーコード一覧

10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<a href=”http://www.yahoo.co.jp”>Yahoo!JAPAN</a>

CSSソース

a:hover {color:red;}

サンプル表示

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にリンクを張る時と同じように書けばOKです。

CSSソース

a:hover {color:色;}を指定します。
これは、リンク(a)の上にマウスカーソルが乗った時(hover)に、colorで指定した色にリンク文字色が変わるという意味です。
上のサンプルでは、カーソルが乗った時に「赤」に変える為に、CSSのa:hover {color:red;}を指定しています。
ちなみに、赤以外にしたい場合はredを他の色に変えればOKです。
例)
■緑色に変える
a:hover {color:green;}
■色コード#000000に変える
a:hover {color:#000000;}
[参考]色見本 – 色名称/カラーコード一覧

10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<a href=”http://www.google.co.jp/”>Google</a>

CSSソース

a {text-decoration:none;}

サンプル表示

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にリンクを張る時と同じように書けばOKです。

CSSソース

a {text-decoration:none;}を指定します。
これは、テキストの装飾(かざり)を表示しないという意味です。
つまり、普通は表示されている「下線という装飾を表示しない」という指定をしているということになります。