【デイトラ学習記録】Web制作コース旧課題中級編DAY42&43 横並びカードのコーディング&PerfectPixelを使ったチェック＆修正

2023年6月24日2023年11月10日

こんにちは、ここぽてとです。デイトラ中級編挫折しそうになりながらも、なんとか続いています。（このブログが無かったら挫折してたかも…）自分が見返すための記録ではありますが、誰か見てくれることを祈って書いています。
本日は、カンプ（デザイン設計図）を見ながら横並びカードをコーディングしていきます。以前初級編でBootstrapで横並びカードをホームページに載せた時は、ほとんどコピペだったので本当に楽でしたが、今回はデザインを見ながらなのでそうはいきません。知らなかったタグがどんどん出てきますが、インプットしつつ、こちらでアウトプットしながら、完走を目指していきたいと思います。

横並びカードのコーディング（パソコン表示編）

【復習】position:absolute;を使ってアンダーバーをつける方法

今回も出てきました！”position:relative;”と”position:absolute;”が！（＋transformも前回出てきてましたね）
今回は、「カード」というタイトルの下の下線部を作るため、left: 50%; transform: translateX(-50%);として左右中央に寄せるように作っています。

.card_head{
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 28px;
    position:relative;

    &::after{
        content:"";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom:0;
        width:60px;
        height:4px;
        background: $color-main;
    }

Flexboxで横並びのカードの作り方

今回メインの作業です。横並びをするためにSassで親要素のクラスに”display: flex;”を使い、改行するために”flex-wrap: wrap;”を使います。”flex-wrap: wrap;”を指定すると、中のアイテム（フレックスアイテム）は自動的に改行され、複数行表示されます。

<div class="card__items">
  <div class="card__item">
    <!-- 各カードの内容 -->
  </div>
  <!--
    .
    . カード数だけ繰り返す
    .
  -->
</div>

.card__items {
  display: flex;
  flex-wrap: wrap;
}

Flexboxは苦手だったのですが、最近こちらのゲームで練習することで少しだけ慣れてきました！おすすめです。

他にも改行しながら横並びする方法として、

display: flex;
display: inline-block;
float: left; / float: right;

などがあります。こちらでもまたコーディングに挑戦できたらと思います。

notとwidth:calc();


.card__item {
  width: calc(33.3% - 24px * 2 / 3);
}

.card__item:not(:nth-child(3n + 1)) {
  margin-left: 24px;
}

“nth-child”の前にnotをつけることで、行の最初のカードだけは適用せずにmargin-leftで余白をつけることができます。width: calc(30% – 24px * 2 / 3); の意味は、インナー内にカードを3枚並べるので100% ÷ 3 で 33.3%、24pxは余白の幅、2は余白の数、3は横に並べるカードの枚数とのこと。これで、等間隔でカードを3枚ずつ並べることが出来ます。

width:calc（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )

早速この公式をnotionに登録しておこうと思います！

こちらのブログも大変わかりやすくて、参考になります！

&:nth-child(n+数字)

 .card_item{
        &:nth-child(n+4){
           margin-top: 24px;
        }
 }

最初のカードアイテムにはmargin-top適用したくないけど、4つ目のカードアイテムから”margin-top”を適用したいときに”&:nth-child(n+適用したい数字)”を使います。

横並びカードのコーディング（スマホ・タブレット表示編）

.card_item{
    width: calc(33.3% - 24px * 2 );
    background: #FFF;
    padding :16px;
    border-radius: 4px;
    @include mq('pc'){
    &:not(:nth-child(3n + 1)){
        margin-left: 24px;
    }
    &:nth-child(n+4){
        margin-top: 24px;
    }
    }

@include mq('tab'){
    width: calc(50% - 24px * 2);
    &:not(:nth-child(2n+1)){
        margin-left: 24px;
    }
    &:nth-child(n+3){
        margin-top: 24px;
    }
}
@include mq('sp'){
    width: 100%;
    margin-left: 0;
    &:nth-child(n+2){
    margin-top: 24px;
    }
}
}

calc（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 ) の公式を使って、スマホとタブレットの表示も設定していきます。タブレット時は2列表示なので、カードの枚数は2枚で100/2で50%、余白の数は1つ。公式に当てはめると、width: calc(50% – [余白の幅] * 1 / 2); 。これでうまくいくはずなのですが、思うようにならず、width: calc(50% – 24px * 2);に落ち着きました。スマホ時は1列になるので、”width: 100%;” にして、それぞれのmargin-leftを0に設定します。