ホームページでよく見るのが、このようなレイアウト。
NEWSレイアウト
複雑なデザインではありませんが、実際にコーディングしようとすると迷ってしまうかと思います。
今回は、このNEWSセクションのコーディング方法を解説していきます。
ただし、NEWSセクションのコーディング方法はいろいろあるので、今回はその一例と思って下さい。
（有料になっていたらすいません🙇♂️）
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.
まとめ
今回は、NEWSセクションのコーディング方法について解説してきました。
これに関してはいろんなレイアウトやコーディング方法があると思うので、ご自身でもいろいろ試してみて下さい。
以上になります。
