ゆるあわ自習室 ゼロから『HTML』『CSS』編

ぜろから空いた時間に独学で!

#13ゼロからwebの基本「HTML」「CSS」編 〜13日目〜 『画像を貼ってみよう2』

「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

今日も一緒に勉強して行きましょう。

 

今回は前回説明していなかった、src属性alt属性などについて説明して行きます。

 

  • src属性

 

まずsrc属性は必須です。

src属性で、画像の格納場所(URL)をブラウザに教えます。

※ブラウザは指示どおりの画像を表示するので、コレがないと画像は表示されません。

 

URLの書き方で、フォルダとファイル名の間を「/(スラッシュ)」で区切るのを覚えてください。

そしてURLの書き方には「絶対URL」と「相対URL」があり、前回使ったのは「相対URL」ってやつです。

URLについての詳細は、またそのうちやりましょう。←まだ勉強してない、笑

 

  • alt属性

alt属性の役割は、画像表示がされないブラウザ用に「代替えの文字」を入れます。

 

通信環境などの影響で ブラウザが画像を読み込めない時に、何の画像なのかがわかるためのテキストなで、アクセシビリティ的に重要。

 

特に、画像にリンクがあった場合、画像が読み込まれなかったら

ユーザはリンクをたどれないけど、alt のテキストがあればそれをポチッとできるらしく、やっぱり大事みたいです。

なので、単なる装飾用の画像じゃないなら alt属性は必須。


本文内容と関係ない装飾用の画像なら <img>要素ではなく CSS(カスケーディング スタイルシート)で表示させます。←勉強してないので詳しくはまた近々。

 

  • width属性・height属性

width属性・height属性で表示する幅と高さをピクセルサイズで指定します。

 そしてこの2つの属性は省略可能です。

 

もはや幅や高さはCSSで指定するやり方が標準になっているらしく、この属性はあんまり使われないみたいです。

 

今回は一応基本みたいなのでやってみました。知ってて損はないかと。

 

  • 最後に

キリがいいので今回はここまでにしましょう。

画像が無くてつまらないかも知れないですが最後まで見ていただきありがとうございます。

 

次回 →画像使ってちょっと応用してみましょう。