はじめに
WEB制作をしていると、こんな感じのカードレイアウトを作成することがあるので、コピペできるようにメモしておきます。
なるべく使い回しができるようにしていきますが、もっと汎用性高くできるわ！って人はお声掛けください。
まずはカード本体を作る
HTML
<divclass="card"><divclass="card__wrapper"><divclass="card__img-box"><imgsrc="https://cdn.pixabay.com/photo/2020/08/27/10/24/water-5521696_960_720.jpg"alt=""class="card__img-item"/></div><divclass="card__content"><h3class="card__ttl">ダミーテキスト</h3><pclass="card__txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。
</p><pclass="card__txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。
</p></div></div></div>CSS(SCSS)
.card{&__wrapper{background-color:#fff;box-shadow:5px5px5px#999;}&__img-box{position:relative;width:100%;padding-top:55%;overflow:hidden;}&__img-item{width:100%;position:absolute;top:50%;transform:translate(0,-50%);}&__content{padding:20px;>*:last-child{margin-bottom:0;}}&__ttl{font-size:20px;margin-bottom:15px;font-weight:700;}&__txt{font-size:16px;}}まずはカード本体を作成します。
「> *:last-child」の部分で何をしているかというと、仮にダミーテキストがなくなってタイトルだけになった場合にmargin-bottomを消してくれるようにしています。
こういうレイアウトのときに画像を背景でよく置くのですが、今回はコンテンツとして表示するという意識をもってあえてimgタグで置いています。
この方が背景よりも若干SEO的に有利になります。
また、背景でおくとCMS導入の際にHTMLにCSSで「background-image」を指定することになるのが自分的にあまり好きじゃないです…
横並びにする
<divclass="cards cards--col3"> ~繰り返す~
<divclass="card"><divclass="card__wrapper"><divclass="card__img-box"><imgsrc="https://cdn.pixabay.com/photo/2020/08/27/10/24/water-5521696_960_720.jpg"alt=""class="card__img-item"/></div><divclass="card__content"><h3class="card__ttl">ダミーテキスト</h3><pclass="card__txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。
</p><pclass="card__txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。
</p></div></div> ~ここまで繰り返す~
</div></div>.cardのスタイルはそのままで、プラスして
CSS(SCSS)
.cards{display:flex;flex-wrap:wrap;align-items:center;margin:0-15px-30px;}.cards>.card{padding:015px;margin-bottom:30px;}.cards--col3>.card{width:33.33333%;}こんな感じです。
.cardsの部分で、ネガティブマージンを指定しているのはカード間にできるガターを打ち消すためです。
.card自体にはwidthは決めずに、親要素直下のcardに指定することで4カラムになった時でも、2カラムでもその都度対応できるかと思います。
まとめ
こんな感じで、コーディングに時間をかけて行きたくないので、ちょっとずつ貯めていきたいです。