ホームぺージに使用する画像の設定方法【基礎編】

画像設定の仕方

<!-- HTML -->
<img src="img/sample.png" alt="ホームページのサンプル画像">

/* CSS */
img {width:1080px;height:540px;}

通常ホームページへ画像を掲載する場合は、<img>タグを使用します。

src(ソース)属性について

◆src属性は設定必須。

画像のURLは相対パス(編集しているファイルが置いてある場所起点)でも絶対パス(http～始まる)でもOK。

applismでホームページを作成する場合は、現時点では次のように使い分けています。

alt(オルト)属性について

◆alt属性は設定任意。

Webブラウザで画像が表示できないときに、画像の代わりに表示されるテキストで設定は任意ですが、SEOやユーザビリティーの観点から記載したほうが良い。
Googleは現時点で画像の内容を完全に把握することはできないためにalt設定するというのはもちろんですが、音声読み上げ機能を使用して閲覧される方のユーザビリティーのためにも、画像が見えない状態でも、提載している画像がどんなものかわかるように具体的な記述をする必要があります。

画像の表示設定の仕方

画像の表示の仕方は基本的にcssで行います。
ただ、普通に指定すると、画像の下などに余白が出来ることがあり、思うようなレイアウトにならない場合があります。これはimgタグがimgタグがインライン要素で、インライン要素はvertical-alignのプロパティの初期値がbaselineであるためです。細かく言い出すときりがないので、理由はそうなんだ程度で大丈夫です。余白を出したくない場合は次のように指定していただければ余白は消えます。

余白の消し方1:vertical-alignを変更する

vertical-alignをbaseline以外の値で「top」「middle」「bottom」などを指定して、明確に揃え位置を設定する。

img {
 width:100%;
 height:auto;
 vertical-align: bottom;/*これを指定*/
}

余白の消し方2:imgタグをブロックレベル要素に変更する

こちらは私も良く使用する方法ですが、imgタグをブロックレベル要素に変更します。
「display:block;」を設定するだけですが、ブロックレベル要素はtext-align:center;などが使用できなくなるため注意が必要です。中央寄せや右寄せなどの位置指定をする場合は、ブロックレベル要素で指定する方法で位置指定してください。

img {
 display:block;/*これを追加*/
 width:80%;
 height:auto;
 margin:0 auto;/*画像を中央寄せする場合*/
}

まとめ

画像の設定方法【基礎編】は以上です。
画像のalt属性は必ずSEOとユーザビリティの観点から出来る限り設定しましょう！ただし、装飾目的の場合は空白でも問題ありません。
次回はFlexboxなどで横並びにする際に、大きさを揃える方法やレイアウト上の見た目をさらによくするための設定方法について記載していきたいと思います。