デイトラweb制作中級編 DAY16
nakano
ニュース系のコーディング
①HTML
section 「.news」
<section class="news section">
<div class="news__inner inner">
<div class="news__head section-title">News</div>
<div class="news__items">
<div class="news__item">
<div class="news__meta">
<div class="news__date">2019-01-30</div>
<div class="news__label"><a href="">ラベル1</a></div>
</div>
<div class="news__title"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
</div>
<div class="news__item">
<div class="news__meta">
<div class="news__date">2019-01-30</div>
<div class="news__label"><a href="" class="is-blue">ラベル2</a></div>
</div>
<div class="news__title"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
</div>
<div class="news__item">
<div class="news__meta">
<div class="news__date">2019-01-30</div>
<div class="news__label"><a href="" class="is-red">ラベル3</a></div>
</div>
<div class="news__title"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
</div>
<div class="news__item">
<div class="news__meta">
<div class="news__date">2019-01-30</div>
<div class="news__label"><a href="">ラベル1</a></div>
</div>
<div class="news__title"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
</div>
<div class="news__item">
<div class="news__meta">
<div class="news__date">2019-01-30</div>
<div class="news__label"><a href="">ラベル1</a></div>
</div>
<div class="news__title"><a href="">ニュースニュースニュースニュースニュースニュースニュースニュース</a></div>
</div>
</div>
<div class="news__more"><a href="">more</a></div>
</div>
</section>「section-title」の追加
<div class="card__head section-title">Card</div>
→ DAY13
<div class="news__head section-title">News</div>
→ 今回
②SCSS「.news」~ 「.news__item」
.news {
padding: 100px 0 120px;
background: #fff;
@include mq('sp') {
padding: 50px 0 60px;
}
}
.news__items {
margin: 80px auto 0;
width: 800px;
max-width: 100%;
@include mq('sp') {
margin-top: 40px;
}
}
.news__item {
display: flex;
padding: 20px 0 12px;
&:not(:first-child) {
border-top: 1px solid #707070;
}
@include mq('sp') {
display: block;
}
}「display: flex;」の解除
display: block;
レスポンシブ対応でパソコン版 → スマホ版に切り替えたいときに使う
③SCSS「.news__meta」~ 「.news__title」
.news__meta {
display: flex;
// 105px + 80px（date + label）
width: 185px;
}
.news__date {
width: 105px;
padding-top: 3px;
}
.news__label {
a {
display: inline-block;
width: 80px;
height: 32px;
line-height: 32px;
color: #fff;
text-align: center;
background: #666;
border-radius: 4px;
font-weight: 700;
text-decoration: none;
&.is-blue {
background: #3F51B5;
}
&.is-red {
background: #E81919;
}
}
}
.news__title {
width: calc(100% - 185px);
padding-left: 20px;
padding-top: 3px;
a {
text-decoration: none;
line-height: (20 / 16);
}
@include mq('sp') {
width: 100%;
padding-top: 0;
margin-top: 6px;
}
}
「display: flex;」利用時の幅の取り方
・%で指定する方法
・固定値 + calcで指定する方法 ← 今回はこっち
④SCSS「.news__more」
.news__more {
margin-top: 60px;
text-align: center;
a {
text-decoration: none;
color: #E81919;
font-weight: 700;
padding-right: 14px;
position: relative;
&::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 11px;
background: url(../img/news-arrow.png) no-repeat center center / contain;
}
}
@include mq('sp') {
margin-top: 30px;
}
}まとめ
今回はニュース系のコーディングをしました。
今まで学習したことを活かせれば動画を見なくてもある程度、形にはできそうだったのですが最後までは行けず。。。
それでも、手ごたえは感じたのでダメだったところを中心にもう一度見直してみたいと思います。
