CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

NEWSレイアウト

NEWSレイアウト

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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-leftmargin-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.

まとめ

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

これに関してはいろんなレイアウトやコーディング方法があると思うので、ご自身でもいろいろ試してみて下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作