img要素でWebページに画像を挿入しよう
Webページに表示できる情報はテキストだけではなく、画像を挿入できます。
文字だけでは伝わりにくい情報を視覚的に伝えることで効果が増してきます。
画像を挿入するimg要素
画像を挿入する場合は「img要素」を使用します、この要素には「src属性」と「alt属性」をセットで使用します。
src属性は画像がある場所(フォルダー名)とファイル名を指定します。
alt属性は画像の説明をします、画像がもし見えない場合に画像がどのようなものか説明してくれます。
img要素の記述の要領
<img src="画像の場所とファイル名" alt="画像の説明">
このような形になります、このimg要素は終了タグがありません。
このように</>終了タグが無く内容を持たないものを空要素といいます。
src属性 画像ファイルを指定
表示する画像が保存されている場所とファイル名を指定してくれます。
これを指定しないと画像は表示されません、指定の仕方は「フォルダー」を指定してその中の画像を指定します。
記述の方法は「imgesのフォルダー内のneko.jpgの画像を挿入して」ということで
src="imges/neko.jpg"になります、フォルダーとファイルの間を「/」スラッシュで区切ります。
alt属性 画像の代わりにテキストを表示
alt属性にはその画像の内容が分かるような言葉を簡潔に書きましょう。
もしsrc属性の記述が間違っていた場合には、画像は表示されずにalt属性に記述している言葉がブラウザに表示されます。
検索エンジンでは代替えテキストが無い場合は画像を理解できません。
記事の内容に合った画像には画像の内容を書くようにしましょう、ただし多くの情報を書き込めば検索エンジンが何を伝えたいのか混乱するので伝わりやすいように簡潔にまとめましょう。
近頃は音声読み上げの機能があるブラウザやパソコンがあるのでテキストを記入していないと内容が理解できない事があります。
画像のサイズを指定する width・height属性
サイズを指定する属性は「width」と「height」属性でwidth属性が幅を指定し、height属性が高さを指定します。
属性の値は数値を入力します。
画像のpx数に合わせて両方を”３００px”で指定してやると元の大きさで表示されます、単位は省略しても大丈夫です。
高さを画像より小さく”２００px”で指定すると圧縮されたように表示されます。
画像の幅だけを指定すると、数値を記述しない属性は縦横比率を保ったままのサイズで表示されます。
height属性だけを記述した場合も同様です。
src属性の記述を間違えた場合は、画像が表示されずにalt属性のテキストが表示されます。
このような事があるのでalt属性は画像の説明を簡潔に分かり易く書きましょう。
このように画像のある場所には小さなファビコンが表示され、alt属性の”医者”だけが表示されています。
img要素でWebページに画像を挿入しよう
テキストだけでは表現しにくい事を画像を使って分かり易くします。
現在は音声読み上げの機能が付いたブラウザでは画像の内容を音声で説明したりもします、alt属性には検索エンジンにも分かり易いような言葉で簡潔に記述しましょう。
