デイトラweb制作上級編 DAY31~44⑧
nakano
卒業制作課題 8日目
PC版
スマホ版
苦戦したところ
三角形の作成
CSS三角形作成ツール を使って作成
HTML
<div class="page-service__flow-items">
<div class="page-service__flow-item">
<div class="page-service__flow-step">
<div class="page-service__flow-en font-en">STEP</div>
<div class="page-service__flow-number font-en">01</div>
</div>
<div class="page-service__flow-box flow-box1">
<div class="page-service__flow-box-title">お問い合わせ</div>
<div class="page-service__flow-box-text">お問い合わせフォームより必要事項を誤入力の上、お申し込みください</div>
</div>
</div>
<div class="page-service__flow-item">
<div class="page-service__flow-step">
<div class="page-service__flow-en font-en">STEP</div>
<div class="page-service__flow-number font-en">02</div>
</div>
<div class="page-service__flow-box flow-box2">
<div class="page-service__flow-box-title">ご提案</div>
<div class="page-service__flow-box-text">ご依頼の背景をお伺いし、必要なスキルと習得期間から最適なプランをご提案いたします</div>
</div>
</div>
<div class="page-service__flow-item">
<div class="page-service__flow-step">
<div class="page-service__flow-en font-en">STEP</div>
<div class="page-service__flow-number font-en">03</div>
</div>
<div class="page-service__flow-box flow-box3">
<div class="page-service__flow-box-title">日程調整</div>
<div class="page-service__flow-box-text">研修日数と開始日を調整し、今後の流れ全体の段取りをご提案いたします</div>
</div>
</div>
<div class="page-service__flow-item">
<div class="page-service__flow-step">
<div class="page-service__flow-en font-en">STEP</div>
<div class="page-service__flow-number font-en">04</div>
</div>
<div class="page-service__flow-box flow-box4">
<div class="page-service__flow-box-title">研修開始</div>
<div class="page-service__flow-box-text">研修当日はお約束のお時間の30分前に講師が伺います。</div>
<div class="page-service__flow-box-attention">※キャンセルのご連絡は2日前までにお願いいたします</div>
</div>
</div>
</div>SCSS
.page-service__flow-items {
display: flex;
@include mq('sp') {
display: block;
}
}
.page-service__flow-item {
width: 25%;
@include mq('sp') {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.page-service__flow-step {
color: #FFF400;
display: flex;
align-items: baseline;
margin-bottom: 2px;
@include mq('sp') {
display: block;
margin-bottom: 0;
margin-right: 16px;
}
}
.page-service__flow-en {
font-size: 1.5625vw;
line-height: 1;
@include mq('pc') {
font-size: 20px;
}
@include mq('sp') {
font-size: 20px;
}
}
.page-service__flow-number {
font-size: 3.125vw;
line-height: 1;
margin-left: 8px;
@include mq('pc') {
font-size: 40px;
}
@include mq('sp') {
font-size: 40px;
margin: 0;
}
}
.page-service__flow-box {
padding: 3.59375vw 1.953125vw 1.71875vw 3.90625vw;
// page-service__flow-box / page-service__flow-item
height: 81.974%;
position: relative;
@include mq('pc') {
padding: 44px 25px 21px 47px;
}
@include mq('sp') {
padding: 35px 20px 22px;
width: 73.33vw;
max-width: 480px;
}
}
.flow-box1 {
background: #EDF3F8;
@include mq('sp') {
padding: 20px;
width: 73.33vw;
max-width: 480px;
}
&::after {
position: absolute;
content: "";
right: -1.5625vw;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8.1640625vw 0 8.1640625vw 1.5625vw;
border-color: transparent transparent transparent #EDF3F8;
z-index: 1;
@include mq('pc') {
right: -20px;
border-width: 104.5px 0 104.5px 20px;
}
@include mq('sp') {
right: 0;
top: 100%;
border-style: solid;
border-width: 26.36px 36.667vw 0 36.667vw;
border-color: #EDF3F8 transparent transparent transparent;
}
@include mq('min') {
border-width: 26.36px 240px 0 240px;
}
}
}
.flow-box2 {
background: #DDE8F0;
&::after {
position: absolute;
content: "";
right: -1.5625vw;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8.1640625vw 0 8.1640625vw 1.5625vw;
border-color: transparent transparent transparent #DDE8F0;
z-index: 1;
@include mq('pc') {
right: -20px;
border-width: 104.5px 0 104.5px 20px;
}
@include mq('sp') {
right: 0;
top: 100%;
border-style: solid;
border-width: 26.36px 36.667vw 0 36.667vw;
border-color: #DDE8F0 transparent transparent transparent;
}
@include mq('min') {
border-width: 26.36px 240px 0 240px;
}
}
}
.flow-box3 {
background: #C7DBE9;
&::after {
position: absolute;
content: "";
right: -1.5625vw;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8.1640625vw 0 8.1640625vw 1.5625vw;
border-color: transparent transparent transparent #C7DBE9;
z-index: 1;
@include mq('pc') {
right: -20px;
border-width: 104.5px 0 104.5px 20px;
}
@include mq('sp') {
right: 0;
top: 100%;
border-style: solid;
border-width: 26.36px 36.667vw 0 36.667vw;
border-color: #C7DBE9 transparent transparent transparent;
}
@include mq('min') {
border-width: 26.36px 240px 0 240px;
}
}
}
.flow-box4 {
background: #B0D0E5;
}
.page-service__flow-box-title {
font-size: 1.5625vw;
color: #023E78;
margin-bottom: 1.5625vw;
font-weight: 700;
@include mq('pc') {
font-size: 20px;
margin-bottom: 16px;
}
@include mq('sp') {
font-size: 18px;
text-align: center;
}
}
.page-service__flow-box-text {
font-size: 1.09375vw;
@include mq('pc') {
font-size: inherit;
}
@include mq('sp') {
font-size: inherit;
}
}
.page-service__flow-box-attention {
font-size: 1.09375vw;
color: #E61264;
@include mq('pc') {
font-size: inherit;
}
@include mq('sp') {
font-size: inherit;
}
}・サイズの単位は基本的に「vw」でどの画面でも同じ比で表示されるようにする
・「@include mq('pc')」は画面のサイズが1280px以上の時、「@include mq('min')」は787px以下650px以上の時
→ max-widthで固定した時に三角形がズレないようにするため
画面サイズ1920pxの時 ↓
まとめ
今回も卒業制作課題を進めました。
2週間以内に終わらせる目標に対して進めるペースがかなり怪しいので、残りのページ数を確認したのですがあと7ページみたいです。
ワードプレス化のことも考えると1か月以内に終わるかな？
とりあえずできるだけ急いで仕上げたいと思います！
