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

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだ です。

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

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

なお、円に並べるやり方はこちらです。

【HTML】円を並べるコーディング【CSS】
円を並べるコーディングの方法。
weblife.ppmp556.com

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

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

カード型レイアウト

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つのパターン

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

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;
}

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

カード5つのレイアウト

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

カード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つになってもちゃんと配置されます。

カード2つのレイアウト

カード5つのレイアウト

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

calc() – CSS: カスケーディングスタイルシート | MDN
calc() は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 <length>、<frequency>、<angle>、<time>、<p…
developer.mozilla.org

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

:nth-of-type() – CSS: カスケーディングスタイルシート | MDN
:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。
developer.mozilla.org

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

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

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

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

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

CSS HTML

この記事を書いた人

くまだ

記事一覧