CSS Web制作

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

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

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

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

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-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セクションのコーディング方法について解説してきました。

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作