まとめサイトみたいに、画像の上にタイトルを表示して、一覧にしてみた。情報量を圧縮していくと、だいたい既存サイトに似てくるな〜。

参考URL

画像の上にテキストを表示する

cssを見てて思うんだけど、なんでコメントを書かないのだろうか…。
初心者的には、一行毎に説明が欲しい！

  <style>
    .container {
      display: flex; /* 要素を横並びにしてレスポンシブに */
      flex-wrap: wrap; /* ウィンドウの端まできたら次の行へ。nowrapなら改行せず、ずっと横へ！ */
    }
    figure {
      position: relative; /* 親要素は相対的位置、子要素は親要素に対して絶対的位置 */
      margin: 5px; /* 隣のfigureと、ちょっと離す */
      display: inline-block; /* 横並びはinline, 中身はblock */
      width: 300px; /* 横幅だけ指定すると、縦幅は自動で調節される */
    }
    figure img {
      max-width: 100%; /* レスポンシブでも親要素を飛び出さない */
      vertical-align: top; /* imgの下の隙間を無くす。imgはbaseline(横文字の基準線)に下部が合わさっているので */
    }
    figure figcaption {
      position: absolute;  /* 親要素は相対的位置、子要素は親要素に対して絶対的位置 */
      bottom: 0; /* 説明文は下に */
      left: 0; /* 左詰め */
      padding: 5px 10px; /* 説明文の周りに隙間を入れる */
      font-size: 86%; /* 文字のサイズをちょっと小さめにする */
      color: #fff; /* 白文字・黒背景 */
      background: #333;
      opacity:		0.8;	/* 背景画像をちょっと透かす */
    }
  </style>

  <div class="container">
    <article>
      <a href='https://www3.nhk.or.jp/news/html/20200601/k10012452981000.html' target="_new" rel="noopener noreferrer">
        <figure>
          <img src='https://www3.nhk.or.jp/news/html/20200601/K10012452981_2006011047_2006011056_01_02.jpg'>
          <figcaption>国内感染者1万6912人 死者897人（クルーズ船除く）新型コロナ </figcaption>
        </figure>
      </a>
    </article>
    ひたすら記事が繰り返される
  </div>

<style>

.container {

display: flex; /* 要素を横並びにしてレスポンシブに */

flex-wrap: wrap; /* ウィンドウの端まできたら次の行へ。nowrapなら改行せず、ずっと横へ！ */

}

figure {

position: relative; /* 親要素は相対的位置、子要素は親要素に対して絶対的位置 */

margin: 5px; /* 隣のfigureと、ちょっと離す */

display: inline-block; /* 横並びはinline, 中身はblock */

width: 300px; /* 横幅だけ指定すると、縦幅は自動で調節される */

}

figure img {

max-width: 100%; /* レスポンシブでも親要素を飛び出さない */

vertical-align: top; /* imgの下の隙間を無くす。imgはbaseline(横文字の基準線)に下部が合わさっているので */

}

figure figcaption {

position: absolute; /* 親要素は相対的位置、子要素は親要素に対して絶対的位置 */

bottom: 0; /* 説明文は下に */

left: 0; /* 左詰め */

padding: 5px 10px; /* 説明文の周りに隙間を入れる */

font-size: 86%; /* 文字のサイズをちょっと小さめにする */

color: #fff; /* 白文字・黒背景 */

background: #333;

opacity: 0.8; /* 背景画像をちょっと透かす */

}

</style>

<figcaption>国内感染者1万6912人死者897人（クルーズ船除く）新型コロナ </figcaption>

</figure>

</a>

</article>

ひたすら記事が繰り返される

</div>

関連記事