imgタグに使うことができるさまざまな属性について見たのち、h2とpを使ったマークアップをしていきましょう。
alt属性
前回はheadの中身について見てきました。
詳しくは『【HTMLを書いていこう】ホームページの情報を内包するheadタグ』を読んで見て下さい。
今回はbodyタグの中身についてみていきます。
基本的にブラウザに表示される内容についてはここに書いていきます。
bodyタグの中には見出しのh1タグや文章のpタグ写真や画像のimgタグなどをいれて形を作っていきます。
imgタグでは画像やアイコンを入れて行きます。imgタグの使い方については以前説明したので割愛しますが今回はsrc属性以外の属性についてみていきます。
alt属性はその画像の説明を書いていくための属性です。
画像などが何らかの理由で表示できない場合はその説明が代替のテキストとして表示されます。
また目の不自由なひとが使う音声読み上げ機能ではこのalt属性の文章が画像の代わりに読み上げられるのでしっかりと設定しておきましょう。
alt=“説明”というような感じで指定していきます。
width属性
画像の横幅を指定できる属性で単位はピクセルです。
width=“数字”で指定することができます。
height属性
画像の縦幅を指定できる属性で単位はピクセルです。
height=“数字”で指定することができます。
行複製のショートカットキー
VScodeには行を複製することが多いのでそのためのショートカットが用意されています。
shift+option+↓でその行の文章の下に新しく行を作り同じ文章をコピーして貼り付けをしてくれます。
以降の行は変わってしまうのでそこだけ注意が必要です。
また範囲を指定したあとにショートカットキーを押すと範囲全体をコピーして貼り付けできます。
h2
見出しタグであるh1は重要度に応じてh1からh6まで使うことができます。
h2は2番めに重要な見出しとして使うような形になります。またh2はh1 よりも少し小さいスタイルで表示されます。
p
pタグは内容を書いていくためのタグです。
文章を主に書いていくタグになります。
以上
