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