この記事に関しては、第2弾の記事を書きましたので「第2弾【CSS・レスポンシブ】日付とカテゴリとタイトルを横並びにして新着情報を作る」をご覧ください。（2021年7月25日）
過去に「【CSS】レスポンシブな「dl dt dd」を作る」という記事を書きましたが、今回は日付とタイトルの間にカテゴリ名を入れた形式を作りました。
◆まずはデモページをご覧ください。
デモページを見る
解説です
◆HTML
ソース
<ul class="newsList">
<li>2019年09月10日</li>
<li>カテゴリ名</li>
<li><a href="#">ここにタイトルのテキストが入ります。ここにタイトルのテキストが入ります。</a></li>
</ul>
単純に「ul li」の作りです。2つ目、3つ目と増やす場合も上記のものをコピーして使います。
◆CSS
ソース
ul.newsList {
display: flex;
flex-flow: row wrap;
border-bottom: 1px dotted #999;
padding: 10px 0;
}
ul.newsList li {
display: block;
margin: 10px 10px;
}
ul.newsList li:nth-child(-n + 3) {
flex-basis: 130px;
}
ul.newsList li:nth-child(2) {
color: #fff;
font-size: 12px;
padding: 5px 10px;
text-align: center;
background-color: #3c2fb7;
}
ul.newsList li:nth-child(3) {
flex-basis: auto;
}
部分的に解説していきます。
ソース
display: flex;
flex-flow: row wrap;
border-bottom: 1px dotted #999;
padding: 10px 0;
}
「ul.newsList」では、「ul」に対して「flex」を指定します。これにより「li」要素が横並びになり、画面の横幅が小さくなると横並びが解除されます。
ソース
flex-basis: 130px;
}
「nth-child(-n + 3)」は、「li」要素の最初の2つを指定する記述です。
「flex-basis」は横幅を指定する記述で、1番目の日付と2番目のカテゴリ名の幅を固定しています。
ここの数値は状況に応じて変更してください。
ソース
ul.newsList li:nth-child(2) {
color: #fff;
font-size: 12px;
padding: 5px 10px;
text-align: center;
background-color: #3c2fb7;
}
ul.newsList li:nth-child(3) {
flex-basis: auto;
}
「nth-child(2)」は、2番目を指定する記述で、数字を「3」にすると3番目の指定となります。
2番目のカテゴリ名で装飾をして、3番目のタイトルは、横幅を可変にしています。
以上となります。
今回は、画面の横幅に応じて横並びが解除されるので、レスポンシブ用の「メディアクエリ」は書きませんでした。
タブレットやスマホごとに、細かいレイアウトを行いたい場合は「メディアクエリ」で調整すると良いかと思います。
ファイル一式も用意しましたので、希望の方はファイルをダウンロードしてください。
【 css38.zip（2KB） 】