【HTML/CSS】コピペで簡単！おしゃれなブログカードの作り方（Flexbox解説も）

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

Webサイトやブログ記事を読んでいると、関連する記事へのリンクが、画像やタイトル付きのきれいな「カード」形式で表示されているのを見かけますよね。あれをブログカードと呼びます。

今回は、HTMLとCSSの基本的な知識だけで、プロが作ったようなおしゃれなブログカードを作成するプロジェクトに挑戦します。このプロジェクトを通して、CSSのレイアウトや装飾の面白さを存分に感じてもらい、あなたのWeb制作スキルを一つ上のレベルに引き上げましょう！

完成イメージを見てみよう！
ステップ1：HTMLでブログカードの「骨組み」を作る
ステップ2：CSSで「見た目」をデザインする
1. 【CSSの重要ポイントを深掘り解説】
  1. Flexboxとは？
ステップ3：さらに魅力的に！カスタマイズに挑戦しよう
おわりに

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

今回作成するのは、画像が左、タイトルと説明文が右に配置された、シンプルでおしゃれなブログカードです。

ステップ1：HTMLでブログカードの「骨組み」を作る

まずは、カードの骨組みとなるHTMLを記述します。画像、タイトル、説明文、リンクといった要素を配置していきましょう。

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブログカードを作ろう</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <a href="https://katasuke-blog.jp/sample-article" class="blog-card">
        <div class="card-img-container">
            <img src="card-image.jpg" alt="記事のイメージ画像">
        </div>
        <div class="card-content">
            <p class="card-title">【HTML超入門】相対パスと絶対パス、もう迷わない！</p>
            <p class="card-description">
                HTMLのパス指定で挫折した人必見！相対パスと絶対パスの仕組みと使い方を、豊富な実例で徹底解説します。
            </p>
        </div>
    </a>

</body>
</html>

【コード解説：HTMLの役割】

HTMLは、Webページの「内容」と「構造」を定義する言語です。このコードでは、以下の要素を配置しています。

<a>タグ: ブログカード全体をクリックできるように、<a>タグで全体を囲んでいます。このタグにclass="blog-card"という名前をつけて、後でCSSを適用します。
<div>タグ: コンテンツをグループ化するためのタグです。card-img-containerとcard-contentに分けることで、画像とテキストを別々に扱い、レイアウトを調整しやすくしています。
<img>タグ: 記事のイメージ画像を表示します。srcには、用意した画像ファイルのパスを指定してください。
<p>タグ: 記事のタイトルと説明文を記述します。それぞれにクラス名をつけて、後でCSSでスタイルを指定します。

【準備】

HTMLファイルと同じフォルダに、card-image.jpgという名前で記事のイメージ画像を1枚用意しておいてください。

ステップ2：CSSで「見た目」をデザインする

次に、CSSを使ってブログカードにおしゃれな装飾を加えていきます。

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

body {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.blog-card {
    display: flex;
    width: 600px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.card-img-container {
    flex: 0 0 40%;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content {
    flex: 1;
    padding: 1.5rem;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 0.5rem;
}

.card-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

【CSSの重要ポイントを深掘り解説】

このブログカードは、ただの色の指定だけでなく、CSSのレイアウト機能であるFlexbox（フレックスボックス）を効果的に使っています。

Flexboxとは？

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

今回のブログカードでは、2つの重要な場所でFlexboxを使っています。

1. カードを画面の中央に配置する

bodyタグにdisplay: flex;と指定することで、子要素（ここでは.blog-card）を自由に配置できるようになります。

justify-content: center;：子要素を水平方向（左右）の中央に配置します。
align-items: center;：子要素を垂直方向（上下）の中央に配置します。
min-height: 100vh;：body要素の高さを、画面の高さ（viewport height）全体に広げます。これにより、垂直方向の中央寄せが機能します。

2. 画像とテキストを横並びにする

blog-cardにdisplay: flex;を指定することで、その子要素である画像コンテナ（.card-img-container）とテキストコンテナ（.card-content）が横並びになります。

さらに、flexプロパティを使って、それぞれの幅を細かく制御しています。

flex: 0 0 40%;
- flex-grow: 0（余ったスペースを広げない）
- flex-shrink: 0（スペースが足りなくても縮まない）
- flex-basis: 40%（基準となる幅を40%にする）
flex: 1;
- flex-grow: 1（余ったスペースを広げる）

これにより、画像は幅40%をキープし、テキストが残りのスペースを埋めるという理想的なレイアウトが実現します。

また今度、フレックスボックスの解説をしようと思うので、今はなんとなくでOKです！

他の部分のコードの意味が分からない方は、こちらをチェック！

ステップ3：さらに魅力的に！カスタマイズに挑戦しよう

基本のブログカードが完成したら、あなたのセンスで自由にカスタマイズしてみましょう。

カスタマイズ例1：色と影を変える

background-colorやcolorの値を変更して、カードの色や文字色を変えてみましょう。
box-shadowの値を調整して、影の濃さや広がり方を変えることができます。

カスタマイズ例2：角の丸みを変える

border-radiusの値を調整して、角の丸みを変えてみましょう。10pxから20pxに増やしたり、50%にして円形にしたりできます。

カスタマイズ例3：アニメーションを追加する

.blog-card:hoverのtransformプロパティを別の値に変えてみましょう。
- transform: scale(1.05);：マウスを乗せるとカードが少し拡大するアニメーション
- transform: rotate(5deg);：マウスを乗せるとカードが少し傾くアニメーション