MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！おしゃれなグリッドレイアウト16選

【HTML/CSS】コピペ！おしゃれなグリッドレイアウト16選

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なおしゃれなグリッドレイアウトのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ページ全体レイアウト（基本構造）

Webサイトの大枠となる、最もオーソドックスで頻出するグリッドパターンです。

ページ全体レイアウト（基本構造）
  • 王道2カラムレイアウト
  • ホーリーグレイル（聖杯）レイアウト
  • フルスクリーン・スプリット
  • 固定ヘッダー＋可変メイン

実際のデザインプレビューとHTML＆CSSコードを記載しています。

王道2カラムレイアウト

ブログ記事のテンプレートやWebサービスの管理画面などでよく使われる構成です。

メインコンテンツ（1fr）

ここに記事の本文やメインとなる情報が入ります。
Gridの `1fr`（フラクション）を指定しているため、サイドバーの幅を引いた残りのスペースをすべて自動で埋めるように柔軟に伸縮します。

サイドバー（300px）

プロフィールや目次、バナーなどを配置するエリアです。
幅を `300px` で固定しているため、画面サイズが変わってもこのエリアの幅は維持されます。

HTMLコード表示
<div class="cs-grid-2col-wrapper">
    <!-- ▼ メインコンテンツ ▼ -->
    <div class="cs-grid-2col-main">
        <div class="cs-grid-title">メインコンテンツ（1fr）</div>
        <p>
            ここに記事の本文やメインとなる情報が入ります。<br>
            Gridの `1fr`（フラクション）を指定しているため、サイドバーの幅を引いた残りのスペースをすべて自動で埋めるように柔軟に伸縮します。
        </p>
    </div>

    <!-- ▼ サイドバー ▼ -->
    <div class="cs-grid-2col-sidebar">
        <div class="cs-grid-title">サイドバー（300px）</div>
        <p>
            プロフィールや目次、バナーなどを配置するエリアです。<br>
            幅を `300px` で固定しているため、画面サイズが変わってもこのエリアの幅は維持されます。
        </p>
    </div>
</div>
CSSコード表示
/* =========================================
   1. グリッドの骨組み
========================================= */
.cs-grid-2col-wrapper {
    display: grid;
    /* ▼ ここが2カラムの核 ▼ 
       左側を残りすべての幅(1fr)、右側を300pxに固定 */
    grid-template-columns: 1fr 300px;
    gap: 32px; /* カラム間の余白 */
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. 各エリアのデモ用装飾
========================================= */
/* メインエリア */
.cs-grid-2col-main {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 32px;
}

/* サイドバーエリア */
.cs-grid-2col-sidebar {
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1; /* メインとの違いを出すため点線に */
    border-radius: 8px;
    padding: 24px;
}

/* =========================================
   3. テキストの装飾
========================================= */
.cs-grid-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
}

.cs-grid-2col-wrapper p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a5568;
    margin: 0;
}

/* =========================================
   4. レスポンシブ対応（スマホ・タブレット）
========================================= */
@media screen and (max-width: 768px) {
    .cs-grid-2col-wrapper {
        /* ▼ 画面が狭くなったら1カラム(縦積み)に変更 ▼ */
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

ホーリーグレイル（聖杯）レイアウト

「ヘッダー」「フッター」「左右のサイドバー」「中央のメインコンテンツ」の5つのエリアで構成される、Webデザインにおいて昔から理想とされてきたレイアウトです。

Header

サイトのロゴやグローバルナビゲーション

Left Sidebar

サブメニューや
カテゴリー一覧

Main Content

記事の本文やメインとなる情報が入ります。
左右のサイドバーの幅を除いた残りのスペースをすべて使い、一番高さを取る領域として柔軟に伸縮します。

Right Sidebar

広告バナーや
プロフィール情報

Footer

コピーライトやフッターリンク

HTMLコード表示
<div class="cs-holy-wrapper">
    <!-- ▼ 1. ヘッダー ▼ -->
    <div class="cs-holy-header">
        <div class="cs-holy-title">Header</div>
        <p>サイトのロゴやグローバルナビゲーション</p>
    </div>

    <!-- ▼ 2. 左サイドバー ▼ -->
    <div class="cs-holy-left">
        <div class="cs-holy-title">Left Sidebar</div>
        <p>サブメニューや<br>カテゴリー一覧</p>
    </div>

    <!-- ▼ 3. メインコンテンツ ▼ -->
    <div class="cs-holy-main">
        <div class="cs-holy-title">Main Content</div>
        <p>
            記事の本文やメインとなる情報が入ります。<br>
            左右のサイドバーの幅を除いた残りのスペースをすべて使い、一番高さを取る領域として柔軟に伸縮します。
        </p>
    </div>

    <!-- ▼ 4. 右サイドバー ▼ -->
    <div class="cs-holy-right">
        <div class="cs-holy-title">Right Sidebar</div>
        <p>広告バナーや<br>プロフィール情報</p>
    </div>

    <!-- ▼ 5. フッター ▼ -->
    <div class="cs-holy-footer">
        <div class="cs-holy-title">Footer</div>
        <p>コピーライトやフッターリンク</p>
    </div>
</div>
CSSコード表示
/* =========================================
   1. グリッドの骨組み（見取り図）
========================================= */
.cs-holy-wrapper {
    display: grid;
    gap: 16px; /* 各エリアの隙間 */
    width: 100%;
    margin-bottom: 2em;
    min-height: 400px; /* デモ用にある程度の高さを確保 */

    /* ▼ 横幅の指定（左200px、中央可変、右200px） ▼ */
    grid-template-columns: 200px 1fr 200px;
    
    /* ▼ 縦幅の指定（ヘッダーとフッターはコンテンツ幅、中央は可変） ▼ */
    grid-template-rows: auto 1fr auto;

    /* ▼ エリアの配置図（直感的にレイアウトを定義） ▼ */
    grid-template-areas:
        "header header header"
        "left   main   right"
        "footer footer footer";
}

/* =========================================
   2. 各エリアの割り当てと装飾
========================================= */
/* ▼ CSSの記述図(grid-template-areas)と名前を一致させる ▼ */
.cs-holy-header { grid-area: header; }
.cs-holy-left   { grid-area: left; }
.cs-holy-main   { grid-area: main; }
.cs-holy-right  { grid-area: right; }
.cs-holy-footer { grid-area: footer; }

/* 共通の装飾（わかりやすく背景色をつける） */
.cs-holy-header, .cs-holy-left, .cs-holy-main, .cs-holy-right, .cs-holy-footer {
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

/* 個別の配色（メインとそれ以外で差をつける） */
.cs-holy-main {
    background-color: #ffffff;
    border: 2px solid #2589d0; /* メインを強調 */
}
.cs-holy-header, .cs-holy-footer {
    background-color: #f1f5f9;
}
.cs-holy-left, .cs-holy-right {
    background-color: #f8fafc;
    border-style: dashed;
}

/* =========================================
   3. テキストの装飾
========================================= */
.cs-holy-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
}
.cs-holy-wrapper p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* =========================================
   4. レスポンシブ対応（スマホ表示時は縦1列に組み替え）
========================================= */
@media screen and (max-width: 768px) {
    .cs-holy-wrapper {
        grid-template-columns: 1fr;
        /* スマホでは上から順に並び替える */
        grid-template-areas:
            "header"
            "main"
            "left"
            "right"
            "footer";
    }
}

フルスクリーン・スプリット

画面を左右（あるいは上下）に大胆に二分割し、片方に印象的なビジュアル、もう片方にテキストやフォームを配置するモダンなレイアウトです。

LP（ランディングページ）のファーストビューやログイン画面などで人気があります。

Visual Area

ブランドの世界観を伝える大きな画像や動画、または印象的なタイポグラフィなどを配置するエリアです。

Content Area

キャッチコピーや登録フォーム、詳細な説明文などを配置します。左右で背景色や情報量にコントラストをつけることで、ユーザーの視線を強く惹きつけます。

今すぐ始める
HTMLコード表示
<div class="cs-split-full-wrapper">
    <div class="cs-split-full-left">
        <div class="cs-split-full-content">
            <div class="cs-split-full-title">Visual Area</div>
            <p>ブランドの世界観を伝える大きな画像や動画、または印象的なタイポグラフィなどを配置するエリアです。</p>
        </div>
    </div>

    <div class="cs-split-full-right">
        <div class="cs-split-full-content">
            <div class="cs-split-full-title">Content Area</div>
            <p>キャッチコピーや登録フォーム、詳細な説明文などを配置します。左右で背景色や情報量にコントラストをつけることで、ユーザーの視線を強く惹きつけます。</p>
            <a href="#" class="cs-split-full-btn">今すぐ始める</a>
        </div>
    </div>
</div>
CSSコード表示
/* =========================================
   1. グリッドの設定（50:50の左右分割）
========================================= */
.cs-split-full-wrapper {
    display: grid;
    /* ▼ 左右を1:1の比率で分割 ▼ */
    grid-template-columns: 1fr 1fr;
    
    width: 100%;
    /* ※LPなど実際のファーストビューでは 100vh を指定します */
    min-height: 500px;
    margin-bottom: 2em;
    
    /* ブログ埋め込み用の装飾（角丸と影） */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* =========================================
   2. 左右エリアの共通・個別設定
========================================= */
/* 左右それぞれのエリア内で、中身を上下左右の中央に配置 */
.cs-split-full-left,
.cs-split-full-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* 左側（ビジュアルを想定したアクセントカラー） */
.cs-split-full-left {
    background-color: #2589d0;
    color: #ffffff;
    /* ※画像にする場合は background-image を指定します */
}

/* 右側（読みやすさ重視の白背景） */
.cs-split-full-right {
    background-color: #ffffff;
    color: #334155;
}

/* 中身のコンテンツ幅を制限して読みやすくする */
.cs-split-full-content {
    max-width: 400px;
    width: 100%;
}

/* =========================================
   3. テキスト・ボタンの装飾
========================================= */
.cs-split-full-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
}

/* 右側のタイトルだけ色を変える */
.cs-split-full-right .cs-split-full-title {
    color: #1a202c;
}

.cs-split-full-content p {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 32px;
}
.cs-split-full-left p {
    opacity: 0.9;
}

.cs-split-full-btn {
    display: inline-block;
    background-color: #1a202c;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}
.cs-split-full-btn:hover {
    background-color: #334155;
}

/* =========================================
   4. レスポンシブ対応（スマホ時は上下分割）
========================================= */
@media screen and (max-width: 768px) {
    .cs-split-full-wrapper {
        /* スマホでは縦並び（1カラム）に変更 */
        grid-template-columns: 1fr;
        /* 左側のビジュアルエリアの縦幅を少し狭く、右側を可変に */
        grid-template-rows: 250px 1fr;
    }
    
    .cs-split-full-title {
        font-size: 1.5rem;
    }
}

固定ヘッダー＋可変メイン

Webアプリのダッシュボードやスマホ向けのSPA（シングルページアプリケーション）でよく使われるレイアウトです。

Menu ≡
スクロール可能なメイン領域

ヘッダーの高さは自動（auto）で計算され、このメイン領域が残りの高さをすべて（1fr）埋めます。

さらにCSSで overflow-y: auto; を指定しているため、コンテンツが長くなった場合は、ページ全体ではなく**このエリアの中だけ**がスクロールします。下にスクロールして挙動を確認してみてください。

Scroll Down ↓

一番下までスクロールしました。ヘッダーは上に固定されたままです。

HTMLコード表示
<div class="cs-fxhdr-wrapper">
    <!-- ▼ 上部：固定ヘッダー（auto） ▼ -->
    <div class="cs-fxhdr-header">
        <div class="cs-fxhdr-logo">App Dashboard</div>
        <div class="cs-fxhdr-nav">Menu ≡</div>
    </div>

    <!-- ▼ 下部：可変メインエリア（1fr） ▼ -->
    <div class="cs-fxhdr-main">
        <div class="cs-fxhdr-title">スクロール可能なメイン領域</div>
        <p>
            ヘッダーの高さは自動（auto）で計算され、このメイン領域が残りの高さをすべて（1fr）埋めます。
        </p>
        <p>
            さらにCSSで <code>overflow-y: auto;</code> を指定しているため、コンテンツが長くなった場合は、ページ全体ではなく**このエリアの中だけ**がスクロールします。下にスクロールして挙動を確認してみてください。
        </p>

        <!-- ▼ スクロールを発生させるためのダミーボックス ▼ -->
        <div class="cs-fxhdr-dummy">
            <span class="cs-fxhdr-dummy-text">Scroll Down ↓</span>
        </div>

        <p>一番下までスクロールしました。ヘッダーは上に固定されたままです。</p>
    </div>
</div>
CSSコード表示
/* =========================================
   1. グリッドの設定（縦方向の分割）
========================================= */
.cs-fxhdr-wrapper {
    display: grid;
    /* ▼ 縦方向の分割設定 ▼ 
       1行目(ヘッダー) = auto(成り行き)
       2行目(メイン) = 1fr(残り全部) */
    grid-template-rows: auto 1fr;
    
    /* デモ用：全体の高さを固定し、角丸をつける */
    height: 400px;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden; /* 角丸を効かせるため */
    margin-bottom: 2em;
    background-color: #f8fafc;
}

/* =========================================
   2. ヘッダーエリア
========================================= */
.cs-fxhdr-header {
    background-color: #1a202c;
    color: #ffffff;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ヘッダーはスクロールせず固定される */
}

.cs-fxhdr-logo {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.cs-fxhdr-nav {
    font-size: 0.9rem;
    cursor: pointer;
}

/* =========================================
   3. メインエリア（スクロール設定）
========================================= */
.cs-fxhdr-main {
    padding: 24px;
    /* ▼ ここがポイント ▼
       中身があふれた場合、この要素内だけで縦スクロールバーを出す */
    overflow-y: auto;
}

/* スクロールバーのデザイン調整（Webkit系ブラウザ用） */
.cs-fxhdr-main::-webkit-scrollbar {
    width: 8px;
}
.cs-fxhdr-main::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.cs-fxhdr-main::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* =========================================
   4. コンテンツ装飾
========================================= */
.cs-fxhdr-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 16px;
}

.cs-fxhdr-main p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 16px;
}
.cs-fxhdr-main code {
    background-color: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d97706;
}

/* スクロールを実感するための高さを持つダミー要素 */
.cs-fxhdr-dummy {
    height: 300px;
    background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0;
}

.cs-fxhdr-dummy-text {
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.1em;
}

カード・ギャラリー配置（レスポンシブ特化）

メディアクエリ（@media）に頼らず、要素の幅に合わせて自動で折り返すような、Gridの強みを最も活かせるカテゴリーです。

カード・ギャラリー配置（レスポンシブ特化）
  • 均等オートグリッド
  • ピックアップ強調グリッド
  • Masonry（レンガ積み）風グリッド
  • 横スクロールグリッド

実際のデザインプレビューとHTML＆CSSコードを記載しています。

均等オートグリッド

王道のカード配置レイアウトです。

サムネイル画像
CSS Gridの魔法

メディアクエリ（@media）を一切書かずに、画面サイズに合わせて自動でカードが折り返されます。

サムネイル画像
auto-fitの力

親要素のスペースが余った場合、空いたスペースを各カードに均等に割り当てて（1fr）ぴったり埋めてくれます。

サムネイル画像
minmax関数

カードの幅が「指定した最小サイズ（例：280px）」を下回りそうになると、自動的に次の行へ押し出します。

サムネイル画像
メンテナンス性抜群

カードが何枚に増えても、CSSを一行も書き換える必要がありません。ブログの記事一覧や商品一覧に最適です。

HTMLコード表示
<div class="cs-auto-grid-wrapper">

    <div class="cs-auto-grid-item">
        <div class="cs-auto-grid-thumb">
            <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Thumbnail" alt="サムネイル画像">
        </div>
        <div class="cs-auto-grid-body">
            <div class="cs-auto-grid-title">CSS Gridの魔法</div>
            <p class="cs-auto-grid-text">メディアクエリ（@media）を一切書かずに、画面サイズに合わせて自動でカードが折り返されます。</p>
        </div>
    </div>

    <div class="cs-auto-grid-item">
        <div class="cs-auto-grid-thumb">
            <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Thumbnail" alt="サムネイル画像">
        </div>
        <div class="cs-auto-grid-body">
            <div class="cs-auto-grid-title">auto-fitの力</div>
            <p class="cs-auto-grid-text">親要素のスペースが余った場合、空いたスペースを各カードに均等に割り当てて（1fr）ぴったり埋めてくれます。</p>
        </div>
    </div>

    <div class="cs-auto-grid-item">
        <div class="cs-auto-grid-thumb">
            <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Thumbnail" alt="サムネイル画像">
        </div>
        <div class="cs-auto-grid-body">
            <div class="cs-auto-grid-title">minmax関数</div>
            <p class="cs-auto-grid-text">カードの幅が「指定した最小サイズ（例：280px）」を下回りそうになると、自動的に次の行へ押し出します。</p>
        </div>
    </div>

    <div class="cs-auto-grid-item">
        <div class="cs-auto-grid-thumb">
            <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Thumbnail" alt="サムネイル画像">
        </div>
        <div class="cs-auto-grid-body">
            <div class="cs-auto-grid-title">メンテナンス性抜群</div>
            <p class="cs-auto-grid-text">カードが何枚に増えても、CSSを一行も書き換える必要がありません。ブログの記事一覧や商品一覧に最適です。</p>
        </div>
    </div>

</div>
CSSコード表示
/* =========================================
   1. グリッドの骨組み
========================================= */
.cs-auto-grid-wrapper {
    display: grid;
    /* ▼ 画面幅に合わせて自動で列数を変える最強のコード ▼ */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    
    gap: 24px; /* カード同士の隙間 */
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. カード本体の設定
========================================= */
.cs-auto-grid-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    /* カード内の要素もフレックスボックスにして、高さを揃える */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-auto-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* =========================================
   3. サムネイル画像エリア
========================================= */
.cs-auto-grid-thumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* 画像の比率を固定 */
    overflow: hidden;
    background-color: #f8fafc;
}

.cs-auto-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    display: block;
}

/* =========================================
   4. テキストボディエリア
========================================= */
.cs-auto-grid-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* テキスト量が違ってもカードの下端を揃える */
}

.cs-auto-grid-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
}

.cs-auto-grid-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

ピックアップ強調グリッド

ブログの「最新記事」や「おすすめ記事」、ポートフォリオの「イチオシ実績」などで、特定の1枚だけを特別扱いして目立たせるレイアウトです。

ピックアップ画像
PICK UP
CSS Gridで作る最新のマガジン風レイアウト術

最初の1枚だけを2列分（span 2）に拡大し、さらに画面幅が広い時は自動的に「横長レイアウト」に変化させる高度なテクニックです。

サムネイル画像
CSS
auto-fitの基本と応用

メディアクエリを減らしてレスポンシブ対応を極める方法。
サムネイル画像
DESIGN
余白のルール

カードデザインにおける「読ませる」ためのパディング設計。
HTMLコード表示
<div class="cs-pickup-wrapper">

    <a href="#" class="cs-pickup-item cs-pickup-featured">
        <div class="cs-pickup-thumb">
            <img src="https://placehold.jp/24/2589d0/ffffff/800x500.png?text=Featured+Pickup" alt="ピックアップ画像">
        </div>
        <div class="cs-pickup-body">
            <div class="cs-pickup-label">PICK UP</div>
            <div class="cs-pickup-title">CSS Gridで作る最新のマガジン風レイアウト術</div>
            <p class="cs-pickup-text">
                最初の1枚だけを2列分（span 2）に拡大し、さらに画面幅が広い時は自動的に「横長レイアウト」に変化させる高度なテクニックです。
            </p>
        </div>
    </a>

    <a href="#" class="cs-pickup-item">
        <div class="cs-pickup-thumb">
            <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Normal+Post" alt="サムネイル画像">
        </div>
        <div class="cs-pickup-body">
            <div class="cs-pickup-label cs-pickup-label-normal">CSS</div>
            <div class="cs-pickup-title">auto-fitの基本と応用</div>
            <p class="cs-pickup-text">メディアクエリを減らしてレスポンシブ対応を極める方法。</p>
        </div>
    </a>

    <a href="#" class="cs-pickup-item">
        <div class="cs-pickup-thumb">
            <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Normal+Post" alt="サムネイル画像">
        </div>
        <div class="cs-pickup-body">
            <div class="cs-pickup-label cs-pickup-label-normal">DESIGN</div>
            <div class="cs-pickup-title">余白のルール</div>
            <p class="cs-pickup-text">カードデザインにおける「読ませる」ためのパディング設計。</p>
        </div>
    </a>

</div>
CSSコード表示
/* =========================================
   1. グリッドの骨組み（均等オートグリッドがベース）
========================================= */
.cs-pickup-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. カード共通設定
========================================= */
.cs-pickup-item {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-pickup-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.cs-pickup-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f8fafc;
    overflow: hidden;
}

.cs-pickup-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cs-pickup-item:hover .cs-pickup-thumb img {
    transform: scale(1.05); /* ホバーで画像を少しズーム */
}

/* =========================================
   3. テキストエリア設定
========================================= */
.cs-pickup-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cs-pickup-label {
    align-self: flex-start;
    background-color: #2589d0;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}
.cs-pickup-label-normal {
    background-color: #64748b; /* 通常カードのラベル色 */
}

.cs-pickup-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
    line-height: 1.4;
}

.cs-pickup-text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #4a5568;
    margin: 0;
}

/* =========================================
   4. ピックアップ（強調）カード専用のレスポンシブ
========================================= */
/* 画面幅が640px以上になり、2列以上確保できるようになったら発動 */
@media screen and (min-width: 640px) {
    .cs-pickup-featured {
        /* ▼ 2列分を占有する魔法のコード ▼ */
        grid-column: span 2;
        /* 横長レイアウトに変更 */
        flex-direction: row; 
    }
    
    .cs-pickup-featured .cs-pickup-thumb {
        width: 55%; /* 画像を少し大きめに取る */
        aspect-ratio: auto; /* 縦横比の固定を解除 */
    }
    
    .cs-pickup-featured .cs-pickup-body {
        width: 45%;
        padding: 32px;
        justify-content: center; /* テキストを上下中央に配置 */
    }
    
    .cs-pickup-featured .cs-pickup-title {
        font-size: 1.5rem; /* タイトルも大きく */
    }
}

Masonry（レンガ積み）風グリッド

縦横の比率が異なる大小の画像やカードを隙間なくパズルのように敷き詰めるレイアウトです。

ポートフォリオの作品ギャラリーや写真メインのメディアサイトで好まれるデザインです。

大きな画像
Main Project
通常画像
縦長画像
Portrait
横長画像
Landscape
通常画像
通常画像
縦長画像
HTMLコード表示
<div class="cs-masonry-wrapper">

    <div class="cs-masonry-item cs-masonry-large">
        <img src="https://placehold.jp/24/2589d0/ffffff/600x600.png?text=Large" alt="大きな画像">
        <div class="cs-masonry-caption">Main Project</div>
    </div>

    <div class="cs-masonry-item">
        <img src="https://placehold.jp/24/f1f5f9/94a3b8/300x300.png?text=Normal" alt="通常画像">
    </div>

    <div class="cs-masonry-item cs-masonry-tall">
        <img src="https://placehold.jp/24/48bb78/ffffff/300x600.png?text=Tall" alt="縦長画像">
        <div class="cs-masonry-caption">Portrait</div>
    </div>

    <div class="cs-masonry-item cs-masonry-wide">
        <img src="https://placehold.jp/24/ed8936/ffffff/600x300.png?text=Wide" alt="横長画像">
        <div class="cs-masonry-caption">Landscape</div>
    </div>

    <div class="cs-masonry-item">
        <img src="https://placehold.jp/24/f1f5f9/94a3b8/300x300.png?text=Normal" alt="通常画像">
    </div>

    <div class="cs-masonry-item">
        <img src="https://placehold.jp/24/f1f5f9/94a3b8/300x300.png?text=Normal" alt="通常画像">
    </div>

    <div class="cs-masonry-item cs-masonry-tall">
        <img src="https://placehold.jp/24/9f7aea/ffffff/300x600.png?text=Tall" alt="縦長画像">
    </div>

</div>
CSSコード表示
/* =========================================
   1. グリッドの骨組み
========================================= */
.cs-masonry-wrapper {
    display: grid;
    /* 最小幅180pxで自動折り返し */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* グリッドの基本となる高さを180pxに設定 */
    grid-auto-rows: 180px;
    gap: 16px;
    
    /* ▼ これが空白を自動で埋める魔法のコード ▼ */
    grid-auto-flow: dense;
    
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. アイテムの共通設定
========================================= */
.cs-masonry-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f8fafc;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-masonry-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    z-index: 2;
}

.cs-masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.cs-masonry-item:hover img {
    transform: scale(1.08);
}

/* =========================================
   3. サイズのバリエーション（span指定）
========================================= */
/* 大きな正方形（縦2列・横2列） */
.cs-masonry-large {
    grid-column: span 2;
    grid-row: span 2;
}

/* 横長（横2列） */
.cs-masonry-wide {
    grid-column: span 2;
}

/* 縦長（縦2列） */
.cs-masonry-tall {
    grid-row: span 2;
}

/* =========================================
   4. キャプション（画像上のテキスト）
========================================= */
.cs-masonry-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 16px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    box-sizing: border-box;
}

/* =========================================
   5. レスポンシブ対応（スマホ時）
========================================= */
@media screen and (max-width: 480px) {
    /* 画面が狭い場合は、横幅のspanを解除して1列にする */
    .cs-masonry-large,
    .cs-masonry-wide {
        grid-column: span 1;
    }
}

横スクロールグリッド

スマホ表示において縦に長く伸びてしまうのを防ぎ、ネイティブアプリのように横へスワイプしてコンテンツを閲覧できる現在主流のUIです。

画像1
横スクロールUIの基本

画面幅を節約し、ユーザーの直感的なスワイプ操作を促します。
画像2
スクロールスナップ

CSSのみで、カードが画面端にピタッと吸着する動きを実現しています。
画像3
スクロールバー非表示

デザインを損なわないよう、スクロールバーを隠す処理を施しています。
画像4
Gridでの横並び

grid-auto-flow: column を使うことで、要素を自動的に横へ追加します。
画像5
汎用性の高さ

関連記事やおすすめ商品のリストなど、あらゆる場面で活躍します。
HTMLコード表示
<div class="cs-hscroll-wrapper">
    <div class="cs-hscroll-container">

        <a href="#" class="cs-hscroll-item">
            <div class="cs-hscroll-thumb">
                <img src="https://placehold.jp/24/2589d0/ffffff/400x300.png?text=Swipe+1" alt="画像1">
            </div>
            <div class="cs-hscroll-body">
                <div class="cs-hscroll-title">横スクロールUIの基本</div>
                <p class="cs-hscroll-text">画面幅を節約し、ユーザーの直感的なスワイプ操作を促します。</p>
            </div>
        </a>

        <a href="#" class="cs-hscroll-item">
            <div class="cs-hscroll-thumb">
                <img src="https://placehold.jp/24/48bb78/ffffff/400x300.png?text=Swipe+2" alt="画像2">
            </div>
            <div class="cs-hscroll-body">
                <div class="cs-hscroll-title">スクロールスナップ</div>
                <p class="cs-hscroll-text">CSSのみで、カードが画面端にピタッと吸着する動きを実現しています。</p>
            </div>
        </a>

        <a href="#" class="cs-hscroll-item">
            <div class="cs-hscroll-thumb">
                <img src="https://placehold.jp/24/ed8936/ffffff/400x300.png?text=Swipe+3" alt="画像3">
            </div>
            <div class="cs-hscroll-body">
                <div class="cs-hscroll-title">スクロールバー非表示</div>
                <p class="cs-hscroll-text">デザインを損なわないよう、スクロールバーを隠す処理を施しています。</p>
            </div>
        </a>

        <a href="#" class="cs-hscroll-item">
            <div class="cs-hscroll-thumb">
                <img src="https://placehold.jp/24/9f7aea/ffffff/400x300.png?text=Swipe+4" alt="画像4">
            </div>
            <div class="cs-hscroll-body">
                <div class="cs-hscroll-title">Gridでの横並び</div>
                <p class="cs-hscroll-text">grid-auto-flow: column を使うことで、要素を自動的に横へ追加します。</p>
            </div>
        </a>

        <a href="#" class="cs-hscroll-item">
            <div class="cs-hscroll-thumb">
                <img src="https://placehold.jp/24/f1f5f9/94a3b8/400x300.png?text=Swipe+5" alt="画像5">
            </div>
            <div class="cs-hscroll-body">
                <div class="cs-hscroll-title">汎用性の高さ</div>
                <p class="cs-hscroll-text">関連記事やおすすめ商品のリストなど、あらゆる場面で活躍します。</p>
            </div>
        </a>

    </div>
</div>
CSSコード表示
/* =========================================
   1. ラッパー設定
========================================= */
.cs-hscroll-wrapper {
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. スクロールコンテナの核（Grid + Scroll）
========================================= */
.cs-hscroll-container {
    display: grid;
    /* 要素を横方向に並べる */
    grid-auto-flow: column;
    /* 各カードの幅を固定（スマホで見切れるサイズにしてスワイプを促す） */
    grid-auto-columns: 260px;
    gap: 16px;
    
    /* 横スクロールを許可 */
    overflow-x: auto;
    /* スワイプ時の「戻る」誤動作を防止 */
    overscroll-behavior-x: contain;
    
    /* ▼ スクロールスナップの有効化 ▼ */
    scroll-snap-type: x mandatory;
    
    /* 少しだけ余白を持たせて影が切れないようにする */
    padding: 8px 4px 24px; 
    
    /* スクロールバーを非表示にする（モダンブラウザ対応） */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cs-hscroll-container::-webkit-scrollbar {
    display: none;
}

/* =========================================
   3. カード本体設定
========================================= */
.cs-hscroll-item {
    /* ▼ カードの左端をスナップの基準点にする ▼ */
    scroll-snap-align: start;
    
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-hscroll-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}

/* =========================================
   4. 画像とテキスト
========================================= */
.cs-hscroll-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.cs-hscroll-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-hscroll-body {
    padding: 16px;
}

.cs-hscroll-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cs-hscroll-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

UIコンポーネント（パーツ単位）

フォームやリストなど、特定の要素内を整列させるためのグリッドパターンです。

UIコンポーネント（パーツ単位）
  • 入力フォーム整列
  • ダッシュボード・統計パネル
  • 定義リスト（dl/dt/dd）の横並び
  • カレンダーUI

実際のデザインプレビューとHTML＆CSSコードを記載しています。

入力フォーム整列

お問い合わせフォームや会員登録画面で必須となる、「左側に項目名（ラベル）、右側に入力欄」というレイアウトです。

必須
必須
任意
必須
HTMLコード表示
<div class="cs-form-wrapper">
    <div class="cs-form-row">
        <div class="cs-form-label">
            <label for="form-name">お名前</label>
            <span class="cs-form-badge">必須</span>
        </div>
        <div class="cs-form-input-area">
            <input type="text" id="form-name" class="cs-form-input" placeholder="例：山田 太郎">
        </div>
    </div>

    <div class="cs-form-row">
        <div class="cs-form-label">
            <label for="form-email">メールアドレス</label>
            <span class="cs-form-badge">必須</span>
        </div>
        <div class="cs-form-input-area">
            <input type="email" id="form-email" class="cs-form-input" placeholder="例：info@example.com">
        </div>
    </div>

    <div class="cs-form-row">
        <div class="cs-form-label">
            <label for="form-type">お問い合わせ種別</label>
            <span class="cs-form-badge cs-form-badge-opt">任意</span>
        </div>
        <div class="cs-form-input-area">
            <select id="form-type" class="cs-form-input">
                <option value="">選択してください</option>
                <option value="1">サービスについて</option>
                <option value="2">採用について</option>
                <option value="3">その他</option>
            </select>
        </div>
    </div>

    <div class="cs-form-row">
        <div class="cs-form-label cs-form-label-top">
            <label for="form-msg">お問い合わせ内容</label>
            <span class="cs-form-badge">必須</span>
        </div>
        <div class="cs-form-input-area">
            <textarea id="form-msg" class="cs-form-input cs-form-textarea" rows="5" placeholder="ご質問などをご記入ください"></textarea>
        </div>
    </div>

    <div class="cs-form-submit-row">
        <button type="button" class="cs-form-submit-btn">送信する</button>
    </div>
</div>
CSSコード表示
/* =========================================
   1. フォーム全体のコンテナ
========================================= */
.cs-form-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px 40px;
    box-sizing: border-box;
}

/* =========================================
   2. グリッドによる行の整列
========================================= */
.cs-form-row {
    display: grid;
    /* ▼ ラベルを240px固定、入力欄を残りすべて(1fr)に分割 ▼ */
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: center; /* 縦方向の中央揃え */
    
    padding: 24px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.cs-form-row:last-of-type {
    border-bottom: none; /* 最後の行は線を消す */
}

/* =========================================
   3. ラベル・バッジのデザイン
========================================= */
.cs-form-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: #1a202c;
    font-size: 1rem;
}
/* テキストエリアなど、ラベルを上揃えにしたい場合 */
.cs-form-label-top {
    align-self: flex-start;
    margin-top: 12px;
}

/* 必須・任意バッジ */
.cs-form-badge {
    background-color: #ef4444; /* 必須は赤系 */
    color: #ffffff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.cs-form-badge-opt {
    background-color: #94a3b8; /* 任意はグレー系 */
}

/* =========================================
   4. 入力フォーム本体のデザイン
========================================= */
.cs-form-input {
    width: 100%;
    padding: 12px 16px;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    color: #334155;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cs-form-input:focus {
    outline: none;
    border-color: #2589d0;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 137, 208, 0.1);
}

.cs-form-textarea {
    resize: vertical; /* 縦方向のみリサイズ許可 */
}

/* =========================================
   5. 送信ボタンエリア
========================================= */
.cs-form-submit-row {
    margin-top: 32px;
    text-align: center;
}

.cs-form-submit-btn {
    background-color: #2589d0;
    color: #ffffff;
    border: none;
    padding: 16px 48px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.cs-form-submit-btn:hover {
    background-color: #1a6da7;
}

/* =========================================
   6. レスポンシブ対応（スマホ時は縦並び）
========================================= */
@media screen and (max-width: 640px) {
    .cs-form-wrapper {
        padding: 24px;
    }
    .cs-form-row {
        /* スマホでは縦1列に変更 */
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 0;
    }
    .cs-form-label-top {
        margin-top: 0;
    }
}

ダッシュボード・統計パネル

Webアプリの管理画面やアナリティクスのレポート画面でよく見られる「上部に小さなKPIカードを並べ、下部に大きなグラフやリストを配置する」という複雑なレイアウトです。

総ページビュー
124,500
↑ 12.5% 前月比
アクティブユーザー
8,430
↑ 5.2% 前月比
コンバージョン率
3.2%
↓ 0.8% 前月比
トラフィック推移（直近30日）
Chart Area
最近のイベント
  • 10:30新規ユーザー登録がありました。
  • 09:15サーバーのバックアップが完了しました。
  • 昨日新しい記事が公開されました。
  • 昨日システムのアップデートを実行しました。
HTMLコード表示
<div class="cs-dash-wrapper">

    <div class="cs-dash-item cs-dash-kpi">
        <div class="cs-dash-kpi-head">総ページビュー</div>
        <div class="cs-dash-kpi-val">124,500</div>
        <div class="cs-dash-kpi-diff cs-dash-up">↑ 12.5% 前月比</div>
    </div>

    <div class="cs-dash-item cs-dash-kpi">
        <div class="cs-dash-kpi-head">アクティブユーザー</div>
        <div class="cs-dash-kpi-val">8,430</div>
        <div class="cs-dash-kpi-diff cs-dash-up">↑ 5.2% 前月比</div>
    </div>

    <div class="cs-dash-item cs-dash-kpi">
        <div class="cs-dash-kpi-head">コンバージョン率</div>
        <div class="cs-dash-kpi-val">3.2%</div>
        <div class="cs-dash-kpi-diff cs-dash-down">↓ 0.8% 前月比</div>
    </div>

    <div class="cs-dash-item cs-dash-chart">
        <div class="cs-dash-title">トラフィック推移（直近30日）</div>
        <div class="cs-dash-chart-dummy">
            <span class="cs-dash-dummy-text">Chart Area</span>
        </div>
    </div>

    <div class="cs-dash-item cs-dash-list">
        <div class="cs-dash-title">最近のイベント</div>
        <ul class="cs-dash-ul">
            <li><span>10:30</span>新規ユーザー登録がありました。</li>
            <li><span>09:15</span>サーバーのバックアップが完了しました。</li>
            <li><span>昨日</span>新しい記事が公開されました。</li>
            <li><span>昨日</span>システムのアップデートを実行しました。</li>
        </ul>
    </div>

</div>
CSSコード表示
/* =========================================
   1. ダッシュボード全体のグリッド設定
========================================= */
.cs-dash-wrapper {
    display: grid;
    /* ▼ 全体を3列のグリッドに分割 ▼ */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. 各パネルの共通デザイン
========================================= */
.cs-dash-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.cs-dash-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 16px;
}

/* =========================================
   3. 各エリアのサイズ割り当て（span）
========================================= */
/* KPIカードはデフォルトで1列分なので指定不要 */

/* メインチャートは2列分を占有する */
.cs-dash-chart {
    grid-column: span 2;
}

/* リストは1列分を占有する（指定不要だが明示的にも可） */
.cs-dash-list {
    grid-column: span 1;
}

/* =========================================
   4. 個別パーツのデザイン
========================================= */
/* ━━ KPIカード ━━ */
.cs-dash-kpi-head {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}
.cs-dash-kpi-val {
    font-size: 2rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1;
}
.cs-dash-kpi-diff {
    font-size: 0.8rem;
    font-weight: 700;
}
.cs-dash-up { color: #10b981; }   /* 上昇は緑 */
.cs-dash-down { color: #ef4444; } /* 下降は赤 */

/* ━━ チャート（ダミー） ━━ */
.cs-dash-chart-dummy {
    width: 100%;
    height: 200px;
    background: linear-gradient(to top right, #f1f5f9, #e2e8f0);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cs-dash-dummy-text {
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ━━ アクティビティリスト ━━ */
.cs-dash-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-dash-ul li {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #4a5568;
    padding: 12px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.cs-dash-ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.cs-dash-ul li span {
    display: inline-block;
    background-color: #f1f5f9;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-right: 8px;
}

/* =========================================
   5. レスポンシブ対応（スマホ時は全て縦積み）
========================================= */
@media screen and (max-width: 768px) {
    .cs-dash-wrapper {
        /* スマホでは1列に変更 */
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* span指定を解除して、全て1列幅にする */
    .cs-dash-chart,
    .cs-dash-list {
        grid-column: span 1;
    }
}

定義リスト（dl/dt/dd）の横並び

会社概要やサービスの仕様表などで必ずと言っていいほど使われるレイアウトです。

サイト名
Web Design & Programming UI
主な発信内容
モダンなHTML/CSS設計、TypeScriptを用いたフロントエンド開発、およびSEOに最適化された技術記事。
運営開始
2026年3月
お問い合わせ
コンタクトフォームはこちら
※ご返信まで3営業日ほどいただく場合がございます。
HTMLコード表示
<div class="cs-dl-wrapper">
    <dl class="cs-dl-list">
        
        <div class="cs-dl-row">
            <dt class="cs-dl-term">サイト名</dt>
            <dd class="cs-dl-desc">Web Design & Programming UI</dd>
        </div>

        <div class="cs-dl-row">
            <dt class="cs-dl-term">主な発信内容</dt>
            <dd class="cs-dl-desc">
                モダンなHTML/CSS設計、TypeScriptを用いたフロントエンド開発、およびSEOに最適化された技術記事。
            </dd>
        </div>

        <div class="cs-dl-row">
            <dt class="cs-dl-term">運営開始</dt>
            <dd class="cs-dl-desc">2026年3月</dd>
        </div>

        <div class="cs-dl-row">
            <dt class="cs-dl-term">お問い合わせ</dt>
            <dd class="cs-dl-desc">
                <a href="#" class="cs-dl-link">コンタクトフォームはこちら</a><br>
                ※ご返信まで3営業日ほどいただく場合がございます。
            </dd>
        </div>

    </dl>
</div>
CSSコード表示
/* =========================================
   1. リスト全体を囲むラッパー
========================================= */
.cs-dl-wrapper {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 2em;
}

.cs-dl-list {
    margin: 0;
    padding: 0;
}

/* =========================================
   2. グリッドによる行の整列（横並びの要）
========================================= */
.cs-dl-row {
    display: grid;
    /* ▼ 項目名(dt)を160px固定、説明文(dd)を残りすべて(1fr)に分割 ▼ */
    grid-template-columns: 160px 1fr;
    gap: 24px;
    
    padding: 16px 0;
    border-bottom: 1px dashed #e2e8f0; /* 行の区切り線 */
}

/* 最初と最後の行の余白・線を調整 */
.cs-dl-row:first-child {
    padding-top: 0;
}
.cs-dl-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* =========================================
   3. 項目名(dt)と説明文(dd)のデザイン
========================================= */
.cs-dl-term {
    font-weight: 700;
    color: #1a202c;
    margin: 0; /* dtのデフォルトマージンをリセット */
}

.cs-dl-desc {
    color: #4a5568;
    margin: 0; /* ddのデフォルトマージンをリセット */
    line-height: 1.7;
    font-size: 0.95rem;
}

.cs-dl-link {
    color: #2589d0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cs-dl-link:hover {
    color: #1a6da7;
}

/* =========================================
   4. レスポンシブ対応（スマホ時は縦並び）
========================================= */
@media screen and (max-width: 640px) {
    .cs-dl-row {
        /* スマホでは縦1列に変更し、要素間の隙間を狭くする */
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0;
    }
    
    .cs-dl-term {
        color: #2589d0; /* スマホで見やすいように項目名に色をつける */
        font-size: 0.9rem;
    }
}

カレンダーUI

カレンダーは「1週間＝7日」という明確な列数が決まっているため、CSS Gridの力を最も美しく発揮できるコンポーネントの一つです。

2026年 7月
日
月
火
水
木
金
土
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
HTMLコード表示
<div class="cs-cal-wrapper">
    <div class="cs-cal-header">
        <button class="cs-cal-nav"><</button>
        <div class="cs-cal-month">2026年 7月</div>
        <button class="cs-cal-nav">></button>
    </div>

    <div class="cs-cal-weekdays">
        <div class="cs-cal-dow cs-cal-sun">日</div>
        <div class="cs-cal-dow">月</div>
        <div class="cs-cal-dow">火</div>
        <div class="cs-cal-dow">水</div>
        <div class="cs-cal-dow">木</div>
        <div class="cs-cal-dow">金</div>
        <div class="cs-cal-dow cs-cal-sat">土</div>
    </div>

    <div class="cs-cal-grid">
        <div class="cs-cal-day" style="grid-column-start: 4;">1</div>
        <div class="cs-cal-day">2</div>
        <div class="cs-cal-day">3</div>
        <div class="cs-cal-day cs-cal-sat">4</div>
        <div class="cs-cal-day cs-cal-sun">5</div>
        <div class="cs-cal-day">6</div>
        <div class="cs-cal-day">7</div>
        <div class="cs-cal-day">8</div>
        <div class="cs-cal-day">9</div>
        <div class="cs-cal-day">10</div>
        <div class="cs-cal-day cs-cal-sat">11</div>
        <div class="cs-cal-day cs-cal-sun">12</div>
        <div class="cs-cal-day">13</div>
        <div class="cs-cal-day">14</div>
        
        <div class="cs-cal-day cs-cal-today">15</div> 
        
        <div class="cs-cal-day">16</div>
        <div class="cs-cal-day">17</div>
        <div class="cs-cal-day cs-cal-sat">18</div>
        <div class="cs-cal-day cs-cal-sun">19</div>
        <div class="cs-cal-day">20</div>
        <div class="cs-cal-day">21</div>
        <div class="cs-cal-day">22</div>
        <div class="cs-cal-day">23</div>
        <div class="cs-cal-day">24</div>
        <div class="cs-cal-day cs-cal-sat">25</div>
        <div class="cs-cal-day cs-cal-sun">26</div>
        <div class="cs-cal-day">27</div>
        <div class="cs-cal-day">28</div>
        <div class="cs-cal-day">29</div>
        <div class="cs-cal-day">30</div>
        <div class="cs-cal-day">31</div>
    </div>
</div>
CSSコード表示
/* =========================================
   1. カレンダー全体のラッパー
========================================= */
.cs-cal-wrapper {
    max-width: 400px;
    margin: 0 auto 2em;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    font-family: sans-serif;
}

/* =========================================
   2. ヘッダー（月と矢印）
========================================= */
.cs-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cs-cal-month {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
}

.cs-cal-nav {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #64748b;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.cs-cal-nav:hover {
    background-color: #f1f5f9;
    color: #1a202c;
}

/* =========================================
   3. グリッドの共通設定（7列分割）
========================================= */
/* 曜日と日付で共通の7列グリッドを使用 */
.cs-cal-weekdays,
.cs-cal-grid {
    display: grid;
    /* ▼ 7列を均等幅で並べる ▼ */
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; 
}

/* =========================================
   4. 曜日エリア
========================================= */
.cs-cal-weekdays {
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}

.cs-cal-dow {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
}

/* =========================================
   5. 日付エリア
========================================= */
.cs-cal-day {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1; /* マス目を正方形にする */
    font-size: 0.95rem;
    color: #334155;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cs-cal-day:hover {
    background-color: #f1f5f9;
}

/* ━━ 今日のハイライト ━━ */
.cs-cal-today {
    background-color: #2589d0;
    color: #ffffff;
    font-weight: 700;
}
.cs-cal-today:hover {
    background-color: #1a6da7;
}

/* ━━ 土日の文字色変更 ━━ */
.cs-cal-sun {
    color: #ef4444; /* 日曜日は赤 */
}
.cs-cal-sat {
    color: #3b82f6; /* 土曜日は青 */
}

/* （注）今日のハイライトが優先されるように、色の指定順序に注意 */
.cs-cal-today.cs-cal-sun,
.cs-cal-today.cs-cal-sat {
    color: #ffffff;
}

トレンド・特殊・マガジン風

Flexboxでは実現が難しく、Gridならではの「重ね合わせ」や「非対称性」を活かしたモダンなレイアウトです。

トレンド・特殊・マガジン風
  • Bento UI（弁当箱風）
  • 要素の重ね合わせ（オーバーラップ）
  • ジグザグ（千鳥格子）配置
  • 斜め・変形グリッド

実際のデザインプレビューとHTML＆CSSコードを記載しています。

Bento UI（弁当箱風）

Apple製品のプロモーションページなどで一気に普及し、現在のWebデザインで最も注目されているレイアウトの一つです。

大きさの異なる角丸のカードを、お弁当箱の仕切りのように隙間なく美しく敷き詰めるのが特徴です。

Webデザインのポートフォリオサイトなどで、自身のスキルセットや提供サービスを一枚絵のように魅せるのに適しています。

🍱
Bento UI Design

大きさの異なるコンポーネントを、お弁当箱のように美しく敷き詰める最新のトレンドレイアウト。情報の優先度を視覚的に整理し、直感的なUXを提供します。

🎨
Design
⚡
Speed
CSS Grid Mastery

spanプロパティを駆使して柔軟に配置。

📐
📱
Responsive

スマホ表示でも崩れない完璧な比率設計。

HTML

クリーンな構造

モダンな表現力を手に入れる
→
HTMLコード表示
<div class="cs-bento-wrapper">

    <div class="cs-bento-item cs-bento-large cs-bento-bg-main">
        <div class="cs-bento-content">
            <div class="cs-bento-icon">🍱</div>
            <div class="cs-bento-title">Bento UI Design</div>
            <p class="cs-bento-text">
                大きさの異なるコンポーネントを、お弁当箱のように美しく敷き詰める最新のトレンドレイアウト。情報の優先度を視覚的に整理し、直感的なUXを提供します。
            </p>
        </div>
    </div>

    <div class="cs-bento-item cs-bento-bg-sub1">
        <div class="cs-bento-content">
            <div class="cs-bento-icon">🎨</div>
            <div class="cs-bento-title">Design</div>
        </div>
    </div>

    <div class="cs-bento-item cs-bento-bg-sub2">
        <div class="cs-bento-content">
            <div class="cs-bento-icon">⚡</div>
            <div class="cs-bento-title">Speed</div>
        </div>
    </div>

    <div class="cs-bento-item cs-bento-wide cs-bento-bg-dark">
        <div class="cs-bento-content cs-bento-flex-row">
            <div>
                <div class="cs-bento-title">CSS Grid Mastery</div>
                <p class="cs-bento-text">spanプロパティを駆使して柔軟に配置。</p>
            </div>
            <div class="cs-bento-icon-large">📐</div>
        </div>
    </div>

    <div class="cs-bento-item cs-bento-tall cs-bento-bg-sub3">
        <div class="cs-bento-content">
            <div class="cs-bento-icon">📱</div>
            <div class="cs-bento-title">Responsive</div>
            <p class="cs-bento-text">スマホ表示でも崩れない完璧な比率設計。</p>
        </div>
    </div>

    <div class="cs-bento-item cs-bento-bg-white">
        <div class="cs-bento-content">
            <div class="cs-bento-title">HTML</div>
            <p class="cs-bento-text">クリーンな構造</p>
        </div>
    </div>

    <div class="cs-bento-item cs-bento-wide cs-bento-bg-light">
        <div class="cs-bento-content cs-bento-flex-row">
            <div class="cs-bento-title" style="margin: 0;">モダンな表現力を手に入れる</div>
            <a href="#" class="cs-bento-btn">→</a>
        </div>
    </div>

</div>
CSSコード表示
/* =========================================
   1. Bentoグリッドの骨組み
========================================= */
.cs-bento-wrapper {
    display: grid;
    /* PC表示では4列グリッドをベースにする */
    grid-template-columns: repeat(4, 1fr);
    /* グリッドの基本となる高さを指定 */
    grid-auto-rows: 150px;
    gap: 16px;
    
    /* 空白を自動で埋めるパズル機能 */
    grid-auto-flow: dense;
    
    width: 100%;
    max-width: 900px; /* 全体の最大幅 */
    margin: 0 auto 2em;
}

/* =========================================
   2. アイテムの共通設定（弁当箱の仕切り）
========================================= */
.cs-bento-item {
    border-radius: 24px; /* Bento UI最大の特徴である「大きめの角丸」 */
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ホバー時の「少し押し込む」ようなモダンな動き */
.cs-bento-item:hover {
    transform: scale(0.97);
}

/* =========================================
   3. サイズのバリエーション（span指定）
========================================= */
/* 大きな正方形（縦2・横2） */
.cs-bento-large {
    grid-column: span 2;
    grid-row: span 2;
}

/* 横長（横2） */
.cs-bento-wide {
    grid-column: span 2;
}

/* 縦長（縦2） */
.cs-bento-tall {
    grid-row: span 2;
}

/* =========================================
   4. コンテンツ・テキストの装飾
========================================= */
.cs-bento-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
}

/* 一部の横長カード用（横並び配置） */
.cs-bento-flex-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cs-bento-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}
.cs-bento-icon-large {
    font-size: 3.5rem;
    opacity: 0.8;
}

.cs-bento-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
}
.cs-bento-large .cs-bento-title {
    font-size: 1.6rem;
    margin-bottom: 16px;
}

.cs-bento-text {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.85;
    margin: 0;
}

.cs-bento-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #1a202c;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none !important;
    font-weight: bold;
}

/* =========================================
   5. カラーバリエーション（仕切りごとの色分け）
========================================= */
.cs-bento-bg-main  { background-color: #e0f2fe; color: #0c4a6e; }
.cs-bento-bg-sub1  { background-color: #fef08a; color: #713f12; }
.cs-bento-bg-sub2  { background-color: #fbcfe8; color: #831843; }
.cs-bento-bg-sub3  { background-color: #dcfce7; color: #14532d; }
.cs-bento-bg-dark  { background-color: #1e293b; color: #f8fafc; }
.cs-bento-bg-light { background-color: #f1f5f9; color: #334155; }
.cs-bento-bg-white { background-color: #ffffff; color: #334155; border: 1px solid #e2e8f0; }

/* =========================================
   6. レスポンシブ対応
========================================= */
@media screen and (max-width: 768px) {
    .cs-bento-wrapper {
        /* タブレット・スマホ横は2列に変更 */
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }
    
    .cs-bento-large,
    .cs-bento-wide {
        grid-column: span 2;
    }
    
    .cs-bento-tall {
        /* 縦長は1列幅にするが、高さは維持 */
        grid-column: span 1;
        grid-row: span 2;
    }
}

@media screen and (max-width: 480px) {
    .cs-bento-wrapper {
        /* スマホ縦は1列に変更 */
        grid-template-columns: 1fr;
        grid-auto-rows: auto; /* 高さを内容に合わせる */
    }
    
    /* span指定をすべて解除し、縦積みにする */
    .cs-bento-item {
        grid-column: span 1 !important;
        grid-row: auto !important;
        min-height: 120px;
    }
    
    .cs-bento-flex-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

要素の重ね合わせ（オーバーラップ）

CSS Gridを使うと「同じ行・列を指定して配置するだけ」で、レスポンシブでも崩れにくい美しい重ね合わせが実現します。

オーバーラップ用画像
CSS TIPS
Position不要の
オーバーラップ配置

CSS Gridの12カラムレイアウトを活用し、画像とテキストの配置エリア（grid-column）を意図的に被らせるモダンなテクニックです。

詳細を読む →
HTMLコード表示
<div class="cs-overlap-wrapper">
    <div class="cs-overlap-image">
        <img src="https://placehold.jp/24/e2e8f0/94a3b8/800x600.png?text=Grid+Overlap" alt="オーバーラップ用画像">
    </div>

    <div class="cs-overlap-content">
        <div class="cs-overlap-label">CSS TIPS</div>
        <div class="cs-overlap-title">Position不要の<br>オーバーラップ配置</div>
        <p class="cs-overlap-text">
            CSS Gridの12カラムレイアウトを活用し、画像とテキストの配置エリア（grid-column）を意図的に被らせるモダンなテクニックです。
        </p>
        <a href="#" class="cs-overlap-link">詳細を読む →</a>
    </div>
</div>
CSSコード表示
/* =========================================
   1. グリッドの設定（12カラムで細かく分割）
========================================= */
.cs-overlap-wrapper {
    display: grid;
    /* 画面を12等分する（自由度が高い配置の基本） */
    grid-template-columns: repeat(12, 1fr);
    align-items: center; /* 縦方向の中央で揃える */
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. 画像エリアの配置
========================================= */
.cs-overlap-image {
    /* ▼ 左端(1)から9番目のラインまでを占有 ▼ */
    grid-column: 1 / 9;
    /* 行は1行目に固定 */
    grid-row: 1;
    
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.cs-overlap-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* =========================================
   3. テキストボックスの配置（ここが重なる）
========================================= */
.cs-overlap-content {
    /* ▼ 7番目のラインから右端(13)までを占有（7と8が画像と被る） ▼ */
    grid-column: 7 / 13;
    /* 画像と同じ1行目を指定することで重なりが発生 */
    grid-row: 1;
    
    z-index: 2; /* 画像より手前に表示 */
    
    /* 半透明にして重なりを美しく見せる */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    
    padding: 48px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.8);
}

/* =========================================
   4. テキストの装飾
========================================= */
.cs-overlap-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #2589d0;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.cs-overlap-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #1a202c;
    line-height: 1.3;
    margin-bottom: 20px;
}

.cs-overlap-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 24px;
}

.cs-overlap-link {
    display: inline-block;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none !important;
    border-bottom: 2px solid #2589d0;
    padding-bottom: 4px;
    transition: color 0.3s;
}
.cs-overlap-link:hover {
    color: #2589d0;
}

/* =========================================
   5. レスポンシブ対応（スマホ表示時は縦並び＋ネガティブマージン）
========================================= */
@media screen and (max-width: 768px) {
    .cs-overlap-wrapper {
        grid-template-columns: 1fr; /* 1カラムに変更 */
    }
    
    .cs-overlap-image, 
    .cs-overlap-content {
        /* スマホではGridの重なりを解除し、全幅にする */
        grid-column: 1 / -1;
        grid-row: auto;
    }
    
    .cs-overlap-content {
        /* マージンを使って手動で上に引き上げ、重なりを再現 */
        margin-top: -60px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 32px 24px;
    }
    
    .cs-overlap-title {
        font-size: 1.4rem;
    }
}

ジグザグ（千鳥格子）配置

サービス紹介や機能の解説など、LP（ランディングページ）で情報を順番に読ませたい時によく使われるレイアウトです。

機能紹介1
STEP 01
直感的な操作性

無駄を省いたクリーンなUI設計により、初めての方でも迷うことなく操作が可能です。マニュアル不要で、導入したその日からスムーズにご活用いただけます。

機能紹介2
STEP 02
高速なパフォーマンス

最新のフロントエンド技術（HTML/CSS設計）を駆使し、ページの読み込み速度を劇的に改善。ユーザーの離脱を防ぎ、コンバージョン率の向上に貢献します。

機能紹介3
STEP 03
万全のセキュリティ

通信の暗号化や定期的なバックアップなど、エンタープライズ基準の堅牢なセキュリティ体制を構築しています。大切なデータを安全に守ります。

HTMLコード表示
<div class="cs-zigzag-wrapper">

    <div class="cs-zigzag-item">
        <div class="cs-zigzag-thumb">
            <img src="https://placehold.jp/24/e2e8f0/94a3b8/600x400.png?text=Image+01" alt="機能紹介1">
        </div>
        <div class="cs-zigzag-body">
            <div class="cs-zigzag-label">STEP 01</div>
            <div class="cs-zigzag-title">直感的な操作性</div>
            <p class="cs-zigzag-text">
                無駄を省いたクリーンなUI設計により、初めての方でも迷うことなく操作が可能です。マニュアル不要で、導入したその日からスムーズにご活用いただけます。
            </p>
        </div>
    </div>

    <div class="cs-zigzag-item">
        <div class="cs-zigzag-thumb">
            <img src="https://placehold.jp/24/e2e8f0/94a3b8/600x400.png?text=Image+02" alt="機能紹介2">
        </div>
        <div class="cs-zigzag-body">
            <div class="cs-zigzag-label">STEP 02</div>
            <div class="cs-zigzag-title">高速なパフォーマンス</div>
            <p class="cs-zigzag-text">
                最新のフロントエンド技術（HTML/CSS設計）を駆使し、ページの読み込み速度を劇的に改善。ユーザーの離脱を防ぎ、コンバージョン率の向上に貢献します。
            </p>
        </div>
    </div>

    <div class="cs-zigzag-item">
        <div class="cs-zigzag-thumb">
            <img src="https://placehold.jp/24/e2e8f0/94a3b8/600x400.png?text=Image+03" alt="機能紹介3">
        </div>
        <div class="cs-zigzag-body">
            <div class="cs-zigzag-label">STEP 03</div>
            <div class="cs-zigzag-title">万全のセキュリティ</div>
            <p class="cs-zigzag-text">
                通信の暗号化や定期的なバックアップなど、エンタープライズ基準の堅牢なセキュリティ体制を構築しています。大切なデータを安全に守ります。
            </p>
        </div>
    </div>

</div>
CSSコード表示
/* =========================================
   1. 全体のラッパー
========================================= */
.cs-zigzag-wrapper {
    display: flex;
    flex-direction: column;
    gap: 60px; /* 行と行の間の広い余白 */
    width: 100%;
    margin-bottom: 2em;
}

/* =========================================
   2. 各行のグリッド設定（基本は 左:画像 / 右:テキスト）
========================================= */
.cs-zigzag-item {
    display: grid;
    /* 左右を1:1で分割 */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center; /* 縦方向の中央揃え */
}

/* =========================================
   3. ジグザグの魔法（偶数行の配置を逆転）
========================================= */
/* 2行目、4行目... の画像（thumb）を右側（2列目）に配置 */
.cs-zigzag-item:nth-child(even) .cs-zigzag-thumb {
    grid-column: 2;
    grid-row: 1; /* 行を揃えるための明示的な指定 */
}

/* 2行目、4行目... のテキスト（body）を左側（1列目）に配置 */
.cs-zigzag-item:nth-child(even) .cs-zigzag-body {
    grid-column: 1;
    grid-row: 1;
}

/* =========================================
   4. 画像エリアの装飾
========================================= */
.cs-zigzag-thumb {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.cs-zigzag-thumb img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =========================================
   5. テキストエリアの装飾
========================================= */
.cs-zigzag-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #2589d0;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.cs-zigzag-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a202c;
    line-height: 1.3;
    margin-bottom: 16px;
}

.cs-zigzag-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a5568;
    margin: 0;
}

/* =========================================
   6. レスポンシブ対応（スマホ表示時は縦積み）
========================================= */
@media screen and (max-width: 768px) {
    .cs-zigzag-wrapper {
        gap: 48px; /* スマホでは行間を少し狭める */
    }

    .cs-zigzag-item {
        /* スマホでは1カラム（縦積み）に変更 */
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* ▼ 偶数行の逆転指定を解除し、自然な順序（画像が上）に戻す ▼ */
    .cs-zigzag-item:nth-child(even) .cs-zigzag-thumb,
    .cs-zigzag-item:nth-child(even) .cs-zigzag-body {
        grid-column: auto;
        grid-row: auto;
    }
    
    .cs-zigzag-title {
        font-size: 1.3rem;
    }
}

斜め・変形グリッド

クリエイティブエージェンシーやモダンなWebサービス（SaaS）、スタートアップのLPなどで見られる、画面全体に「傾斜（斜めのライン）」を取り入れたダイナミックなデザインです。

Avant-Garde
退屈なレイアウトを破壊する変形グリッド

親要素の傾斜（skew）と、12等分したCSS Gridを組み合わせることで、あえて余白を不規則に配置し、ユーザーの視覚を強く刺激します。

イメージ1
01
Dynamic Layout
イメージ2
HTMLコード表示
<div class="cs-skew-section">
    
    <div class="cs-skew-grid">

        <div class="cs-skew-item cs-skew-main">
            <div class="cs-skew-label">Avant-Garde</div>
            <div class="cs-skew-title">退屈なレイアウトを破壊する変形グリッド</div>
            <p class="cs-skew-text">
                親要素の傾斜（skew）と、12等分したCSS Gridを組み合わせることで、あえて余白を不規則に配置し、ユーザーの視覚を強く刺激します。
            </p>
        </div>

        <div class="cs-skew-item cs-skew-img cs-skew-sub1">
            <img src="https://placehold.jp/24/4a5568/ffffff/600x400.png?text=Creative" alt="イメージ1">
        </div>

        <div class="cs-skew-item cs-skew-accent cs-skew-sub2">
            <div class="cs-skew-number">01</div>
            <div class="cs-skew-subtext">Dynamic Layout</div>
        </div>

        <div class="cs-skew-item cs-skew-img cs-skew-sub3">
            <img src="https://placehold.jp/24/2589d0/ffffff/400x400.png?text=UI" alt="イメージ2">
        </div>

    </div>
</div>
CSSコード表示
/* =========================================
   1. 大枠（背景の傾斜）
========================================= */
.cs-skew-section {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* ダークな背景 */
    padding: 80px 40px;
    margin: 60px 0; /* 上下に余白を持たせて傾きが被らないようにする */
    
    /* ▼ ここが魔法：全体を-4度傾ける ▼ */
    transform: skewY(-4deg);
    
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* =========================================
   2. グリッドコンテナ（傾きの相殺と12等分）
========================================= */
.cs-skew-grid {
    /* ▼ ここが魔法：中身を+4度傾けて水平に戻す ▼ */
    transform: skewY(4deg);
    
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12カラムで細かく制御 */
    grid-template-rows: auto auto; /* 2行構成 */
    gap: 24px;
    
    max-width: 900px;
    margin: 0 auto;
}

/* =========================================
   3. 各アイテムのサイズと配置（非対称の美）
========================================= */
.cs-skew-item {
    border-radius: 16px;
    overflow: hidden;
}

/* ━━ 1. メイン（左側を大きく占有） ━━ */
.cs-skew-main {
    grid-column: 1 / 8; /* 1〜7列目まで */
    grid-row: 1 / 3;    /* 1〜2行目まで縦ぶち抜き */
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ━━ 2. 右上画像 ━━ */
.cs-skew-sub1 {
    grid-column: 8 / 13; /* 8〜12列目 */
    grid-row: 1 / 2;     /* 1行目のみ */
}

/* ━━ 3. 右下テキスト（アクセント） ━━ */
.cs-skew-sub2 {
    grid-column: 8 / 11; /* 8〜10列目 */
    grid-row: 2 / 3;     /* 2行目のみ */
    background-color: #2589d0;
    color: #ffffff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ━━ 4. 右下画像（極小） ━━ */
.cs-skew-sub3 {
    grid-column: 11 / 13; /* 11〜12列目 */
    grid-row: 2 / 3;      /* 2行目のみ */
}

/* =========================================
   4. 画像エリアの共通設定
========================================= */
.cs-skew-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.cs-skew-img:hover img {
    transform: scale(1.05); /* 軽くズームアウトするホバー */
}

/* =========================================
   5. テキストの装飾（ダークモード用）
========================================= */
.cs-skew-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}

.cs-skew-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.3;
    margin-bottom: 24px;
}

.cs-skew-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0;
}

.cs-skew-number {
    font-size: 2rem;
    font-weight: 800;
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 8px;
}

.cs-skew-subtext {
    font-size: 0.9rem;
    font-weight: 700;
}

/* =========================================
   6. レスポンシブ対応（スマホ時は傾きと複雑なグリッドを解除）
========================================= */
@media screen and (max-width: 768px) {
    .cs-skew-section {
        transform: none; /* スマホでは傾きを解除して読みやすさ優先 */
        padding: 40px 20px;
        margin: 32px 0;
        border-radius: 16px;
    }
    
    .cs-skew-grid {
        transform: none; /* 傾きの相殺も解除 */
        grid-template-columns: 1fr; /* 1カラムの縦積みに変更 */
    }
    
    /* すべてのアイテムのspan指定を解除し、自然な縦並びに */
    .cs-skew-main,
    .cs-skew-sub1,
    .cs-skew-sub2,
    .cs-skew-sub3 {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    
    .cs-skew-main {
        padding: 24px;
    }
    
    .cs-skew-title {
        font-size: 1.4rem;
    }
}

まとめ

ここでは全体のまとめを記載しておきます。

本記事のまとめ
  • 王道2カラム: メインエリア（可変・1fr）とサイドバー（固定幅）を並べる標準的な配置。
  • ホーリーグレイル（聖杯）:grid-template-areasを用いた、ヘッダー・フッター・左右サイドバー・メインの5分割構成。
  • フルスクリーン・スプリット: 画面を左右（または上下）に50:50で分割するLP向け構成。
  • 固定ヘッダー＋可変メイン: 縦分割（autoと1fr）を利用し、メインエリアのみをスクロールさせるアプリ風UI。
  • 均等オートグリッド:auto-fitとminmaxを活用し、メディアクエリなしで自動折り返しを実現。
  • ピックアップ強調:span 2を指定し、特定のカード（最初の1枚など）を2列分に拡大表示。
  • Masonry（レンガ積み）風:grid-auto-flow: denseを用いて、大小のカードの隙間を自動でパズルのように埋める配置。
  • 横スクロールグリッド:grid-auto-flow: columnとスクロールスナップを組み合わせたスワイプ対応リスト。
  • 入力フォーム整列: ラベル（固定幅）と入力欄（残り全幅）の縦のラインを正確に揃える2列配置。
  • ダッシュボード・統計パネル: 1つの親要素内でspanを使い分け、大小のパネルを自由に配置する管理画面風UI。
  • 定義リスト（dl/dt/dd）横並び: 項目名（dt）と説明文（dd）を横並びにし、複数行でも高さを自動で揃える構成。
  • カレンダーUI: 7列指定（repeat(7, 1fr)）と、1日のgrid-column-startオフセット指定だけで曜日のズレを自動計算する配置。
  • Bento UI（弁当箱風）: 角丸のタイルをdenseで敷き詰め、情報に優先度をつける最新トレンド配置。
  • 重ね合わせ（オーバーラップ）: 12カラム分割を利用し、position: absolute;を使わずに画像とテキストを安全に重ねるエディトリアルデザイン。
  • ジグザグ（千鳥格子）配置:nth-child(even)で偶数行の列指定を逆転させ、視線を誘導する交互レイアウト。
  • 斜め・変形グリッド: 親要素にskewY（傾斜）をかけ、内部のGridで傾きを相殺して作る非対称なアバンギャルド配置。

よくある質問（FAQ）

FlexboxとCSS Gridの違いは何ですか？どちらを使うべきですか？

最も大きな違いは「1次元」か「2次元」かという点です。

  • Flexbox（1次元）：
    横並び、または縦並びの「どちらか一方向」のレイアウトが得意です。
    ナビゲーションメニューやシンプルなカードの横並びなどに適しています。
  • CSS Grid（2次元）：
    縦と横の「両方向」を同時に制御できます。
    ページ全体のレイアウト（ヘッダー、サイドバー、メインコンテンツの分割）や複雑なタイル状のギャラリー配置などに適しています。

ページ全体の大枠や複雑な配置には「Grid」をその枠内での細かい要素の整列には「Flexbox」を組み合わせるのが現在の主流です。

Gridで要素を上下左右の中央に配置するにはどうすればいいですか？

親要素にdisplay: grid;とplace-items: center;を指定するのが最短です。

かつてはposition: absoluteやtransformを使った複雑な指定が必要でしたが、Gridを使えばたった2行で要素を完全に中央揃えにできます。

.container {
  display: grid;
  place-items: center; /* 縦と横の両方を中央揃え */
  height: 100vh;
}
メディアクエリ（@media）を使わずにレスポンシブなカード配置を作るには？

repeat()、auto-fit、minmax()を組み合わせた一行のコードで実現できます。

以下のコードを親要素に指定すると、画面幅に合わせて自動で列数が変わり、折り返されるようになります。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
  • 280px：カードの最小幅（これ以上小さくならない）
  • 1fr：余ったスペースを均等に割り当てる
1frという単位は何を意味していますか？

frは「fraction（比率・割合）」の略で、グリッドコンテナ内の「余ったスペースの割合」を意味します。

例えばgrid-template-columns: 1fr 1fr 1fr;と指定すると、3つの列が「1：1：1」の比率で親要素の幅を均等に分け合います。

grid-template-columns: 200px 1fr;のように記述すれば、「左側を200pxに固定し、右側は残りのスペースをすべて使う」といった柔軟な指定が計算なしで可能です。

グリッドアイテム間の隙間（余白）はどうやって指定しますか？

親要素にgapプロパティを指定します。

marginを使って個別のアイテムに余白を指定すると、端の要素に不要な余白ができてレイアウトが崩れる原因になります。

親要素にgapを指定することで、アイテムとアイテムの「間」だけに正確な隙間を作ることができます。

  • gap: 20px;（縦横ともに20pxの隙間）
  • gap: 20px 40px;（縦に20px、横に40pxの隙間）
あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次