【HTML】テキストと画像と背景がずれてる系【CSS】

どうも、くまだです。

お知らせやブログ記事のカードタイプのもので、よくある画像とテキストと背景がずれてる系のコーディングです。

テキストと画像と背景がずれてる系

テキストと画像と背景がずれてる系とは、例えば下記みたいなやつです。

こういう、テキストや背景と、画像がびみょ～～にずれてる感じのよくあるレイアウト。（なんでもかんでもずらしやがって…。まあ、おしゃれにみえなくもない）

いろいろやり方はあると思いますが、自分の場合はこうやりました。

    <div class="c-box">
      <div class="c-box__img">
        <img src="images/dummy.png" alt="">
      </div>
      <div class="c-box__textbox">
        <h2 class="c-box__title">タイトル</h2>
        <p class="c-box__text">テキストが入ります</p>
      </div>
    </div>

.c-box {
  max-width: 400px;  /* 調整用 */
  position: relative;
}


.c-box__img {
  position: relative;
  width: 90%;
}
.c-box::after {
  position: absolute;
  content: "";
  width: 90%;
  height: 90%;
  background: lightgray;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.c-box__img::before {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.c-box__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

.c-box__textbox {
  padding: 12px;
  background: lightgray;
  width: 87%;
  margin-right: 0;
  margin-left: auto;
}

/* 調整用 */
.c-box__title {
  margin: initial; 
}
.c-box__text {
  margin: initial; 

}

文字の大きさや画像の大きさは適当です（今回の趣旨ではないので）。

画像やテキストエリアの部分90%ぐらいにして、画像を左寄せ、テキストエリアの部分は右寄せ。

画像の背景は疑似要素で作成という感じです。

.c-box::after {
  position: absolute;
  content: "";
  width: 90%;
  height: 90%;
  background: lightgray;
  bottom: 0;
  right: 0;
  z-index: -1;
}

背景部分、色を変えるとわかりやすいかも。

ちなみに最初にこれやったときはどうやってつくるのかめちゃくちゃ悩んだ気がします…

ちなみに、テキストが長くなったら、自分は以下のコードで対応してます。

.c-box__text {
  margin: initial; 
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

2行以上になったら文末が「…」になる、みたいな。

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