はじめに
HTMLでロゴ画像を表示するとき、<img> タグを使うのが基本です。今回は以下のようなコード：
<img src="images/logo.png" alt="ロゴ" style="height: 50px;">
この1行に絞って、何をやっているのか、なぜこのような書き方をしているのかを、自分用の備忘録としてまとめます。
書こうと思ったきっかけ
Webサイトのロゴを配置する際に、表示サイズが大きすぎたり、画像の読み込みに失敗していたりすることがありました。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
特に alt 属性の重要性や style でのサイズ指定の意味をちゃんと理解しておきたいと感じたのがきっかけです。
内容の説明
src="images/logo.png"
- 画像ファイルのパスを指定します。
-
images/フォルダの中にlogo.pngという名前の画像がある前提。 - 相対パスなので、HTMLファイルの位置とフォルダ構成が関係します。
alt="ロゴ"
- 画像が表示できない場合に代わりに表示されるテキスト。
- 視覚障害者向けのスクリーンリーダーでも読み上げられる。
- アクセシビリティやSEOの観点からも重要。
style="height: 50px;"
- CSSを直接タグに指定する「インラインスタイル」。
- この場合は、画像の高さを50pxに制限。
- 幅（width）は自動的に比率を保って縮小される。
まとめ
-
imgタグでロゴを表示する際は、srcのパス、altの説明、styleによるサイズ調整が基本。 - 特に
altの記述を忘れがちなので注意。 - サイズはCSSファイルにまとめてもよいが、インラインで調整したいときは
styleも有効。
Webページの第一印象を決めるロゴ部分だからこそ、丁寧に書く習慣をつけていきたいです！