【HTML&CSS】Flexboxを使ってカードのリストを作成する方法！

f:id:himanakuroneko7:20200704171411p:plain

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではflexboxを活用してカード型のリストを横並びに作成していきます。

bootstrapなどを使っても実装は出来ますが、Flexboxを使って作ることでCSSの練習にもなるかなと思います

今回作るもの

f:id:himanakuroneko7:20200704162714p:plain

TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。アイコン＋名前を記載し、その下に説明文を記載します。

前回の記事

今回の内容は前回作成したカテゴリーリストの作り方と似ている部分が多いので

もしまだこちらの記事を見ていない方は是非読んでみてください。

kuro-engineer-log.hatenablog.com

flexboxを活用してカード風に表示する

まずは枠となる部分から作っていきます。

index.html

<div class="card-list">
  <div class="card">
    <div class="profile">
    </div>
    <div class="description">
   </div>
</div>

今回は複数のカードを表示するため、一番外側には card-list クラスを付加した div を配置
そして内部にカード1つ1つを入れていく card クラスを持った div を配置
card クラスの内部にはアイコンと名前を入れるための profile クラスを持った div を配置
説明文を入れるための description クラスを持った div を配置

仮で内容を入れるとこんな感じになります。

index.html

<div class="card-list">
  <div class="card">
    <div class="profile">
      <div class="profile-icon">
        <img src="./assets/image/himakuro-plain.png">
      </div>
      <div class="profile-name">
        <span>himakuro</span>
      </div>
    </div>
  <div class="description">
    <span>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみふめもやゆよらりるれろわをん</span>
   </div>
</div>

内容を入れた跡の見た目はこんな感じになります。 f:id:himanakuroneko7:20200704164618p:plain

アイコンと名前の部分を整えていく

続いてアイコンと名前の部分をCSSで整えていきます。

アイコン部分に関しては前回の記事と同様のものを活用していきます。

またカードの領域をより明確にするために、背景全体に色を付け、カードの背景にも色を付けておきましょう。

style.css

body {
    background-color:#f4f8fa;
}

.card {
    background-color: white;
}

.profile-icon img {
    width: 45px;
    border-radius: 50%;
    margin: auto 16px;
}

このような見た目になればOKです。

f:id:himanakuroneko7:20200704165046p:plain

カードの見た目を調整していく

次はカードの見た目を調整していきます。

style.css

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
}

.card .profile {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

カードの背景色を白に変更する
4つのカードを1行に並べるため、左右の余白を考慮しつつ width: 24% を指定
カードの内部に余裕を持たせるために padding: 20px を指定
アイコンの隣に名前を表示したいため、 display: flex を指定
アイコンと説明文の間に余白を設けるため margin-bottom: 10px を指定
アイコンと名前の上下の位置を合わせるため align-items: center を指定

上記のスタイルを追加後はこのようになればOKです

f:id:himanakuroneko7:20200704165908p:plain

一気にカードらしさが増してきたと思います。

カードリスト全体の見た目を調整していく

続いてカードを複数配置したときの見た目を調整していきます。

現状のコードだと仮にカードを8個配置してもこの様に縦一列に表示がされてしまいます。

f:id:himanakuroneko7:20200704170127p:plain

これを下記のスタイルを追加することで4つのカードが1行に並ぶようにしていきます。

style.css

.card-list {
    margin-bottom: 30px;
    display: flex; // 追加
    flex-wrap: wrap; // 追加
    justify-content: space-between; // 追加
}

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
    box-sizing: border-box; // 追加
    margin: 10px 0; // 追加
}

display: flex を追加することで横並びにする
指定したwidthで折返しがされるように flex-wrap: wrap を追加
justify-content: space-between でそれぞれのカードを余白も加味した上で並ぶようにする
box-sizing: border-box で padding や margin も考慮した width になるようにする
margin: 10px 0 で各カードの上下に余白を設ける

スタイル追加後はこのような見た目になればOKです。

f:id:himanakuroneko7:20200704170608p:plain

ほぼ完成形になりました。

カードに影を付加する

最後に見た目の改善と言うところでカードの下部分に影を追加します

style.css

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px 0;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3); // 追加
}

box-shadow はその名の通り、boxに影を追加するためのスタイルです。

追加後はこのようになればOKです。

f:id:himanakuroneko7:20200704170919p:plain

文字がはみ出てしまう場合

今回の実装を行い、もし説明文がカードの外にはみ出てしまう場合は

word-break を追加することで解消されます

style.css

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px 0;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
    word-break: break-all; // 追加
}