CSS HTML

【CSS】Flexboxを使ったカードレイアウト|3カラム配置・分割

 

イケゾー
この記事は、こんな人におすすめ!
・定番のカードレイアウトを習得したい
・横幅ぴったりに配置する方法が分からない
・Bootstrapのcardを自分でコーディングしたい

 

このような疑問にお答えします。

 

本記事の内容

  • カードレイアウトのサンプルコード公開
  • カードレイアウトのコーディング解説

 

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

 

カードレイアウトは、素晴らしいデザインのひとつです。
実際に多くのサイトで採用されており、実案件でもそのままコピペで使用できます。

コーディングの基本が詰まっていますので、ぜひ習得してください。

それでは、どうぞ!

 

 

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

はじめに

基本的なHTML,CSSは準備できていることを前提に進めていきます。
不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

それでは本題に入っていきましょう
イケゾー

 

カードレイアウトとは何か

カードレイアウトとは、上記のように「画像+文章」の部品のことです。
ブログ記事一覧や、商品紹介ページで使われること多く、馴染みのあるデザインかと思います。

PCやスマホの画面幅に対応して、カラム数を切り替えるレスポンシブ対応も求められます。

 

人気なフレームワーク(Bootstrapなど)を勉強された方は、そちらを使って実装も可能です。

Bootstrapはとても便利ですが、実案件ではあまり使われません
なぜなら、Bootstrapはカスタマイズの自由度が低いので、自分で実装した方がコードがスッキリするからです。

>>Bootstrapのデザイン一覧を見る

 

シンプルな構成ですが、コーディングに慣れるまでは、難しく感じるかもしれません。
しかし、基本的なテクニックが詰まっているので、ぜひ手を動かしながらやっていきましょう。

それでは手を動かしながらやっていきましょう
イケゾー

 

【CSS】Flexboxを使ったカードレイアウトを解説

まずは、サンプルを見てみましょう。
HTMLとCSSのタブをクリックしてください。

右上の「EDIT ON CODEPEN」をクリックすると詳細が見られます。

【コピペOK】サンプルソースコード

See the Pen
3card
by いけぞー@WEB始めたて先生 (@ikezoooblog)
on CodePen.

 

 

ソースコードを解説

全体のイメージを掴んだ後に、ソースコードの解説をしていきます。

 

全体の構造

3カラムの配置を作成しました。

 

HTMLの解説

card-itemをカード数だけ複製してください。

<section class="blog">
	<div class="section-inner">
		<div class="card-items">
			<div class="card-item">
				<div class="card-img"></div>
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit.</p>
			</div>
		</div>
	</div>
</section>

 

CSSの解説

display:flexで横並びにしています。

 

card-itemwidthがポイントです。

calcwidthの値を算出します。
カードの枚数で割って(100% ÷ 3枚= 33.3%) 、card-itemのmargin(24x2 =48px)を引いた値です。

 

3カラムの一番右側には、margin-rightは不要です。nth-childで指定します。

section{
  padding: 50px 0px;
}
.section-inner{
  max-width: 100%;
  width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}
.card-items{
  display: flex;
  flex-wrap :wrap;
  justify-content: center;
  margin: 20px 0;
}

/* 3カラムで配置 */
.card-item{
  width: calc(33.3% - 24px*2);
  margin-right: 24px;
}
.card-item:nth-child(3n){
  margin-right: 0;
}

 

3カラムのカードレイアウトが完成しました
イケゾー

 

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

 

まとめ

定番のカードレイアウトを解説しました。

 

ポイント

・display:flexで横並びにする

・calcで横幅ぴったりにする

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS, HTML
-