CSS: 画像

alt属性・title属性

画像を表示できない環境や検索エンジン対策（SEO）を考慮し、alt属性に代替テキストを指定します。validなHTMLでもalt属性は必須とされています。

alt属性を付けた場合、画像の上にマウスポインタを重ねると吹出しとして代替文字が表示されるブラウザがありますので、吹き出しを表示させたくない場合にはtitle属性に空の文字列「""」を指定します。

width属性・height属性

画像のサイズを指定するには、下記の二通りがあります。

• img要素のwidth属性・height属性を使う方法
• CSSのwidth・heightプロパティを使う方法

img要素のwidth属性・height属性でピクセル数を指定すると画像の読み込みを待たずに画面の描画が行えます。しかし、レイアウトや画像の変更の際に、画像サイズを変更する時はHTML文書を変更しなければなりません。

両方指定した場合には、CSSの指定が優先されます。通常はCSSのみで良いでしょう。

画像練習サンプルファイル image.htm 62行目

<img src="tokiwa_title.png" alt="常磐大学" title="" width="325" height="78">

上記例では、代替文字と横幅・高さの設定をしています。

左右寄せの設定（フロート）

上記のp要素に右寄せ（右フロート）のスタイルをつけます。寄せ（フロート）を使うと後に続くものに回り込みが設定されます。

上記のp#image1のCSSを下記に変更してください。

画像練習サンプルファイル image.htm

p#image1 {
    margin-left: 10px; /* 本文との間隔をあけるための左マージン */
    float:right; /* 右フロート */
    width:230px; /* 幅指定 */
}

floatを指定する際には、必ずwidthで幅指定します。「floatはwidthとセット」と覚えましょう。

また、本文との間隔をあけるために、必要に応じて左右や下のマージンを開けます。

ブラウザの幅を変更してテキストの回り込みの変化を確認してください。

回り込み解除

後に続くものを回り込ませたくない場合には、回り込ませたくないものの先頭のものに回り込み解除を指定します。

下記のコードを「image.htm」の「--></style>」の前にに挿入してください。

画像練習サンプルファイル image.htm

#p2 {
    clear:right; /* 右回り込み解除 */
}

フロートの特性

画像同士など幅が決まっているものが回り込む（横に並ぶ）ためのスペースが足りない場合には、回り込みせずに下に送られます。確実に回り込みさせる場合には、そのための幅を確保する必要があることを覚えておきましょう。

さらにfloatの特性を知るために、上記のスタイルの「p#image1」を「p#image2」、「p#image1 img」を「p#image2 img」に書き換えてみましょう。

二番目の画像が右寄せ（課題をやっていれば左寄せ）になります。ここで注意したいことは、floatを設定した#image2よりも前にあるh2要素はテキストの回り込みの対象になっていない点です。floatは後に続くものを回り込ませるため、HTMLの順序が前に書かれているものに対して回り込ませることはできません。

確認できたら上記のスタイルの「p#image2」を「p#image1」、「p#image2 img」を「p#image1 img」に戻しておきましょう。

背景に繰り返して並べる

下記のコードを「image.htm」の「--></style>」の前にに挿入してください。

画像練習サンプルファイル image.htm

.textbox {
    background-image:url(back_check_a_sb.gif); /* 背景画像のURL */
    background-repeat:repeat; /* 背景画像の繰り返し */
}

背景に繰り返して横に並べる

画像練習サンプルファイル image.htm

.labelsilver {
    background-image : url(bg_label_silver.gif); 
    background-repeat:repeat-x;
}

このコードはすでに入力されています。テキストボックス部分の上の青い帯部分です。上下にグラデーションがかかった画像（bg_label_silver.gif）を横に並べています。CSS3なら背景色にグラデーションが使えるので画像は不要です。

背景に繰り返して縦に並べる

下記のコードを「image.htm」の「--></style>」の前にに挿入してください。

画像練習サンプルファイル image.htm

#contents {
    background-image:url(bg_g8.png);/* 背景画像のURL */
    background-repeat:repeat-y; /* 背景画像の繰り返し */
    padding-left:120px; /* 背景画像と重ならないように左枠内余白 */
}

画面左にグラデーションの帯を作っています。これは、背景画像に対して中身を右にずらす必要があるので左枠内余白（padding）を広げています。周辺余白（margin）を広げると背景画像ごと動いてしまいます。

背景に固定

下記のコードを「image.htm」の「--></style>」の前にに挿入してください。

画像練習サンプルファイル image.htm

body {
    background-image:url(illust.jpg); /* 背景画像のURL */
    background-repeat:no-repeat; /* 背景画像の繰り返し */
    background-position:bottom right; /* 背景画像の位置を右下に */
    background-attachment:fixed; /* 背景画像を固定 */
}

背景に固定する場合には、他の要素の背景を透過させる方が効果的です。上記の.textboxと#contentsの背景画像を外して確認してください。

img要素を用いる方法

見出しであることはSEOとしても重要であるため、h1〜h6要素の中にimg要素を入れます。この場合、alt属性が検索結果に影響します。

<h1><img src="tokiwa_title.png" alt="常磐大学" title="" width="325" height="78"></h1>

このコードは入力済みです。

背景画像を用いる方法

テキストを非表示にして、背景画像だけを表示します。

テキストを非表示にする方法もいろいろとあるのですが、HTMLで文字部分をspan要素にしておき、span要素を非表示にするのが一つの方法です。

下記の赤字部分「<!--」「-->」を修正してください。修正前は下の<h1>が「<!--」「-->」に挟まれています。

画像練習サンプルファイル image.htm

<!--
<h1><img src="tokiwa_title.png" alt="常磐大学" title="" width="325" height="78"></h1>
-->
<h1><span>常磐大学</span></h1>

この状態でタイトル部分がただの文字として表示されている筈です。

下記のコードを「image.htm」の「--></style>」の前にに挿入してください。

画像練習サンプルファイル image.htm

h1 {
    background-image:url(tokiwa_title.png);
    background-repeat:no-repeat;
    width:325px;
    height:78px;
}
h1 span {
    display:none; /* 非表示 */
}

img要素で作成したものとほぼ同様になった筈です。タイトルロゴはコンテンツじゃないので、CSSの背景画像でやる方が望ましいですね。

css Zen GardenのHTMLでも多くの場所で置換用のspan要素が入っています。