はじめに
目的
この文書は、ホームページに写真を効果的に表示・活用する方法をやさしく解説します。HTMLの基本から、画像の準備、配置、装飾、アクセシビリティまでを順に学べます。初心者でも中級者でも実践できる内容です。
読者想定
・自分でホームページを作りたい方
・写真の見せ方を改善したい方
・ブログや店舗サイトの写真に悩んでいる方
本書で学べること（主な項目）
・imgタグの基本的な使い方と例
・よく使う画像形式とファイル準備のコツ
・相対パス／絶対パスの違いと指定方法
・画像サイズや配置の調整方法
・alt属性などアクセシビリティの扱い方
・CSSでの装飾（角丸・影・枠線など）
・背景画像の使い分けと意味づけ
・写真の選び方・見せ方のポイント
学び方のコツ
各章は短い例を中心に説明します。実際に手を動かして試すと理解が早まります。難しい専門用語は最小限に留め、具体例で補足します。
この章では全体の地図を示しました。次章から順に進めていきましょう。
ホームページに写真を表示する基本：imgタグの使い方
基本構文
写真を表示する最も基本的な書き方は次のとおりです。
<img src="photo.jpg" alt="風景写真">
imgは空要素で閉じタグがありません。src属性に画像ファイルの場所、alt属性に代替テキストを必ず書きます。altは画像が表示されないときやスクリーンリーダーで内容を伝えるために重要です。
必須属性の役割
- src：画像のファイル名やURL（例:
images/photo.jpg、https://.../photo.jpg） - alt：簡潔に内容を説明（装飾目的なら空文字
alt=""）
表示の注意点
幅や高さはHTMLのwidth/height属性で指定できますが、画像比率が崩れることがあります。簡単な対応策としてCSSで max-width:100%; height:auto; を使うと画面幅に合わせて縮小します。
よくある間違い
- altを書き忘れる（アクセシビリティに問題）
- パスを間違える（スペルやフォルダ階層の確認を）
- 大きすぎる画像をそのまま使う（表示が遅くなるので事前にサイズを軽くする）
実際に試すときは、まずローカルの画像名とフォルダ構成を確認してからHTMLに記述してみてください。
よく使う画像形式と画像ファイルの準備
よく使う画像形式
- JPEG（JPG）: 写真に向きます。圧縮率が高くファイルサイズを抑えやすいです。透過はできません。
- PNG: ロゴやアイコン、透過が必要な画像に適します。画質を保ちやすい反面、ファイルが大きくなりがちです。
- WEBP: 最近広まった形式で、同等画質ならファイルサイズが小さくなりやすいです。対応ブラウザが多いので軽量化に有効です。
形式の使い分け例
- 写真: JPEGまたはWEBP
- ロゴ・透過素材: PNG
- 軽量化を優先: WEBPを検討
（ベクター画像が必要ならSVGも使えます）
画像の準備と保存のポイント
- ファイル名は半角英数字で判りやすく。例: product-photo-01.jpg
- フォルダはまとめて管理: images/ に保存すると運用が楽です。
- 表示サイズに合わせてリサイズし、必要以上に大きな画像を使わない。
- カラープロファイルはsRGBで保存すると色ズレが起きにくい。
- 元ファイルはバックアップで保管して最適化済みのファイルを公開する。
- PNGは透過、JPEGは写真向け、WEBPは軽量化の選択肢と覚えてください。
ファイル例
- images/product-photo-01.jpg
- images/logo.png
- images/banner.webp
画像のパス指定：相対パスと絶対パス
相対パスとは
相対パスは、現在のHTMLファイルから見た画像の場所を指定します。たとえばindex.htmlと同じ階層にimagesフォルダがあり、その中のsora.pngを表示する場合は
親フォルダにある場合は「../」を使います。1階層上のimagesなら
絶対パスとは
絶対パスはドメインを含むフルURLで指定します。外部サーバーやCDN上の画像を使うときに便利です。
サイト内でもルートからの指定（先頭に/）を絶対パスと呼ぶ場合があります。例：
よくある例とフォルダ構成
- 同フォルダ：
- imagesフォルダ内：
- 親フォルダのimages：
注意点とおすすめ
- ローカル開発では相対パスが扱いやすいです。サイトを別ドメインへ移すときもパスを保ちやすいです。
- 外部画像やCDNは絶対パスを使いますが、外部が消えると画像が表示されなくなります。
- サーバーは大文字小文字を区別する場合が多いので、ファイル名は統一してください。
- 初期段階でフォルダ構成を決めておくとリンク切れを防げます。
画像サイズ・縦横の指定と単位
基本（HTML属性）
HTMLではwidth・height属性で指定できます。例：
<img src="photo.jpg" alt="風景写真" width="400" height="300">
この例は横400ピクセル、縦300ピクセルで表示します。両方指定すると表示サイズが固定になります。
CSSでの指定
CSSではピクセルや割合などを使えます。代表例：
img { max-width: 100%; height: auto; }
max-width:100%は画面幅に合わせて画像を縮め、height:autoで縦横比を保ちます。固定にしたいときはwidth:400px;height:300px;と指定します。
単位の違いと使い分け
- px（ピクセル）：表示を正確に揃えたいときに便利。
- %（割合）：親要素に対してサイズを決め、レスポンシブに役立ちます。
- vw（ビューポート幅）：画面幅の割合で指定できます（例：50vwは画面幅の半分）。
縦横比の管理
HTMLで誤った比率を指定すると画像が歪みます。比率を保つにはwidthだけ指定してheightをautoにするか、CSSのobject-fitで表示方法を調整します。
img.cover { width:100%; height:200px; object-fit:cover; }
この方法でトリミングしつつ見た目を整えられます。
画像位置の調整：中央寄せ・右寄せ・自由配置
はじめに
タグ単体では、ほとんどの場合左寄せで表示されます。ここでは中央寄せ、右寄せ、テキストの回り込み、そしてページ上での自由な配置方法をわかりやすく紹介します。
中央寄せ（横方向）
方法は主に二つあります。
1) コンテナの text-align を使う（インライン扱いの画像）
例:
2) 画像をブロック表示にして自動余白を使う
例:
右寄せ・左寄せ（テキストの回り込み）
画像の周りに文章を回したいときは float を使います。右寄せ例: 。余白を指定すると文字が画像にくっつかず見やすくなります。
自由配置（ページ上の任意位置）
position を使って置けます。親要素に position:relative を付け、画像に position:absolute; top:20px; left:50px; のように指定します。画面幅で位置がずれやすいので、小さな装飾やポップアップなど限定的に使うと安全です。
例:
補足と注意点
- レスポンシブを考えるなら flexbox や display:block;margin:auto の方が扱いやすいです。
- 絶対配置は他要素と重なりやすいので z-index や親のサイズに注意してください。
- float を使ったら後続要素のクリア（clear）を忘れないでください。
alt属性・title属性など付加情報の活用
alt属性とは
alt（オルトテキスト）は画像が表示されないときや音声読み上げで代わりに伝える短い説明です。意味のある写真には必ず入れてください。検索エンジンも画像内容を理解しやすくなります。
良いaltの書き方（例つき）
- 簡潔に状況を説明する：
- 人物なら誰が何をしているか：alt=”笑っている子どもと犬”
- 図やグラフは要点を一言で：alt=”売上推移グラフ（上昇）”
- 長くなりそうな場合は要点だけ書き、詳しい説明は本文やキャプションへ誘導します。
装飾画像の扱い
見た目だけの装飾ならalt=””と空にします。これにより読み上げソフトが無駄に内容を読むのを防げます。
title属性の使い方と注意点
titleはマウスオーバー時の補足表示です。例：title=”春の花の写真”。ただし、全ての支援技術が読み上げるわけではないため、重要な情報はaltに入れてください。
その他の補助手段
-
と でキャプションをつけると文脈が伝わりやすくなります。 - 複雑な図は本文で詳述するか、別の説明ページにリンクします。
実践のポイント
- 具体的で簡潔に書く。
- 装飾はalt=””。
- 重要情報はaltへ、補足はtitleやcaptionへ。
- キーワード詰め込みは避ける。検索のためでも自然な記述にしてください。
CSSで写真を装飾：角丸・影・枠線など
基本の書き方
写真にスタイルを当てるにはCSSでimg要素を指定します。例：img { display: block; max-width: 100%; height: auto; }。これでレスポンシブに表示できます。
角を丸くする（border-radius）
四隅を丸くするにはborder-radiusを使います。例：
– border-radius: 10px; — やわらかい角
– border-radius: 50%; — 正方形なら円形に見えます
角丸をコンテナで実現する場合は、親要素にoverflow: hidden;を付けると画像がはみ出さずきれいに丸まります。
影をつける（box-shadow）
立体感を出すにはbox-shadowを使います。構文はoffset-x offset-y blur spread colorです。例：
– box-shadow: 5px 5px 10px rgba(0,0,0,0.3); — 柔らかい影
– box-shadow: 0 8px 16px rgba(0,0,0,0.2); — 浮き上がる効果
複数の影を重ねることもできます。
枠線（border）とアウトライン
枠線はborder: 2px solid #ccc;のように指定します。点線にするならborder-style: dashed;を使います。outlineは外側の線なので、フォーカス時の表現に便利です。
フィルターで色味やぼかし（filter）
明るさやモノクロなどはfilterで調整できます。例：
– filter: grayscale(100%); — モノクロ
– filter: blur(2px); — ぼかし
– filter: brightness(0.9) contrast(1.1); — 微調整
ホバー時の動き（transition / transform）
装飾にアニメーションを加えると自然です。例：
img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
img:hover { transform: scale(1.03); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
過度な動きは注意し、控えめに使うと上品に見えます。
実践のポイント
- 角丸と影は組み合わせると写真が引き立ちます。
- モバイルでは影やぼかしが重くなる場合があるため、軽めの値にします。
- 画像の縦横比を保つために
object-fit: cover;を活用してください。
背景としての写真：CSS背景画像と意味づけ
背景にするかコンテンツにするかの判断
写真が情報や説明の一部ならで表示します。例えば商品写真や図解は
にします。装飾や見た目を整えるだけならCSSのbackground-imageを使います。背景はページの雰囲気作りに適します。
CSSでの基本指定と例
背景画像は以下のように指定します。
p {
background-image: url(“bg.png”);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
background-size: coverで要素全体にフィットさせ、centerで位置を中央にします。繰り返しを防ぐならno-repeatにします。
アクセシビリティとSEOの考え方
意味のある写真は必ずでマークアップし、alt属性で説明を入れてください。背景にした写真は画面読み上げに無関係な装飾扱いになります。重要な情報を背景画像だけで伝えないようにしましょう。
レスポンシブと読み込みの工夫
背景画像はCSSでメディアクエリを使いサイズ違いを切り替えます。ファイルは必要最小限にし、軽い画像やWebPを検討してください。テキスト上に置く場合は色のコントラストを確保し、必要なら半透明のオーバーレイを置いて読みやすくします。
ホームページの印象を決める「写真の選び方・使い方」のポイント
はじめに
写真は訪問者の第一印象を左右します。色味や明るさを揃えるだけで、ページ全体が落ち着き、信頼感が増します。
色味とトーンをそろえる
同じページでは暖色系や寒色系などトーンを決めます。例えば飲食店なら温かみのある暖色、コーポレートなら落ち着いた寒色が合います。簡単な方法は同じフィルターや色補正を全画像に適用することです。
写真の役割を意識する
ヒーロー画像（大きなトップ画像）は印象重視、サムネイルは伝わりやすさ重視、ギャラリーは統一感を優先します。目的に応じて画像の選び方を変えましょう。
サイズ・トリミングの注意
中心になる被写体をきちんと見せるため、クロップで顔や商品が切れないようにします。解像度は高めに用意し、表示時に適切に縮小してください。
実践テクニック
同系色でグレーディングする、明るさとコントラストを揃える、余白を統一して配置リズムを作る。これだけでプロっぽく見えます。
著作権とクレジット
商用利用可能な素材を使い、必要なら出典を明記します。自撮りや自社撮影が一番安全です。
具体例
- 飲食：温かい光で料理の色を強調
- EC：商品が分かる白背景で統一
- プロフィール：自然な表情と背景のゆるやかな統一
写真は細かな積み重ねで印象を作ります。統一感を大切に選び、配置と補正で仕上げてください。
