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タグの応用

画像のサイズを指定する

デフォルトでは、画像は元のサイズのまま表示されますが、widthheight属性を使うことでサイズを指定できます。

<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>タグは、srcalt属性を適切に設定する
  • 画像のサイズや配置をCSSで調整できる
  • loading="lazy"を使うとページの読み込み速度を改善できる
  • 画像フォーマットを適切に選び、最適化を行う

正しく<img>タグを活用し、見やすく、軽量で最適なWebページを作成しましょう!