【30DAYトライアル】２nd DAY10. 横並びカードのコーディングを９枚の画像で解説します【コードもあるよ】

前回に続き東京フリーランスさんの「30DAYSトライアル」の解説をしていきます。

今回は「カードの横並び」です。わたしは初めて見たときに全くコードが思い浮かびませんでした。

カードの横並びなんてやったことないし、コードもまったく思い浮かばない。これど〜やるの？？

わたしも初見ではコードがまったく浮かびませんでした。

ではどうやって乗り越えたかというと、ちょうど欲しかった本にカードの横並びのやり方が書いてあったんです。
すぐ買いに行きました（笑）
具体的には「CSSグリッド」を使います。これでなんとかこの課題を乗り越えることができました。

そこで今回は「カードの横並びレイアウト」でハマっていた過去の自分に向けて、そして学習のアウトプットとして考え方について書いていきたいと思います。

この記事のポイント

カードの横並びの方法がわかる
「CSSグリッド」の使い方がわかる
画像下の隙間の埋め方がわかる

それでは早速、やっていきましょう！

【30DAYトライアル】横並びカードの完成イメージ

これですね。ざっくりですがわたしが初見で疑問に思ったポイントは４つほどです。

タイトルの下の青い線
カードの作り方
カードの配置
レスポンシブ

まずはコードです

HTML

<!-- カード -->
<section class="card-sec">
    <div class="card-inner inner">
        
            <h2 class="page-title">Card</h2>
        

        <div class="card-container">
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->

        </div><!-- /card-container -->

    </div><!-- /card-inner -->
</section><!-- /card-sec -->

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

</div>

</div>

</section>

CSS

/*----------------------------
カード
-----------------------------*/
.card-sec {
    padding-top: 60px; /* ページタイトルの上の余白 */
    padding-bottom: 142px; /* カード下の余白*/
    background-color: #EFEFEF; /* 背景色 */
}

.page-title {
    position: relative;
    color: #333333;
    font-size: 60px;
}

.page-title:before { /* page-titleの下線 */
    display: inline-block;
    position: absolute;
    width: 76px;
    height: 5px;
    border-radius: 2px;
    background-color: #3F51B5;
    content: '';
    bottom: -42px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.card-container {
    display: grid; /* カードの横並び */
    grid-template-columns: repeat(auto-fit, minmax(342px, 1fr)); /* gridの設定 */
    gap: 20px 30px; /* カード同士の隙間 縦方向 横方向 */
    margin: 109px auto 0;
    text-align: start; /* カード内の中央寄せ解除 */
}

.card-item {
    width: 100%;
    max-width: 342px;
    margin: 0 auto;
    padding: 16px 16px 35px;
    background-color: #ffffff;
}

.card-img {
    width: 100%;
    max-width: 310px;
    height: auto; 
    vertical-align: bottom; /* 画像の下の余白を埋める */
}

.card-tit {
    margin-top: 20px;
    color: #6F7579;
    font-size: 20px;
    line-height: 1.2;
}

.card-item p {
    margin-top: 20px;
    color: #6F7579;
    font-size: 16px;
    line-height: 1.5;
}

/*----------------------------

カード

-----------------------------*/

.card-sec {

padding-top: 60px; /* ページタイトルの上の余白 */

padding-bottom: 142px; /* カード下の余白*/

background-color: #EFEFEF; /* 背景色 */

}

.page-title {

position: relative;

color: #333333;

font-size: 60px;

}

.page-title:before { /* page-titleの下線 */

display: inline-block;

position: absolute;

width: 76px;

height: 5px;

border-radius: 2px;

background-color: #3F51B5;

content: '';

bottom: -42px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.card-container {

display: grid; /* カードの横並び */

grid-template-columns: repeat(auto-fit, minmax(342px, 1fr)); /* gridの設定 */

gap: 20px 30px; /* カード同士の隙間縦方向横方向 */

margin: 109px auto 0;

text-align: start; /* カード内の中央寄せ解除 */

}

.card-item {

width: 100%;

max-width: 342px;

margin: 0 auto;

padding: 16px 16px 35px;

background-color: #ffffff;

}

.card-img {

width: 100%;

max-width: 310px;

height: auto;

vertical-align: bottom; /* 画像の下の余白を埋める */

}

.card-tit {

margin-top: 20px;

color: #6F7579;

font-size: 20px;

line-height: 1.2;

}

.card-item p {

margin-top: 20px;

color: #6F7579;

font-size: 16px;

line-height: 1.5;

}

【CSSグリッド】がお手軽で便利です

配置についてですがわたしは「CSSグリッド」を使いました。配置の仕方がやりやすいです。
しかもレスポンシブもいけちゃいます！

CSSグリッドは「Webクリエイターボックス」さんの記事がとてもわかりやすいので、ぜひのぞいてみてください。

参考 CSS Gridを使ったレスポンシブ対応の基本レイアウトWebクリエイターボックス

この課題の考え方はこちらです。

「card」の下の青い線をやっつける
カードを作る
カードを横並びにする
レスポンシブ化する

順番に解説します

STEP.1

HTMLを作成

まずHTMLだけ書いたところです。画像が下に長いので途中で切ってます。カードの部分はブログ記事を想定していまして、「クリックしたら個別ページに飛ぶ」みたいな想像で作りました。なので全体を「aタグ」で囲っています。

カード全体を「div」で囲う
クリックを想定して「a」で囲う
上から「img」「h2」「p」タグを書きます

これをカードの枚数分コピーです。

<!-- カード -->
<section class="card-sec">
    <div class="card-inner inner">
        
            <h2 class="page-title">Card</h2>
        

        <div class="card-container">
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->
            
            <!-- card-item -->
            <div class="card-item">            
                <a class="card-link" href="#">
                   <img sclass="card-img" src="images/card-img.svg" alt="">
                    <h2 class="card-tit">タイトルタイトル</h2>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a><!-- /card-content -->
            </div><!-- /card-item -->

        </div><!-- /card-container -->

    </div><!-- /card-inner -->
</section><!-- /card-sec -->

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

<h2 class="card-tit">タイトルタイトル</h2>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</div>

</div>

</div>

</section>

STEP.2

背景色とページタイトルの設定

見やすいように先に背景色を変えます。それから「ページタイトル」まわりのCSSを書いていきます。
次で説明しますが、準備として「.page-title」に「position: relative;」を設定します。

.card-sec {
    padding-top: 60px; /* ページタイトルの上の余白 */
    padding-bottom: 142px; /* カード下の余白*/
    background-color: #EFEFEF; /* 背景色 */
}

.page-title {
    position: relative;
    color: #333333;
    font-size: 60px;
}

.card-sec {

padding-top: 60px; /* ページタイトルの上の余白 */

padding-bottom: 142px; /* カード下の余白*/

background-color: #EFEFEF; /* 背景色 */

}

.page-title {

position: relative;

color: #333333;

font-size: 60px;

}

STEP.3

ページタイトル下の青い線の設定

ここで「ページタイトル」下の青い線を書いていきます。
考え方としては、線ではなく「線みたいな細い要素」を作ってちょうどいい位置に配置します。
順番に「まずは線を引く」次に「線を配置する」と２つに分けて考えるとわかりやすいです。
「left: 50%;」で真ん中付近に配置しますが少しずれます。「transform: translateX(-50%);」を書くことでずれた分を相殺できます。

/* page-titleの下線 */
.page-title:before {
    display: inline-block;
    position: absolute;
    width: 76px;  /*  下線の幅  */
    height: 5px;  /*  下線の太さ  */
    border-radius: 2px;  /*  下線の端の丸み   */
    background-color: #3F51B5;
    content: '';
    bottom: -42px;  /*  下線の縦軸の位置  */
    left: 50%;  /*  下線の横軸の位置  */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* page-titleの下線 */

.page-title:before {

display: inline-block;

position: absolute;

width: 76px; /* 下線の幅 */

height: 5px; /* 下線の太さ */

border-radius: 2px; /* 下線の端の丸み */

background-color: #3F51B5;

content: '';

bottom: -42px; /* 下線の縦軸の位置 */

left: 50%; /* 下線の横軸の位置 */

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

STEP.4

「ページタイトル」の見た目をまわりの余白も含めて整えます。

.card-container {
    margin: 109px auto 0;
    text-align: start; /* カード内の中央寄せ解除 */　
}

.card-container {

margin: 109px auto 0;

text-align: start; /* カード内の中央寄せ解除 */　

}

STEP.5

カードの外枠の設定

ここからカードのCSSを書いていきます。
まずは一番そと側です。背景色をつけて、「padding」で余白の設定をします。
カードっぽくなってきました。

.card-item {
    width: 100%;
    max-width: 342px;
    margin: 0 auto;
    padding: 16px 16px 35px;
    background-color: #ffffff;
}

.card-item {

width: 100%;

max-width: 342px;

margin: 0 auto;

padding: 16px 16px 35px;

background-color: #ffffff;

}

STEP.6

imgタグの設定

画像の設定ですが、Chromeのデベロッパー・ツールで見ると画像の下に少しだけ隙間があると思います。
これは「vertical-align: bottom;」で消すことができます。

.card-img {
    width: 100%;
    max-width: 310px;
    height: auto; 
    vertical-align: bottom; /* 画像の下の余白を埋める */
}

.card-img {

width: 100%;

max-width: 310px;

height: auto;

vertical-align: bottom; /* 画像の下の余白を埋める */

}

STEP.7

h2タグの設定

カードタイトルを整えます。特に難しいところはないのでコードを見ていただければOKです。

.card-tit {
    margin-top: 20px;
    color: #6F7579;
    font-size: 20px;
    line-height: 1.2;
}

.card-tit {

margin-top: 20px;

color: #6F7579;

font-size: 20px;

line-height: 1.2;

}

STEP.8

pタグの設定

カードの本文ですがこちらもコードを見ていただければOKです。

.card-item p {
    margin-top: 20px;
    color: #6F7579;
    font-size: 16px;
    line-height: 1.5;
}

.card-item p {

margin-top: 20px;

color: #6F7579;

font-size: 16px;

line-height: 1.5;

}

STEP.9

「display:grid;」で位置調整

最後に「display: grid;」で配置します。「grid-template-columns」で細かい設定ができます。
まず「auto-fit」で親要素の幅を見ながら要素を並べてくれます。
次に「minmax」で要素の幅の最小と最大を設定できます。（最小、最大）です。今回は最小のみ設定。
そして、「repeat」と「1fr」はminmaxで設定した要素を幅に合わせて並べてくれます。
カード同士の余白は「gap」で設定できます。
これで完成です。お疲れさまでした！

.card-container {
    display: grid; /* カードの横並び */
    grid-template-columns: repeat(auto-fit, minmax(342px, 1fr)); /* gridの設定 */
    gap: 20px 30px; /* カード同士の隙間 縦方向 横方向 */
    margin: 109px auto 0;
    text-align: start; /* カード内の中央寄せ解除 */
}

.card-container {

display: grid; /* カードの横並び */

grid-template-columns: repeat(auto-fit, minmax(342px, 1fr)); /* gridの設定 */

gap: 20px 30px; /* カード同士の隙間縦方向横方向 */

margin: 109px auto 0;

text-align: start; /* カード内の中央寄せ解除 */

}

XDの数字と若干違うところもありますが「PerfectPixel」でチェックして微調整しています。

この課題で参考になった書籍の紹介

わたしはこの課題を最初見たときにコードがまったく思いつきませんでした。
そこでたまたま見つけた本に突破口が書いてあり、うまいこと課題をクリアすることができました。
今でも「あれってどうやるんだっけ？」って感じで読み返すときがあるくらい使えます。
もし気になる方がいらっしゃったらチェックしてみてください。

リンク

さて、いかがだったでしょうか。

これが正解という訳ではありませんが一つのやり方としてお役に立てれば幸いです。
コーディング学習はハマると辛いですが、諦めなければ勝てると思っていますので一緒に頑張りましょう！

最後まで読んでいただきありがとうございました。

それではまた！ごきげんよ〜♪