HTML

bodyタグを見ていこう

imgタグに使うことができるさまざまな属性について見たのち、h2とpを使ったマークアップをしていきましょう。

  • alt属性
  • width属性
  • height属性
  • 行複製のショートカットキー
  • h2
  • p

alt属性

・bodyタグの中身についてみていきます。基本的にブラウザに表示される内容についてはここに書いていきます。

・bodyタグの中には見出しのh1タグや文章のpタグ写真や画像のimgタグなどをいれて形を作っていきます。

・imgタグでは画像やアイコンを入れて行きます。imgタグの使い方については以前説明したので割愛しますが今回はsrc属性以外の属性についてみていきます。

imgタグで画像を配置しよう

・alt属性はその画像の説明を書いていくための属性です。画像などが何らかの理由で表示できない場合はその説明が代替のテキストとして表示されます。

・また目の不自由なひとが使う音声読み上げ機能ではこのalt属性の文章が画像の代わりに読み上げられるのでしっかりと設定しておきましょう。

・alt=“説明”というような感じで指定していきます。

width属性

・画像の横幅を指定できる属性で単位はピクセルです。

・width=“数字”で指定することができます。

height属性

・・画像の縦幅を指定できる属性で単位はピクセルです。

・height=“数字”で指定することができます。

行複製のショートカットキー

・VScodeには行を複製することが多いのでそのためのショートカットが用意されています。

・shift+option+↓でその行の文章の下に新しく行を作り同じ文章をコピーして貼り付けをしてくれます。

・以降の行は変わってしまうのでそこだけ注意が必要です。

・また範囲を指定したあとにショートカットキーを押すと範囲全体をコピーして貼り付けできます。

h2

・見出しタグであるh1は重要度に応じてh1からh6まで使うことができます。

・h2は2番めに重要な見出しとして使うような形になります。またh2はh1 よりも少し小さいスタイルで表示されます。

p

・pタグは内容を書いていくためのタグです。

ー広告ー

 

 






-HTML