カード型モジュールをコーディングする時の便利なCSS

カード型のレイアウトはユーザーが見やすいので様々なサイトで採用されています。
Soichiroでもブログの一覧などでカード型のレイアウトがあります。

今回の記事では、カード型のコーディングについて表示崩れしないCSSをまとめました。

基本的なカードのコーディング

カード型のとき注意しなくてはならないのが、高さの指定の方法です。
例えば下記のコードのようにcontent-box内をheightで指定してしまうと、文字の長さが長くなったときに見栄えが崩れてしまいます。

See the Pen card_01 by Masaki (@masamasaam) on CodePen.

そこでheightではなく要素の下にpaddingを当てるようにするとテキストが伸びてもその分カードの下部が伸びていくのでカード自体のレイアウトが崩れることはなくなります。

See the Pen card_02 by Masaki (@masamasaam) on CodePen.

この考え方はカード型のレイアウトだけでなく、CSSコーディング全般に通ずる考え方です。

またピクセルでの指定も注意が必要です。必要な場合のみ絶対値（pixel）にして、出来るだけ相対値（%, em）を使用するようにしましょう。

カード内の文章が長い場合でも対応できるCSS

先程述べたとおり、カード内の文章が長くなってしまった場合にpaddingで対応すると表示崩れが起きなくなります。
しかしカードが下に伸び過ぎても全体のバランスが崩れて見栄えが悪くなってしまいます。
そこで文章が長くなってしまう場合に、行数を制御するCSSを使用します。

See the Pen card_03 by Masaki (@masamasaam) on CodePen.

htmlを見ていただくと分かりますが、文字の量が大量になっても上記のCSSを用いると2行以上になったときに行の終わりが3点リードになります。

まとめ

今回紹介した、カード内のタイトルやテキストの長さを制御する方法に関して、WordPressで文字数を制御出来ることは知識としてありましたが、CSSで制御出来ることは知りませんでした。
どちらでも同じような機能を実装出来ますがどちらのやり方も自分の引き出しの中に持っていればケースバイケースで、サイトにあったコーディングが出来るかと思います。