デイトラweb制作上級編パターン2 DAY31~44⑧
nakano
卒業制作課題パターン2 8日目
PC版
スマホ版
ページネーションはwordpressに移行した時に追加する
→ 参考：上級編 DAY31~44⑮
アーカイブページの記事一覧
基本的にはレスポンシブ時のトップページの記事一覧と同じ
デザインカンプとのズレ確認のため今は記事を10個用意（あとでループを使って記事を出力）
HTML
<div class="p-archive__items">
<!-- ここから -->
<a href="#" class="p-archive__item">
<span class="p-archive__item-new">NEW</span>
<div class="p-archive__image-wrapper">
<div class="p-archive__item-image"><img src="./img/top/blog.jpg" alt=""></div>
</div>
<div class="p-archive__item-body">
<span>カテゴリ1</span>
<div class="p-archive__item-title">記事のタイトルが入ります。記事のタイトルが入ります。</div>
<div class="p-archive__item-published">2020.02.14</div>
</div>
</a>
<!-- ここまで10セット -->
</div>CSS
.p-archive__item {
width: 100%;
display: flex;
position: relative;
&:not(:first-child) {
margin-top: 20px;
}
&:hover .p-archive__item-image {
transform: scale(1.1, 1.1);
}
&:hover .p-archive__item-title {
color: #1391E6;
}
}
.p-archive__item-new {
width: 40px;
height: 40px;
color: #fff;
background: #EE5A6D;
font-weight: 700;
border-radius: 50%;
text-align: center;
font-size: 10px;
line-height: (38 / 10);
position: absolute;
left: -8px;
top: -8px;
z-index: 2;
}
.p-archive__image-wrapper {
width: 36.4723467862%;
overflow: hidden;
@include mq('sp') {
width: 39.7%;
}
}
.p-archive__item-image {
// 縦横比を固定
padding-top: 62.7%;
position: relative;
transition: all 0.3s ease 0s;
@include mq('sp') {
padding-top: 75.9%;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
height: 100%;
transition: all 0.3s ease 0s;
}
}
.p-archive__item-body {
padding: 21px 0 0 20px;
width: 100% - 36.4723467862%;
@include mq('tab') {
padding-top: 10px;
}
@include mq('sp') {
width: 100% - 39.7%;
padding-top: 6px;
padding-left: 10px;
}
span {
padding: 6px 12px;
border-radius: 12px;
background: #1391E6;
color: #fff;
font-size: 11px;
@include mq('sp') {
padding: 2px 5px;
border-radius: 10px;
font-size: 10px;
}
}
}
.p-archive__item-title {
font-size: 16px;
line-height: (24 / 16);
margin-top: 13px;
transition: all 0.3s ease 0s;
@include mq('sp') {
font-size: inherit;
margin-top: 6px;
}
}
.p-archive__item-published {
color: #888888;
font-size: 12px;
margin-top: 16px;
@include mq('sp') {
font-size: 11px;
margin-top: 3px;
}
}まとめ
今回も卒業制作課題を進めました。
wordpressに移行することを考えると、どこまで手を付けたら良いのかなぁという疑問が出てきます。
ここら辺の感覚が早く身に付くと作業スピードが上がってうれしいのですが。。。
