カード型レイアウトのコーディング

どうも、くまだ です。

カード型レイアウトコンテンツのコーディングについて書いてみました。

やり方はいろいろあるんだなという感じで、自分の知識不足も露呈しつつアウトプット代わりに書いていこうと思います。

カード型レイアウトについて

カード型レイアウトとは、以下のような感じのやつです。

カード型レイアウト

Webサイトでよく見かけるような配置です。これがリンクになってたり、ブログ記事の一覧だったりなどの配置があるとします。

flexを使ったレイアウト

flexのやり方上記のような配置にするコーディングだと、こんな感じで簡単に配置ができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />

</head>
<body>
  <div class="container">
    <div class="inner">
      <div class="box">
        <p>1</p>
      </div><!-- /.box -->
      <div class="box">
        <p>2</p>
      </div><!-- /.box -->
      <div class="box">
        <p>3</p>
      </div><!-- /.box -->
      <div class="box">
        <p>4</p>
      </div><!-- /.box -->
      <div class="box">
        <p>5</p>
      </div><!-- /.box -->
      <div class="box">
        <p>6</p>
      </div><!-- /.box -->
    </div><!-- /.inner -->

  </div><!-- /.container -->

</body>
</html>

@charset 'utf-8';

.container{
  width: 100%;
}

.inner {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px auto;
}

.box {
  display: flex;
  width: 32%;
  height: 300px;
  margin-bottom: 20px;
  background: lightcoral;
  text-align: center;

}

.box p {
  margin: auto;
  font-size: 24px;
}

これをブラウザで表示してみると、上記の画像のようなレイアウトになります。

flexはめちゃくちゃ使いやすい便利なものなんですが、例えば上の記述だと、この6つのコンテンツが2つになったり5つになった場合にはこんな配置になってしまいます。

2つのパターン

2つのカード型レイアウト

5つのパターン

5つのカード型レイアウト

必ずしも綺麗にコンテンツの数が揃うとは限りません。コンテンツが増えたり、減ったりするパターンも想定すると、上のような2つのとき、5つのときになるとレイアウトが崩れてしまいます。これだと改めて調整が必要になってきます。

なのでそうならないようにするコーティングも考えていきます。

疑似要素をいれて配置する

やり方は簡単で、親クラスが付いているdivタグ(今回の場合でいえば、containerクラス)に疑似要素を当てるだけです。以下のような感じです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />

</head>
<body>
  <div class="container">
    <div class="inner">
      <div class="box">
        <p>1</p>
      </div><!-- /.box -->
      <div class="box">
        <p>2</p>
      </div><!-- /.box -->
      <div class="box">
        <p>3</p>
      </div><!-- /.box -->
      <div class="box">
        <p>4</p>
      </div><!-- /.box -->
      <div class="box">
        <p>5</p>
      </div><!-- /.box -->
    </div><!-- /.inner -->
  </div><!-- /.container -->

</body>
</html>

@charset 'utf-8';

.container{
  width: 100%;
}

.inner {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px auto;
}

.box {
  display: flex;
  width: 32%;
  height: 300px;
  margin-bottom: 20px;
  background: lightcoral;
  text-align: center;

}

.inner::after {
  display: block;
  content: "";
  width: 32%;
}

.box p {
  margin: auto;
  font-size: 24px;
}

ブラウザで見るとこんな感じに配置されます。

2つになった場合でも、以下のような感じに配置されます。

これで揃えてやるというパターンもあります。

calcを使うやり方

calcを使うやり方だと、cssのほうは以下のような感じに書きます。htmlは変わりません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />

</head>
<body>
  <div class="container">
    <div class="inner">
      <div class="box">
        <p>1</p>
      </div><!-- /.box -->
      <div class="box">
        <p>2</p>
      </div><!-- /.box -->
      <div class="box">
        <p>3</p>
      </div><!-- /.box -->
      <div class="box">
        <p>4</p>
      </div><!-- /.box -->
      <div class="box">
        <p>5</p>
      </div><!-- /.box -->
    </div><!-- /.inner -->
  </div><!-- /.container -->

</body>
</html>

@charset 'utf-8';

.container {
  width: 100%;
}

.inner {
  width: 60%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px auto;
}

.box {
  display: flex;
  width: calc(100%/3 - 30px/3);
  height: 300px;
  margin-right: 15px;
  margin-bottom: 15px;
  background: lightcoral;
  text-align: center;

}

.box:nth-of-type(3n) {
  margin-right: 0;
}

.box p {
  margin: auto;
  font-size: 24px;
}

このやり方だと疑似要素もjustify-contentも使用せずに配置できます。

5つになっても2つになってもちゃんと配置されます。

calcの使い方に関しては以下を参考に。

:nth-of-type()については以下を参考に。

疑似要素を使ったほうが簡単なのですが、calcも便利なので、カード型レイアウトをするときは私はcalcを使って基本的にコーディングしています。gridを使うやり方もあるんでしょうが、私自身がgridをあまり使ってこなかった人間なのでそれはまた別の機会にしたいと思います。

いろいろなパターンを覚えて引き出しを増やす

いちいちやり方を調べるのもいいんですけど、こういう風に自分のブログ内にこんな形で記事を残しておけば自分が確認するのも楽かなと思って書きました(あとはアウトプット代わり)。今回はレスポンシブはやりませんでしたが、レスポンシブごとに配置を3つにしたり4つにしたりなどのやり方もあります。

今回は静的なサイトを想定していますが、WordPress化された動的なサイトになって記事一覧がループで処理する場合であっても使えるネタなので、calcが便利かなと思って覚えておいてもらったら幸いです。

ここまで読んでくださりありがとうございました。

この記事を書いた人