トップページの作成

いよいよ各ページの作成です。まずはトップページから作ります。

この章でやること

記事カードのマークアップ
グリッドレイアウト
ホバー演出
もっと見るボタンの配置

記事カード

1件の記事は、サムネイル・日付・タイトルで構成します。カード全体を a で囲むと、クリック範囲が広くなって使いやすいです。

<article class="top-blog-card">
    <a href="post.html" class="top-blog-card-link">
        <div class="top-blog-card-thumbnail">
            <img src="img/pic-post-thumbnail.png" alt="" width="1600" height="1200" decoding="async" />
            <time datetime="2024-09-05" class="top-blog-card-date">2024/09/05</time>
        </div>
        <h2 class="top-blog-card-title">朝からサクッと高尾山に登って日の出を見てきた！</h2>
    </a>
</article>

日付はサムネイル左上に重ねます。position: absolute を使う典型的なパターンです。

グリッドレイアウト

一覧は CSS Grid で組みます。

SP：1列
PC：2列

.top-blog-card-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
}

@media (width >= 768px) {
    .top-blog-card-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

ホバー演出

ホバー時は、サムネイルを少し拡大し、タイトル色をメインカラーに変えます。

@media (any-hover: hover) {
    .top-blog-card-link:hover .top-blog-card-thumbnail img {
        scale: 1.05;
    }

    .top-blog-card-link:hover .top-blog-card-title {
        color: var(--color-primary);
    }
}

any-hover: hover を付けると、タッチデバイスでホバー状態が残り続ける問題を避けやすくなります。