HTML手打ち、imgタグで画像表示
こんばんは！IT業界で働くアライグマです！
HTMLを手打ちでコーディングすることは、Web開発の基本をしっかり理解するために非常に有効です。最近ではCMSやWebサイトビルダーを使って手軽にページを作成できますが、基礎的なHTMLの知識があると、エラーの修正やカスタマイズがスムーズになります。
本記事では、HTMLを手打ちする際の基本的な知識と、imgタグを使って画像を表示する方法について詳しく解説します。正しい記述方法を理解し、Webページに適切な画像を表示できるようになりましょう。
imgタグとは？
imgタグの基本構造
<img>タグは、HTMLで画像を表示するための要素です。基本的な構文は以下のようになります。
<img src="画像のURL" alt="画像の説明">
src属性: 表示する画像のURL（ファイルのパス）を指定alt属性: 画像が表示されない場合に代替テキストとして表示される
alt属性はSEOやアクセシビリティの観点からも重要な役割を果たすため、必ず記述するようにしましょう。
ローカル画像と外部画像の違い
画像は、ローカル（自分のサーバー内）にあるものと、外部サイトから取得するものに分かれます。
ローカル画像を表示する場合
HTMLファイルと同じフォルダにある画像を表示する場合は、相対パスを使います。
<img src="image.jpg" alt="ローカル画像">
異なるフォルダにある場合は、ディレクトリ名を指定します。
<img src="images/sample.png" alt="サンプル画像">
外部の画像を表示する場合
外部のサーバーにある画像を表示する場合は、URLを指定します。
<img src="https://example.com/image.jpg" alt="外部画像">
外部の画像を利用する場合、リンク切れのリスクがあるため、なるべく自分のサーバーに保存して使用するのが安全です。
imgタグの応用
画像のサイズを指定する
デフォルトでは、画像は元のサイズのまま表示されますが、widthやheight属性を使うことでサイズを指定できます。
<img src="image.jpg" alt="サイズ指定" width="300" height="200">
CSSを使ってサイズを指定する方法も一般的です。
<img src="image.jpg" alt="CSSでサイズ指定" style="width: 300px; height: 200px;">
画像の縦横比を崩さずにリサイズする場合は、heightを省略するか、CSSのautoを使います。
<img src="image.jpg" alt="縦横比を維持" width="300" height="auto">
画像を中央に配置する
画像をページの中央に配置するには、CSSを活用します。
<img src="image.jpg" alt="中央配置" style="display: block; margin: auto;">
これは、display: block;を設定し、margin: auto;を指定することで、画像を水平方向の中央に配置する方法です。
画像にリンクを設定する
画像をクリック可能にするには、<a>タグと組み合わせます。
<a href="https://example.com">
<img src="image.jpg" alt="リンク付き画像">
</a>
この方法を使うと、画像をクリックすると指定したURLに移動できるようになります。
画像の遅延読み込み（Lazy Load）
ページの読み込み速度を向上させるために、loading="lazy"を使うことが推奨されています。
<img src="image.jpg" alt="遅延読み込み" loading="lazy">
この設定をすると、ユーザーがスクロールして画像が表示されるタイミングで読み込まれるため、ページの初回読み込みが速くなります。
背景画像としての利用
imgタグではなく、CSSのbackground-imageを使って画像を背景として設定することもできます。
<div style="width: 300px; height: 200px; background-image: url('image.jpg'); background-size: cover;"></div>
この方法を使うと、テキストの上に画像を重ねたり、デザインの自由度を高めたりできます。
画像の最適化とSEO対策
適切な画像フォーマットを選ぶ
画像フォーマットには、主に以下の種類があります。
| フォーマット | 特徴 | 用途の例 |
|---|---|---|
| JPEG | 高圧縮・軽量 | 写真やイラスト |
| PNG | 透明背景対応 | ロゴやアイコン |
| GIF | アニメーション対応 | 簡単な動きのある画像 |
| WebP | 高圧縮・高画質 | 次世代フォーマット |
WebPはファイルサイズを削減しつつ高画質を維持できるため、可能であれば活用するとよいでしょう。
alt属性を適切に設定する
検索エンジンは画像の内容を直接理解できないため、alt属性を適切に記述することがSEO対策として重要です。
良い例:
<img src="dog.jpg" alt="芝生の上で遊ぶ柴犬">
悪い例:
<img src="dog.jpg" alt="画像1">
意味のある説明を入れることで、検索結果の表示やアクセシビリティ向上につながります。
画像の圧縮と軽量化
画像が重いとページの読み込み速度が遅くなり、ユーザーの離脱率が上がる可能性があります。以下の方法で最適化しましょう。
- PhotoshopやTinyPNGなどのツールで圧縮
- WebP形式を活用
- 必要以上に大きなサイズの画像を使わない
GoogleのPageSpeed Insightsを使うと、画像の最適化状況をチェックできます。
まとめ
HTMLを手打ちでコーディングすることで、Web開発の基本をしっかり学べます。<img>タグを使った画像表示は、シンプルながら奥が深く、適切な設定を行うことで、ページのデザインやSEOの向上につながります。
今回のポイントをおさらいしましょう。
<img>タグは、srcとalt属性を適切に設定する- 画像のサイズや配置をCSSで調整できる
loading="lazy"を使うとページの読み込み速度を改善できる- 画像フォーマットを適切に選び、最適化を行う
正しく<img>タグを活用し、見やすく、軽量で最適なWebページを作成しましょう！