スタイリングの準備をする
objectフォルダ内のprojectフォルダ内に_fv.scssファイルを作成します。
そして、style.scssに_fv.scssを呼び出すよう文面を追加します。
style.scss
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
/*--------------------------------------*
* layout
*--------------------------------------*/
@use "./layout/header";
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
+ /*-------------------
+ * project
+ -------------------*/
+ @use "./object/project/fv";
HTMLを振り返る
まずHTMLの構造を振り返っておきます。index.htmlのp-fv部分をスタイリングしていきます。
index.html
<!-- .p-fv -->
<section class="p-fv">
<div class="c-inner">
<figure class="p-fv__content">
<figcaption>
<h1>
<span class="u-inline-block"
><span class="text-100">LP</span>をつくって学ぶ</span
><span class="u-inline-block"
><span class="text-96">Sass</span
><span class="text-80">×</span
><span class="text-96">FLOCSS</span></span
>
</h1>
<p>
現場で頻出のSassの使い方からFLOCSSの記法までを<br />LPをつくりながら学ぶ電子書籍！
</p>
</figcaption>
<img src="./asset/img/fv-book.webp" alt="" />
</figure>
</div>
</section>
<!-- /.p-fv -->
p-fv/p-fv__contentのスタイリング
まず、p-fv部分のスタイリングからはじめます。背景色とテキストカラーを設定しておきましょう。
object/project/_fv.scss
@use "./../../foundation/variable" as *;
.p-fv {
background-color: $color-main;
color: $color-base;
}
続いて、p-fv__content部分のスタイリングです。PCではキャッチコピーと本の画像の横並びになっているので、flexboxを使っていきましょう。
object/project/_fv.scss
@use "./../../foundation/variable" as *;
.p-fv {
// 中略
&__content {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: center;
gap: 18px;
padding: 40px 0;
max-width: 100%;
font-weight: bold;
}
}
続いて、p-fv__content内の各要素のスタイリングです。font-sizeやwidthなどを設定していきましょう。
object/project/_fv.scss
@use "./../../foundation/variable" as *;
.p-fv {
// 中略
&__content {
// 中略
figcaption {
flex: 2;
}
h1 {
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: 40px;
.text-100 {
font-size: 5rem;
}
.text-96 {
font-size: 4.8rem;
}
.text-80 {
font-size: 4rem;
}
}
p {
font-size: 2.2rem;
}
img {
flex: 1;
width: 250px;
box-shadow: -6px 6px 10px -2px #555, 0 0 3px #555;
border-radius: 3px;
}
}
}
PCレイアウト時のスタイリング
続いてPCレイアウト時のスタイリングをしていきます。flexboxの並び方を変えつつ、font-sizeをPC仕様に変更していきます。
object/project/_fv.scss
@use "./../../foundation/variable" as *;
.p-fv {
// 中略
@include breakpoint(tablet) {
}
@include breakpoint(pc) {
&__content {
flex-direction: row;
padding: 60px 0;
figcaption {
flex: 2;
}
h1 {
font-size: 5.6rem;
.text-100 {
font-size: 10rem;
}
.text-96 {
font-size: 9.6rem;
}
.text-80 {
font-size: 8rem;
}
}
p {
font-size: 2.4rem;
}
}
}
}
_display.scssのスタイリング
ここで、u-inline-blockが登場したので、object/utilityフォルダ内に_display.scssファイルを作成します。
作成した_display.scssファイルをstyle.scssにも反映させておきましょう。
style.scss
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
/*--------------------------------------*
* layout
*--------------------------------------*/
@use "./layout/header";
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
/*-------------------
* project
-------------------*/
@use "./object/project/fv";
+ /*-------------------
+ * object
+ -------------------*/
+ @use "./object/utility/display";
では、_display.scssにdisplay:inline-block;を設定します。
object/utility/_display.scss
.u-inline-block {
display: inline-block;
}
こうすると、レスポンシブ対応する際にちょうどいい感じに改行がききます。
最終的なコード
最終的に_fv.scssのコードとしては以下のようになります。次からは各sectionのスタイリングをしていきます！
object/project/_fv.scss
@use "./../../foundation/variable" as *;
.p-fv {
background-color: $color-main;
color: $color-base;
&__content {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: center;
gap: 18px;
padding: 40px 0;
max-width: 100%;
font-weight: bold;
figcaption {
flex: 2;
}
h1 {
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: 40px;
.text-100 {
font-size: 5rem;
}
.text-96 {
font-size: 4.8rem;
}
.text-80 {
font-size: 4rem;
}
}
p {
font-size: 2.2rem;
}
img {
flex: 1;
width: 250px;
box-shadow: -6px 6px 10px -2px #555, 0 0 3px #555;
border-radius: 3px;
}
}
@include breakpoint(tablet) {
}
@include breakpoint(pc) {
&__content {
flex-direction: row;
padding: 60px 0;
figcaption {
flex: 2;
}
h1 {
font-size: 5.6rem;
.text-100 {
font-size: 10rem;
}
.text-96 {
font-size: 9.6rem;
}
.text-80 {
font-size: 8rem;
}
}
p {
font-size: 2.4rem;
}
}
}
}