デイトラweb制作上級編 DAY31~44⑦

卒業制作課題 7日目

苦戦したところ
要素同士を重ねる 2回目
01と03は同じ


HTML
<div class="page-service__item">
<div class="page-service__item-inner">
<div class="page-service__content content-number1">
<div class="page-service__title">
<div class="page-service__jp">ビジネス英語研修</div>
<div class="page-service__en font-en">Business English Training</div>
</div>
<div class="page-service__text">
ビジネス英会話はこれからの時代、すべてのビジネスパーソンが学ぶべき必須スキルと考えおります。
<br>
海外にビジネス展開する際にはもちろんのこと、日本国内でも英会話コミュニケーションができることによってチャンスが掴める場面があります。
<br>
<br>
担当する講師は皆、豊富な海外ビジネス経験者であり、ティーチングスキル、コミュニケーションスキル、人間性に加えて採用後には厳しいトレーニング期間を設けているので、様々な職業や職種に合ったスキルまで身につけられます。
<br>
また、必要に応じてマンツーマン形式のレッスンを行うことも可能なので、時間の限り話すことができ効率よく上達することができます。
</div>
<div class="page-service__price">
<div class="page-service__price-item">
<dt>対象</dt>
<dd>ビジネスの中で使える英語コミュニケーション能力が必要な方</dd>
</div>
<div class="page-service__price-item">
<dt>費用</dt>
<dd>時間内容要相談</dd>
</div>
</div>
<div class="page-service__button"><a href="#">お申し込みはこちら</a></div>
<div class="page-service__img"><img src="./img/img-service-detail01.png" alt=""></div>
</div>
</div>
</div>
SCSS
.page-service__program-item {
&:not(:first-child) {
margin-top: 331px;
}
}
// これに対して「番号」と「画像」を付ける
.page-service__program-content {
padding: 88px 40px 60px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
max-width: 590px;
width: 46.09375vw;
position: relative;
}
// 番号
.content-number1 {
&::after {
position: absolute;
content: "01";
color: $color-main;
top: -46px;
left: 58px;
font-size: 100px;
line-height: 1;
font-style: italic;
font-family: $font-en;
font-weight: 500;
}
}
// 画像
.page-service__program-img {
position: absolute;
content: "";
top: 60px;
right: -93%;
max-width: 610px;
width: 47.65625vw;
padding-right: 50px;
z-index: -1;
}
02だけ画像とボックスが逆

HTML
<div class="page-service__program-item item-number2">
<div class="page-service__program-item-inner inner-number2">
<div class="page-service__program-content content-number2">
<div class="page-service__program-title">
<div class="page-service__program-jp">異文化コミュニケーション</div>
<div class="page-service__program-en font-en">Cross-cultural communication</div>
</div>
<div class="page-service__program-text">
急速にグローバル化が進んでおり、ビジネスの場面に限らず様々な文化的背景を持つ者同士の交流はもはや日常的な光景となりました。
<br>
言語や文化が異なる相手を理解することで世界が広がり、新たなビジネスチャンスに巡り会うことは少なくありません。
<br>
多様な価値観を尊重しながら言葉の垣根を越え、コミュニケーションの力で他者を理解しようとする「異文化コミュニケーション」はこれからの時代、さらに重要となるスキルと言えます。
<br>
<br>
コミュニケーションの基本となる日本語と英語の力を鍛えつつ、アプローチする国の文化を同時に学び、スムーズなビジネス展開をサポートいたします。
</div>
<div class="page-service__program-price">
<div class="page-service__program-price-item">
<dt>対象</dt>
<dd>ビジネスの中で使える英語コミュニケーション能力が必要な方</dd>
</div>
<div class="page-service__program-price-item">
<dt>費用</dt>
<dd>時間内容要相談</dd>
</div>
</div>
<div class="page-service__program-button"><a href="#">お申し込みはこちら</a></div>
<div class="page-service__program-img img-number2"><img src="./img/img-service-detail02.png" alt="">
</div>
</div>
</div>
</div>
SCSS
→ 基本的に上書き
.content-number2 {
&::after {
position: absolute;
content: "02";
color: $color-main;
top: -46px;
right: 44px;
font-size: 100px;
line-height: 1;
font-style: italic;
font-family: $font-en;
font-weight: 500;
}
}
.item-number2 {
margin-top: 375px;
}
.inner-number2 {
margin-left: 0;
margin-right: auto;
padding-left: 0;
padding-right: 90px;
}
.content-number2 {
margin-left: auto;
}
.img-number2 {
position: absolute;
content: "";
top: 60px;
left: -93%;
width: 47.65625vw;
padding-left: 50px;
padding-right: 0;
}
まとめ
今回も卒業制作課題を進めました。
時間が取れなかったのもありますが前回ほどは進まず、1つのセクションを仕上げて終わりました。
今日手を付けたページは6日目の時に比べると少し難しいデザインになっています。
仕方ないと思うところもありますが、次に同じようなコーディングをするときは気を付けたいですね。