画像を貼る / 改行する / 横罫線を引く

画像を貼るためのimg要素、改行するためのbr要素、横罫線を引くためのhr要素の説明です。

目次

• 画像を貼る
• 画像の扱い
• 改行する
• 横罫線を引く

画像を貼る

画像を貼るときはimg要素の出番です。これはインライン要素です。また空要素なので終了タグ(</img>)がありません。。

<img src="画像のURL" alt="代わりに表示する文字" width="幅" height="高さ">

src属性が画像のURL、width属性とheight属性が幅と高さです。width属性とheight属性は省略できます。

そして、重要なのがalt属性です。これには画像が表示できないときに代わりに表示する文字を指定します。(alternate text(代わりのテキスト)のaltです。)alt属性は省略不可、必ず指定しないといけません。

<img src="logo.png" alt="クラシック音楽を聴く" width="400" height="100">

画像が表示可能な場合	画像が表示不可能な場合	テキストブラウザの場合
logo.pngを表示	alt属性の文字列を表示	alt属性の文字列を表示

表を見てもらうとわかるように、画像が表示できないときはalt属性の文字列が表示されます。これを適切に指定してあげないと、画像を表示できない環境の人が「？？？」な状態になってしまいます。

「ほとんどの人は画像を表示できるブラウザを使っているでしょ。」って思った方、画像を表示できない(OR しない)環境の人もまだまだたくさんいます。例えば、Air H"の利用者は通信速度を重視して画像表示をオフにしているかもしれません。テキストブラウザや音声ブラウザで閲覧している人もいます。いろいろな環境でも閲覧できるページをつくりましょうね。

画像の扱い

img要素はインライン要素なので、普通のテキストと同じように扱います。たとえば見出しを画像で表現するなら、<img ?>を<h1>〜</h1>で囲みます。

<h1><img src="logo.png" alt="○○のページ" width="300" height="50"></h1>

<a href="リンク先URL">〜</a>で囲めば、画像にリンクを張ることもできます。この場合、alt属性には「○○を表示」「○○へ移動」など、クリックすると何が起こるかがわかるような記述をしましょう。

<p><a href="image1.jpg"><img src="thumbnail.jpg alt="[大きな画像を表示]" width="100" height="100"></a></p>

改行する

HTMLではいくつ改行を入れても半角スペース一個分として表示されます。文章の途中で強制的に改行したい場合はbr要素を使います。これもインライン要素で、終了タグを持たない空要素です。

<p>Copyright (C) 2005 石川 一靖.<br>
メール : elastic965@gmail.com<br>
最終更新日 : 2005年09月05日</p>

<br>で改行、とても便利なのでたくさん使ってしまいそうですが、br要素はどうしても改行が必要な場合にだけ使うようにしましょう。基本は段落を<p>〜</p>で囲むことです。

横罫線を引く

段落と段落の区切りに横罫線を引きたいときはhr要素を使います。これはブロックレベル要素です。p要素やhn要素と並べて使います。空要素なので終了タグは存在しません。

<p>段落?</p>
<hr>
<p>段落?</p>

横罫線など見た目のことに関してはCSSを使うほうが便利です。hr要素もあまり使わないほうがいいでしょう。

まとめ

• 画像を貼るには<img src="画像のパス" alt="代わりに表示する文字" width="幅" height="高さ">とする
• alt属性には代わりに表示する文字を入れる、必要ないときはalt=""とする
• <br>で改行できるが、必要最小限の利用にとどめる
• <hr>で横罫線が引ける

Information