仕事で「ニュースリスト」を実装したので、せっかくなのでメモに残しておくことにしました。
レスポンシブにも対応しているので、是非真似してコーディングしたりコピペしてみてください。
【CSS】ニュースリストの作り方
完成形はこちらです。
HTML
<div class="newslist">
<ul>
<li>
<div class="newslist-box">
<time datetime="2021.2.1">2021.02.01</time>
<p>MENU</p>
</div>
<p class="newslist-text">
<a href=""
>テキストが入ります。テキストが入ります。テキストが入ります。</a
>
</p>
</li>
<li>
<div class="newslist-box">
<time datetime="2021.2.1">2021.02.01</time>
<p>MENU</p>
</div>
<p class="newslist-text">
<a href=""
>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a
>
</p>
</li>
<li>
<div class="newslist-box">
<time datetime="2021.2.1">2021.02.01</time>
<p>MENU</p>
</div>
<p class="newslist-text">
<a href=""
>テキストが入ります。テキストが入ります。テキストが入ります。</a
>
</p>
</li>
</ul>
</div>
CSS
.newslist {
max-width: 800px;
margin: 0 auto;
background-color: #efefef;
}
.newslist ul {
padding-left: 0;
}
.newslist li {
display: flex;
align-items: flex-start;
padding: 20px 0;
border-top: 2px solid black;
}
.newslist li:last-child {
border-bottom: 2px solid black;
}
.newslist .newslist-box {
display: flex;
align-items: center;
padding-left: 10px;
}
.newslist .newslist-box p {
padding: 5px 10px;
background-color: #000;
color: #fff;
margin: 0 15px;
}
.newslist .newslist-text {
text-align: left;
line-height: 1.5;
}
.newslist .newslist-text a {
text-decoration: none;
color: black;
}
/* レスポンシブ */
@media (max-width: 600px) {
.newslist {
padding: 0 10px;
background-color: #fff;
}
.newslist li {
flex-direction: column;
}
.newslist .newslist-box {
padding-left: 0;
width: 100%;
justify-content: space-between;
margin-bottom: 10px;
}
}
