一覧　カード型　全幅

一覧　カード型　仕様

カード幅は全幅。

リセットcss使用してる。

HTMLのコード

<ul class="areaCard">
  <li class="areaCard__card card">
    <div class="card__areaImage">
      <img class="card__cardImage" src="./img/list_card_ver02_cat.jpg" alt="">
    </div><!-- .card__areaImage -->
    <div class="card__areaNote">
      <div class="card__cardTitle">
        吾輩は猫である
      </div><!-- .card__cardTitle -->
      <div class="card__cardNote">
        吾輩わがはいは猫である。名前はまだ無い。 
　　　　どこで生れたかとんと見当けんとうがつかぬ。
　　　　何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
　　　　吾輩はここで始めて人間というものを見た。
        しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。　　
　　　　この書生というのは時々我々を捕つかまえて煮にて食うという話である。
        しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
        ただ彼の掌てのひらに載せられてスーと持ち上げられた時
　　　　 何だかフワフワした感じがあったばかりである。
      </div><!-- .card__cardNote -->
      <div class="card__cardAuthor">
        東京都 夏目 漱石さん &lpar;37歳&rpar;
      </div><!-- .card__cardAuthor -->
    </div><!-- card__areaNote -->
  </li><!-- areaCard__card -->
  <li class="areaCard__card card">
    <div class="card__areaImage">
      <img class="card__cardImage" src="./img/list_card_ver02_maiko.jpg" alt="">
    </div><!-- .card__areaImage -->
    <div class="card__areaNote">
      <div class="card__cardTitle">
        舞姫
      </div><!-- .card__cardTitle -->
      <div class="card__cardNote">
        越後の春日を経て今津へ出る道を、珍らしい旅人の一群れが歩いている。
　　　　母は三十歳を踰こえたばかりの女で、二人の子供を連れている。
        姉は十四、弟は十二である。
　　　　それに四十ぐらいの女中が一人ついて、くたびれた同胞二人を、
　　　　「もうじきにお宿にお着きなさいます」と言って励まして歩かせようとする。
        二人の中で、姉娘は足を引きずるようにして歩いているが、
　　　　それでも気が勝っていて、疲れたのを母や弟に知らせまいとして、
        折り折り思い出したように弾力のある歩きつきをして見せる。
      </div><!-- .card__cardNote -->
      <div class="card__cardAuthor">
        東京都 森 鴎外さん &lpar;37歳&rpar;
      </div><!-- .card__cardAuthor -->
    </div>
  </li><!-- areaCard__card -->
  <li class="areaCard__card card">
    <div class="card__areaImage">
      <img class="card__cardImage cardImage" src="./img/list_card_ver02_train.jpg" alt="">
    </div><!-- .card__areaImage -->
    <div class="card__areaNote">
      <div class="card__cardTitle">
        銀河鉄道の夜
      </div>
      <div class="card__cardNote">
        「ではみなさんは、そういうふうに川だと云いわれたり、
　　　　　乳の流れたあとだと云われたりしていたこのぼんやりと白いものが
　　　　　ほんとうは何かご承知ですか。」
        先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯の
　　　　ようなところを指さしながら、みんなに問いをかけました。
        カムパネルラが手をあげました。それから四五人手をあげました。
　　　　　ジョバンニも手をあげようとして、急いでそのままやめました。
        たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、
　　　　このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、 　　
　　　　なんだかどんなこともよくわからないという気持ちがするのでした。
        ところが先生は早くもそれを見附けたのでした。
      </div><!-- .card__cardNote -->
      <div class="card__cardAuthor">
        岩手県 宮沢 賢治さん &lpar;37歳&rpar;
      </div><!-- .card__cardAuthor -->
    </div>
  </li><!-- areaCard__card -->
</ul><!-- .areaCard -->

SCSSファイル

リセットcss 関係するコードのみ

/* Reset image and restyle */
/******************************************/
img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

cssコード

/* セクション カード 全幅
/******************************************/

.areaCard {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
}

.card {
  display: flex;
  margin-top: 32px;
  box-shadow: 0 3px 6px rgba(#000, 0.16);

  &:nth-child(2n) {
    flex-direction: row-reverse;
  }

  @include mixin.responsive(sm) {
    display: block;
  }

  &__areaImage {
    flex: 0 0 50%;
    height: 315px;
  }

  &__areaNote {
    flex: 0 0 50%;
    height: 315px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }

  &__cardTitle {
    font-size: 22px;
    font-weight: bold;
  }

  &__cardNote {
    margin-top: 24px;
    margin-bottom: auto;
    font-weight: bold;
    height: 145px;
    overflow-y: hidden;
  }

  &__cardAuthor {
    text-align: end;
  }

}