ここでは、〈img要素〉の表示を調整することにする。具体的には、画像の表示位置をウインドウの横幅の中央に合わせ、画像全体に枠線をつけてみる。
画像の表示位置を中央揃えにする
「index.html」ファイルで、〈img要素〉は〈段落要素〉の子要素になっている。〈img要素〉はインライン要素であるため、〈body要素〉の直接の子要素になることができない。そこで、〈img要素〉をブロックレベル要素である〈段落要素〉の子要素として記述したわけである【参考→ページにサンプル画像を入れる】。
インライン要素である〈img要素〉は、ふつうのテキストと同様に処理される。したがって、〈img要素〉の親要素である〈段落要素〉の"text-alignプロパティ"に「中央に寄せて整列」を指定すれば、画像をウインドウの横幅に中央部分に表示させることができる【参考→テキストの整列位置を指定する】。
ただ、〈段落要素〉に「text-align: center ;」を指定すると、画像だけでなく、〈段落要素〉に含まれるすべてのテキストやインライン要素が「中央に寄せて整列」になってしまう。
同じ〈要素〉の中で、特定のものにだけスタイルを指定するには、HTML文書で〈要素〉に「クラス属性」class attributeを付与してスタイル指定の対象を特定する必要がある。
クラス属性とクラス名によるスタイルの指定
HTMLのクラス属性は、〈要素〉にグループの名前を付けて区別するものである。クラス属性は以下のように、開始タグの中に書く。
<要素名 class="クラス名">内容</要素名>
HTML文書で特定のクラス名を持つ〈要素〉の表示を変更するには、次のように書けば良い。
要素名.クラス名 {プロパティ名 : 値 ;}
実際にクラス属性を定義する
「index.html」の内容を書き換え、画像を中央に寄せて表示させよう。
「index.html」ファイルをエディタeditorで開き、〈img要素〉を含む〈段落要素〉の記述を、次のように書き換える。
<p class="img"><img src="./image.jpg"...
ここでは、〈img要素〉を含む〈段落要素〉に『img』という「クラス名」を与えて他の〈段落要素〉から区別していることになる。
「index.html」ファイルを保存save（儲存檔案）し、次に「normal.css」ファイルを開き、次のように記述する。
p { text-indent: 1em ;} p.img { text-align: center ; text-indent: 0 ;}
ここで「text-indent: 0 ;」を指定しているのは、画像を正確に中央に配置するためである。
段落要素の表示を変更するにおいて〈段落要素〉に「1em」の字下げを設定したので、この指定を省略すると、画像も「1em」右側に寄って表示されてしまう。画像をちょうど真ん中に表示させるためには、すべての〈段落要素〉に対する「text-indent: 1em ;」の指定より後ろで、クラス名「img」の〈段落要素〉に対して「text-indent: 0 ;」を指定すれば、クラス名「img」の〈段落要素〉に対しては「text-indent: 0 ;」の方が有効になる【参考→プロパティの指定の重複】。
p {
text-indent: 1em ;} ←すべての〈段落要素〉に1emの字下げを指定
p.img {
text-align: center ;
text-indent: 0 ;} ←クラス名「img」のものだけ字下げなしに変更
「normal.css」ファイルを保存save（儲存檔案）する。
画像に枠線をつける
画像に装飾的な枠線をつけることにする。例えば、「normal.css」ファイルに以下のように記述すればよい。
img {
border: 1em inset #DEB887 ;}
好きな色、線の種類、太さで画像に装飾的な枠線をつけてみよう【参考→枠線（ボーダーライン）を引く、〈h2要素〉の一部に枠線をつける】。
「normal.css」ファイルを保存save（儲存檔案）してから、「index.html」ファイルをブラウザで開いて表示を確認しよう。
〈img要素〉の表示例