【決定版】Web制作初心者向け！HTML/CSSだけで作るレスポンシブギャラリーサイト

HTML

こんにちは、かたすけです！

Webサイトやブログを運営する上で欠かせないのが、スマートフォンやタブレットなど、あらゆるデバイスで適切に表示される「レスポンシブデザイン」です。

今回は、HTMLとCSSの基本的な知識だけで、プロが作ったようなレスポンシブ対応のギャラリーサイトを制作するプロジェクトに挑戦します。

このプロジェクトを通して、Web制作の最重要テクニックであるFlexboxとメディアクエリを完全にマスターし、どんな画面サイズでも美しく表示されるサイトを作るスキルを身につけましょう

かたすけ
かたすけ

色々な大きさのデバイスがある現代では、レスポンシブデザインは必要不可欠な知識だよ！

完成イメージを見てみよう！

今回作成するギャラリーサイトは、PCでは写真が横に4枚、タブレットでは2枚、スマートフォンでは1枚ずつ表示されるように、画面サイズに合わせて自動でレイアウトが変化します。

  • PC画面: 写真が4枚横並び
  • タブレット画面: 写真が2枚横並び
  • スマートフォン画面: 写真が1枚ずつ縦に並ぶ

ステップ1：HTMLでギャラリーの「骨組み」を作る

まずは、写真を表示するためのHTMLの構造を記述します。ギャラリー全体を囲むコンテナと、個々の写真を入れるカードの組み合わせで構成します。

以下のコードをコピーして、「gallery.html」という名前で保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブギャラリー</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>My Photo Gallery</h1>
    </header>

    <main>
        <div class="gallery-container">
            <div class="gallery-item">
                <img src="photo1.jpg" alt="風景写真1">
            </div>
            <div class="gallery-item">
                <img src="photo2.jpg" alt="風景写真2">
            </div>
            <div class="gallery-item">
                <img src="photo3.jpg" alt="風景写真3">
            </div>
            <div class="gallery-item">
                <img src="photo4.jpg" alt="風景写真4">
            </div>
            <div class="gallery-item">
                <img src="photo5.jpg" alt="風景写真5">
            </div>
            <div class="gallery-item">
                <img src="photo6.jpg" alt="風景写真6">
            </div>
            <div class="gallery-item">
                <img src="photo7.jpg" alt="風景写真7">
            </div>
            <div class="gallery-item">
                <img src="photo8.jpg" alt="風景写真8">
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 かたすけ</p>
    </footer>

</body>
</html>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>は、「画面の幅をデバイスの幅に合わせ、初期の表示倍率を1.0倍にする」という指示です。

  • このコードがないと… スマートフォンで見たときに、PCと同じように小さく表示されたり、横スクロールが必要になったりして、とても見づらいサイトになってしまいます。
  • このコードがあると… 画面サイズに合わせて文字や画像が自動的に調整され、スマートフォンでも快適に閲覧できるモバイルフレンドリーなサイトになります。これは、検索エンジンからの評価にも大きく影響する、現代のウェブサイトには必須のタグです。

ステップ2：CSSで「レスポンシブ対応」にする

次に、Flexboxとメディアクエリを使って、画面サイズに応じてレイアウトが変化するようにCSSを記述します。

以下のコードをコピーして、「style.css」という名前で保存してください。

body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

header {
    text-align: center;
    padding: 2rem 0;
    background-color: #333;
    color: white;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.gallery-item {
    width: calc(25% - 10px);
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: white;
    margin-top: 20px;
}

/* ------------------------------------------------ */
/* ここからがレスポンシブ対応のメディアクエリ */
/* ------------------------------------------------ */

/* タブレット用のスタイル（画面幅が768px以下の場合に適用） */
@media (max-width: 768px) {
    .gallery-item {
        width: calc(50% - 10px);
    }
}

/* スマートフォン用のスタイル（画面幅が480px以下の場合に適用） */
@media (max-width: 480px) {
    .gallery-item {
        width: 100%;
    }
}

CSSの重要ポイントを徹底解説

このプロジェクトの肝となるのが、Flexboxとメディアクエリです。

1. Flexboxの役割

Flexboxは、Webページの要素をきれいに並べるための強力なツールです。特に、要素を横並びにしたり、中央寄せにしたりするのが得意です。

今回のギャラリーサイトでは、Flexboxを使って、写真を柔軟に配置しています。

  • display: flex;: 親要素である.gallery-containerにこのプロパティを指定することで、子要素の.gallery-itemが横並びになります。
  • flex-wrap: wrap;: 親要素の幅を超えた場合に、子要素が次の行に自動で折り返すように設定します。これがないと、写真がはみ出てしまいます。
  • justify-content: center;: 余ったスペースを適切に分配し、カードを中央に寄せることができます。
  • gap: 10px;: 新しいCSSプロパティで、要素間の余白（隙間）を簡単に設定できます。これまではmarginを使っていましたが、gapを使うとよりシンプルに記述できます。
  • width: calc(25% - 10px);: calc()はCSSで計算ができる関数です。写真1枚の幅を「親要素の25% – 余白」とすることで、1行にぴったり4枚並ぶようにしています。

2. メディアクエリの役割

メディアクエリは、Webサイトを見るデバイス（PC、スマホなど）の画面サイズに応じて、適用するCSSを切り替えるための技術です。

  • @media (max-width: 768px): 「画面の幅が最大768pxのとき、この中のCSSを適用します」という意味です。一般的なタブレットのサイズを想定しています。このサイズでは、.gallery-itemの幅をcalc(50% - 10px)にすることで、1行に2枚並ぶように調整しています。
  • @media (max-width: 480px): 「画面の幅が最大480pxのとき」に適用されます。スマートフォンを想定しており、.gallery-itemの幅を100%にすることで、1行に1枚表示されるようにしています。

ステップ3：さらにギャラリーを魅力的にする応用テクニック

基本的なギャラリーが完成したら、さらにカスタマイズして自分だけのサイトに仕上げてみましょう。

応用1：ホバーアニメーションを追加する

写真にマウスを乗せたときに、少し拡大するようなアニメーションを加えると、よりプロフェッショナルな印象になります。

/* style.cssに追記 */
.gallery-item img {
    /* ... 既存のコード ... */
    transition: transform 0.3s ease-in-out; /* アニメーションをなめらかに */
}

.gallery-item img:hover {
    transform: scale(1.05); /* 1.05倍に拡大 */
}

応用2：写真にキャプションを付ける

写真の下に、タイトルや説明文を追加すると、ギャラリーがより分かりやすくなります。

HTML (gallery.html)に追記

<div class="gallery-item">
    <img src="photo1.jpg" alt="風景写真1">
    <div class="caption">
        <h3>夕焼けの海</h3>
        <p>旅先で出会った美しい夕焼けです。</p>
    </div>
</div>

CSS (style.css)に追記

/* 新しいクラスのスタイルを追加 */
.caption {
    padding: 10px;
    text-align: center;
}

.caption h3 {
    font-size: 1rem;
    margin: 0 0 5px;
}

.caption p {
    font-size: 0.8rem;
    color: #999;
    margin: 0;
}

応用3：CSS Gridを使ってさらに高度なレイアウトに

今回のプロジェクトではFlexboxを使いましたが、CSSにはもう一つ強力なレイアウトツール「CSS Grid」があります。Gridは、複雑なグリッドレイアウト（縦横に均等なマス目）を作るのに特化しています。興味があれば、display: grid;を使って同じギャラリーサイトを作ってみるのも良い勉強になります。

まとめ：FlexboxとメディアクエリでWeb制作の幅が広がる

お疲れ様でした！今回のプロジェクトを通して、Flexboxとメディアクエリがいかに便利で強力なツールか、実感してもらえたのではないでしょうか。

レスポンシブデザインは、現代のWeb制作における必須スキルです。このプロジェクトで得た知識を活かして、様々なWebサイト制作に挑戦してみてください！

ではまた！

タイトルとURLをコピーしました