HTMLスキル - 第3章 Lesson4

メイン画像を表示させてみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

Webサイトのメイン画像を表示させる方法を解説しています。
画像が正常に表示されなかった場合にそなえ、代替テキストである"alt"属性も加えます。



この動画で学べること

・メイン画像の表示方法
・<h3>タグを使った見出しの設定方法



<img>タグでメイン画像の表示をしよう

<img>タグを使っていきます。
<img>タグの中にsrc属性を入れて、画像のパスを入力します。
index.htmlのと同じ階層にimagesというフォルダがあるので、このように記述していきます。


<img src="images/mainimg.jpg">



記述ができたら、一度保存してブラウザで見てみましょう。
大きな画像が表示されればOKです。
次にalt属性を記述していきましょう。
alt属性を記述することで、万が一画像が表示されなかった時に、文章を表示させることができます。


<img src="images/mainimg.jpg" alt="A BETTER WAY TO HANDLE WEBSITE">




<h3>タグを使って見出しの設定をしよう

次に、わたしにできることのコンテンツを作成していきましょう。
次の<div>タグのなかに、まずは文章を書きます。
文字に見出しのタグを追加していきましょう。

「わたしにできること」を<h3>で囲みましょう。
一度保存し、ブラウザで確認すると、見出し1や見出し2よりも少し小さめの文字で表示されました。