画像「img要素」
新聞や本には文章以外にも写真や絵などの画像が載っています。
HTMLで画像を表示するためには「hr要素」を使います。
<img>要素で画像を表示します。
この「img要素」は、「br要素」「hr要素」と同じで、終了タグがありません。
「img要素」も終了タグがないことを示す方法として、<img />といった書き方もあります。
ちなみに、「img要素」の「img」はimageの略で、画像や映像といった意味があります。
表示する画像を指定する「src属性」
「img要素」だけでは、どの画像を表示すればよいのかわかりません。
表示する画像を指定するためには、「src属性」を使って指定します。
この「src属性」は「img要素」に必ず指定する必要があります。
「src属性」に指定する画像のある場所の指定の仕方は、URLで指定します。
「http://」から始まる絶対パスでも、そのhtmlファイルがある場所を中心に指定する相対パスでもどちらでも構いません。
たとえば、htmlファイルがあるフォルダにimage.pngという名前の画像ファイルがある場合に相対パスで指定する場合は、
<img src="image.png">
と記述します。
表示する画像の代わりとなるテキスト「alt属性」
「img要素」は、画像をダウンロードするために時間がかかります。その間は画像を表示できません。
また、視覚障がい者のためなどに、音声で読み上げるブラウザは画像を読み上げることができません。
そのため、画像の代わりとなるテキストを指定する「alt属性」があります。
たとえば、src属性で指定した<img src="image.png"> に「これは画像です」という代わりの文章を加えるには、
<img src="image.png" alt="これは画像です">
と記述します。
表示する画像の説明「title属性」
「img要素」は、画像に説明文を加えることができる、「title属性」があります。
「title属性」に説明文を指定すると、画像の上にマウスカーソルを置くと、その説明がポップアップ表示されたりします。
たとえば、src属性で指定した<img src="image.png"> に「これは画像の説明文です」という説明を加えるには、
<img src="image.png" title="これは画像の説明文です">
と記述します。
「alt属性」と「title属性」の違いは、「alt属性」は、画像が表示できない場合、代わりに表示するテキストを指定します。
それに対し「title属性」は、画像の表示に関係なく、画像に説明を指定する場合に使います。
表示する画像を高さを指定「height属性」、幅を指定「width属性」
「img要素」で画像を表示するときには高さを「height属性」、幅を「width属性」で指定し、拡大・縮小することができます。
また、画像は実際にダウンロードされるまで、画像のサイズがわかりません。そのせいで画像のダウンロードが終わるたびに、ブラウザ上の表示が変わったりします。
そういった表示の崩れを防ぐために、「height属性」「width属性」に実際の画像のサイズを最初から指定して画像を表示するエリアを明確にします。
高さと幅の指定方法は、ピクセル単位で指定します。
たとえば、src属性で指定した<img src="image.png">に高さ100ピクセル、幅200ピクセルを指定する場合、
<img src="image.png" height="100"width="200">
と記述します。
表示を変化させる「style属性」
いままでたくさんの要素で説明してきた「style属性」、「img要素」にももちろんあります。
この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。
スタイルシートの詳細についてはまたの機会に説明します。
ここでは線の太さ、形、色を変える方法を簡単に説明します。
境界線をつける「style属性」の「borderプロパティ」
いままでたくさんの要素で説明してきた「style属性」、「img要素」にももちろんあります。
スタイルシートの詳細についてはまたの機会に説明します。
ここでは「borderプロパティ」を使って画像に境界線を付ける方法を説明します。
まずは、太さ1ピクセル、形は実線、色が赤の線を画像の境界につけてみましょう。
src属性で指定した<img src="image.png">に太さ1ピクセル、形は実線、色が赤の境界線を付けるには、
<img src="image.png" style="border:1px solid red;">
または、<img src="image.png" style="border:1px solid #FF0000;">
と指定します。前回の「hr要素」で説明した線の引き方に似ていますね。
ほとんどが「hr要素」での線の引き方と同じですが、ここでも同じように境界線の引き方を説明します。
まずborder:に続く1pxで、境界線の太さを1ピクセルにしなさいと指定しています。
ピクセル単位での指定方法、もしくは「thin」「medium」「thick」（それぞれ薄い、中間、厚い）といった指定の仕方もあります。
実際に、上からthin、medium、thickを指定した例を赤線で表示します。
つぎのsolidでは、実線を引きなさいと指定しています。
このsolidの部分を変えることで、境界線の形、引き方を変えることができます。
前回の「hr要素」の時と同じですが、この線の形には以下の種類があります。
- none
- 線を引きません。
- hidden
- noneと同じく線を引きません。
- dotted
- 点線を引きます。
- dashed
- 破線を引きます。
- solid
- 実線を引きます。
- double
- 二重線を引きます。
- groove
- くぼみのような線を引きます
- ridge
- grooveと逆のような線を引きます。
- inset
- 箱をはめ込んだような線を引きます。
- outset
- insetと逆のような線を引きます。
言葉だけではわかりにくいので、境界線の太さをthick、色を赤に指定した線をそれぞれ表示します
・hidden
・dotted
・dashed
・solid
・double
・groove
・ridge
・inset
・outset
最後の#FF0000、redで色を赤に指定しています。
この部分を#00FF00、greenにすると緑、#0000FF、blueにすると青になります。
色の指定の仕方は、、「div要素」の説明で詳しく説明しているのでそちらをご覧ください。
背景色を変える、「background-colorプロパティ」
「div要素」と「span要素」で説明した背景色を変える、background-colorプロパティが「img要素」にもあります。
点線や破線の線のない部分や、透過PNGの透明色の部分が背景色になります。
src属性で指定した<img src="image.png">の背景色を赤に変えるには、
<img src="image.png" style="background-color:#FF0000;">
もしくは、
<img src="image.png" style="background-color:red;">
と記述します。
・画像は透過PNG、境界線は赤の点線、背景色を青にした場合
画像に影を付ける、「box-shadowプロパティ」
画像に影を付けて、立体感を出すことができます。
画像に影を付けるには、「box-shadowプロパティ」を使います。
src属性で指定した<img src="image.png">に影を付けるには、
<img src="image.png" style="box-shadow: 1px 2px 5px #000000;">
のように記述します。
最初の1pxは右方向の影です。マイナスの数を指定すると左側に影ができます。
次の2pxは下方向の影です。マイナスの数を指定すると上側に影ができます。
３つ目の5pxは影をぼかす範囲です。この数を大きくすると影は大きく薄くなります。マイナスの数は指定できません。
最後の#000000は影の色です。この場合、影の色を黒に指定しています。
・左-5px、下-1px、ぼかす範囲を2px、色を#0000FF(青)を指定した場合は以下のようになります
サンプル
今回説明した、「img要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
なお、WordPressの仕様上、src属性を絶対パスで指定しています。
サンプルを使用する場合は、まず画像を用意し、src属性のURLを書き換えてください。
サンプルソースコード
<div style="background-color:silver;"> 縦200ピクセル、横200ピクセルの画像に「星のイメージ」と代わりのテキストを付け、説明文を「200×200の星の絵」にして表示します。<br> <img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="200"width="200" alt="星のイメージ" title="200×200の星の絵"><br> 上の画像を縦100ピクセル、横300ピクセルにし、「100×300の星のイメージ」と代わりのテキストをつけ、、説明文を「100×300の星の絵」にして表示します。<br> <img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="100"width="300" alt="100×300の星のイメージ" title="100×300の星の絵"><br> 縦200ピクセル、横200ピクセルの画像に「境界線つき星のイメージ」と代わりのテキストを付け、説明文を「白の二重線の境界線つき星の絵」にし、太い二重線の境界線を白色で引き、背景色を黒に指定して表示します。<br> <img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="200"width="200" alt="境界線つき星のイメージ" title="白の二重線の境界線つき星の絵" style="border:thick double white;background-color:black;"><br> 縦200ピクセル、横200ピクセルの画像に「影つき星のイメージ」と代わりのテキストを付け、説明文を「灰色の境界線と黒い影つき星の絵」にし細い実線の境界線を銀色で引き、左2px、下2px、ぼかす範囲5px、黒の影を付けて表示します。<br> <img src = "http://blog.thinkreatesoft.net/wp/wp-content/uploads/2014/12/star-image.png" height="200"width="200" alt="影つき星のイメージ" title="灰色の境界線と黒い影つき星の絵" style="border:thin solid gray;box-shadow: 2px 2px 5px black;"><br> </div>
表示結果
上の画像を縦100ピクセル、横300ピクセルにし、「100×300の星のイメージ」と代わりのテキストをつけ、、説明文を「100×300の星の絵」にして表示します。
縦200ピクセル、横200ピクセルの画像に「境界線つき星のイメージ」と代わりのテキストを付け、説明文を「白の二重線の境界線つき星の絵」にし、太い二重線の境界線を白色で引き、背景色を黒に指定して表示します。
縦200ピクセル、横200ピクセルの画像に「影つき星のイメージ」と代わりのテキストを付け、説明文を「灰色の境界線と黒い影つき星の絵」にし細い実線の境界線を銀色で引き、左2px、下2px、ぼかす範囲5px、黒の影を付けて表示します。
「img要素」のまとめと次回記事について
今回説明した「img要素」はいかがでしたでしょうか。
「img要素」はHTML文書内に画像を表示するときには必須の要素で、とても重要な要素です。
次回は、ハイパーリンク「a要素」の説明をします。
以上、当サイト管理人のAsterismでした。