ニュースセクションレイアウトのコーディング方法【スマホ・レスポンシブ対応】

NEWSとかお知らせのセクションのコーディングってどうやるの？

ホームページでよく見るのが、このようなレイアウト。

NEWSレイアウト

複雑なデザインではありませんが、実際にコーディングしようとすると迷ってしまうかと思います。

今回は、このNEWSセクションのコーディング方法を解説していきます。

ただし、NEWSセクションのコーディング方法はいろいろあるので、今回はその一例と思って下さい。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

NEWSセクションのコーディング方法

今回ご紹介するのは、以下のようなNEWSセクションになります。

h2が『NEWS』というセクション
日付・カテゴリーラベル・記事タイトルが横並び
日付はtimeタグ
カテゴリーラベルはspanタグ
記事タイトルはh3
リンク範囲①：日付・カテゴリーラベル・記事タイトルまとめて1つ
リンク範囲②：カテゴリーラベルと記事タイトルの2ヶ所
リンク範囲にカーソルを載せたら背景色が変わる（リンク範囲が全体の場合）
記事タイトル①：複数行
記事タイトル②：1行で超えた分は『・・・』にする
レスポンシブ対応（スマホサイズでは日付・カテゴリーラベルだけ横並び）

リンク範囲と記事タイトルに関しては、2つのパターンで解説します。

実際にはカテゴリーラベルがなかったり、さらにいろんなパターンがあると思いますが、今回はよくあるパターンで解説します。

共通のコード

リンク範囲をカテゴリーラベルと記事タイトルの2ヶ所にする場合を除き、共通のコードはこちらになります。

HTMLはこちら。

<section class="news">
  <div class="inner">
    <div class="news-wrapper">
      <h2 class="section-title">NEWS</h2>
      <div class="news-container">
        <a href="#" class="news-link">
          <div class="news-info">
            <time class="news-date" datetime="2024-4-1">2024-04-01</time>
            <span class="news-category">カテゴリー</span>
          </div>
          <h3 class="news-title">記事タイトルが入ります。</h3>
        </a>
        <a href="#" class="news-link">
          <div class="news-info">
            <time class="news-date" datetime="2024-4-1">2024-04-01</time>
            <span class="news-category">カテゴリー</span>
          </div>
          <h3 class="news-title">記事タイトルが入ります。</h3>
        </a>
        <a href="#" class="news-link">
          <div class="news-info">
            <time class="news-date" datetime="2024-4-1">2024-04-01</time>
            <span class="news-category">カテゴリー</span>
          </div>
          <h3 class="news-title">記事タイトルが入ります。</h3>
        </a>
      </div>
    </div>
  </div>
</section>

日付とカテゴリーラベルは、レスポンシブレイアウトになっても横並びにするので、divタグで囲っています。

CSSはこちら。

.news-wrapper {
  border: 1px solid #333; /* 枠線 */
  padding: 30px; /* 全体内側の余白 */
}
.news-container {
  margin-top: 20px; /* セクションタイトルとの余白 */
}
.news-link {
  align-items: center; /* 上下中央 */
  display: flex; /* 日付&カテゴリーラベルと記事タイトルの横並び */
  padding-bottom: 10px; /* 内側下の余白 */
  padding-top: 10px; /* 内側上の余白 */
  transition: background-color .5s; /* 背景色をじんわり変化 */
}
.news-link:not(:first-of-type) {
  border-top: 1px solid #ccc; /* 記事リンク間の線 */
}
.news-info {
  align-items: center; /* 上下中央 */
  display: flex; /* 日付とカテゴリーの横並び */
  flex-shrink: 0; /* これが無いと日付・カテゴリーラベルが潰れる */
}
.news-date {
  color: #333; /* 日付の文字色 */
  font-size: 14px; /* 日付のフォントサイズ */
}
.news-category {
  background-color: #1cb4d3;
  color: #fff; /* カテゴリーラベルの文字色 */
  font-size: 20px; /* カテゴリーラベルのフォントサイズ */
  margin-left: 10px; /* カテゴリーラベル左の余白 */
  padding: 5px; /* カテゴリーラベル内側の余白 */
}
.news-title {
  color: #333; /* 記事タイトルの文字色 */
  font-size: 26px; /* 記事タイトルのフォントサイズ */
  line-height: 1.5; /* テキストの行間 */
  margin-left: 10px; /* 記事タイトル左の余白 */
}
.news-link:hover {
  background-color: #ffffe5; /* ホバーした時の記事リンクの背景色 */
}
/* 画面幅400px以下のスタイル */
@media screen and (max-width: 400px) {
  .news-wrapper {
    padding: 15px;
  }
  .news-link {
    display: block; /* 日付&カテゴリーラベルと記事タイトルの横並び解除 */
  }
  .news-category {
    font-size: 16px; /* カテゴリーラベルのフォントサイズ */
  }
  .news-title {
    font-size: 16px; /* 記事タイトルのフォントサイズ */
    margin-left: 0; /* 記事タイトル左の余白0 */
    margin-top: 10px; /* 記事タイトル上の余白 */
  }
}

日付・カテゴリーラベル・記事タイトルのフォントサイズは、上下中央になっているのが分かりやすいように、あえてバラバラにしています（実際はもっと近いサイズであることが多いです）

marginについては、margin-leftとmargin-topしか使っていません。

marginはNEWSセクションに限らず、左右と上下はどちらか片方に統一した方が迷わなくていいです（私は基本的に左と上しか使いません）

記事タイトルが複数行

これは、先ほどの共通のコードのままになります。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

カーソルを乗せると、リンク範囲の背景色が変わるのが分かります。

また、左上のHTML・CSSをクリックして画面幅を狭くすると、日付&カテゴリーラベルと記事タイトルが縦並びになります。

記事タイトルが1行

今度は、記事タイトルを1行にします。

これは1行を超える場合は『・・・』にする方法です。

共通のコードに追記するのは、こちらになります。

.news-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

また、1行なのでline-height: 1.5;は削除してもいいでしょう。

その代わり、line-height: 1.5;を削除すると記事タイトルの高さが変わるので、注意しましょう。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

2つ目は先ほど同様に長いタイトルですが、1行を超えた分は『・・・』になっています。

左上のHTML・CSSをクリックして画面幅を狭くすると分かりやすいと思います。

カテゴリーラベルの幅をどうするか？

ここまでの書き方の場合、カテゴリー名の文字数が変わるとこのようになります。

See the Pen
NEWSセクション（カテゴリーラベルの幅を指定しない） by junpei (@junpei-sugiyama)
on CodePen.

記事タイトルの幅が変わってしまいました。

これを回避したい場合は、日付&カテゴリー名の幅を固定するしかありません（恐らく）

なので、カテゴリー名が想定より長い場合は改行されてしまいます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ということで、この問題に関しては以下のどれかを選択することになります。

最初から『日付&カテゴリー名』と『記事タイトル』を縦並びにする（カテゴリー名が長くても大丈夫）
記事タイトルの幅は変わってもOKにする
カテゴリー名が長い場合は改行してもOKにする
長いカテゴリー名は作らない
カテゴリー名は表示しない

そして実は・・・このように3つが横並びになってるデザインは、あまりなかったりします。

それはコーディングしにくいからなのかも知れませんが、個人的には最初から『日付&カテゴリー名』と『記事タイトル』を縦並びにした方が自然かなと思います。

ただし当然こういうデザインもあるので、その場合はどうしたらいいかを知るために、今回はこのレイアウトを基本にしています。

また、日付も『2024年4月1日』とするか『2024年04月01日』とするかで幅が変わるので、ここも意識しましょう（潰れたら、日付にもflex-shrink: 0;を書きましょう）

リンク範囲がカテゴリーラベルと記事タイトルの2ヶ所

あまりないパターンですが、

カテゴリーラベルをクリックしたら、カテゴリーページに遷移
記事タイトルをクリックしたら、記事ページに遷移

という場合があります。

その場合は、リンクが2つになります。

HTMLはこちらになります。

<section class="news">
  <div class="inner">
    <div class="news-wrapper">
      <h2 class="section-title">NEWS</h2>
      <div class="news-container">
        <div class="news-link">
          <div class="news-info">
            <time class="news-date" datetime="2024-4-1">2024-04-01</time>
            <a href="#" class="news-category">カテゴリー</a>
          </div>
          <h3 class="news-title">
            <a href="#">記事タイトルが入ります。</a>
          </h3>
        </div>
        <div class="news-link">
          <div class="news-info">
            <time class="news-date" datetime="2024-4-1">2024-04-01</time>
            <a href="#" class="news-category">カテゴリー</a>
          </div>
          <h3 class="news-title">
            <a href="#">記事タイトルが入ります。記事タイトルが入ります。</a>
          </h3>
        </div>
        <div class="news-link">
          <div class="news-info">
            <time class="news-date" datetime="2024-4-1">2024-04-01</time>
            <a href="#" class="news-category">カテゴリー</a>
          </div>
          <h3 class="news-title">
            <a href="#">記事タイトルが入ります。</a>
          </h3>
        </div>
      </div>
    </div>
  </div>
</section>

aタグの位置が変わりました。

.news-info：aタグ → divタグ
.news-category：spanタグ → aタグ
.news-title：中にaタグ

CSSの変更点はこちら。

.news-category {
  transition: opacity .5s; /* じんわり透過 */
}
.news-title {
  margin-left: 10px; /* 記事タイトル左の余白 */
  transition: opacity .5s; /* じんわり透過 */
}
.news-title a {
  color: #333; /* 記事タイトルの文字色 */
  font-size: 26px; /* 記事タイトルのフォントサイズ */
  line-height: 1.5; /* テキストの行間 */
}
.news-title:hover {
  opacity: 0.5; /* ホバーした時に記事タイトルを透過 */
}
.news-category:hover {
  opacity: 0.5; /* ホバーした時に記事タイトルを透過 */
}

主にホバーでの挙動を変えています。

これまではリンク範囲が全体だったのでホバーで背景色を変えましたが、今回は2ヶ所なので、どちらもホバーで透過させてみました。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.