スタイリングの準備をする
layoutフォルダ内に_header.scssファイルを作成します。
そして、style.scssに_header.scssを呼び出すよう文面を追加します。
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
+ /*--------------------------------------*
+ * layout
+ *--------------------------------------*/
+ @use "./layout/header";
そうすると、_header.scssの内容がstyle.cssやstyle.min.cssに反映されるようになるので、早速_header.scssでスタイリングをしていきましょう。
HTMLを振り返る
まず、HTMLの構造を忘れているかと思うので振り返っておきます。
<!-- .l-header -->
<header class="l-header">
<div class="c-inner">
<div class="l-header__content">
<a href="" class="l-header__logo"
><img src="./asset/img/header-logo.svg" alt=""
/></a>
<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
</div>
</div>
</header>
<!-- /.l-header -->
構造としては、l-header__contentの中で横並びさせるというシンプルな構造になっています。
l-header部分のスタイリング
まず、l-header部分。
ここは固定させておきたいので、position:sticky; top:0;でスクロールしても追従させるようにさせます。
背景色はベースカラーを設定して、z-index:1;を設定しましょう。
.l-header {
position: sticky;
top: 0;
background-color: $color-base;
z-index: 1;
}
c-innerのスタイリング
l-header内のコンテンツ部分をスタイリングする前に、それらを囲んでいるc-innerクラスをスタイリングしていきましょう。
c-innerは、ヘッダーだけでなく他のセクションなどにも使われる共通の要素なので、objectのなかのComponentにあたります。
では早速c-innerをスタイリングする準備としてobject/component内に_inner.scssを作成します。
作成した_inner.scssをstyle.scssで呼び出していきましょう。
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
/*--------------------------------------*
* layout
*--------------------------------------*/
@use "./layout/header";
+ /*--------------------------------------*
+ * object
+ *--------------------------------------*/
+ /*-------------------
+ * component
+ -------------------*/
+ @use "./object/component/inner";
準備が整ったところで、_inner.scssのスタイリングをおこなっていきます。
スタイリングする内容としては、大画面で表示したときの最大幅やコンテンツの余白などです。
.c-inner {
max-width: 1220px;
margin: 0 auto;
padding: 10px 30px;
}
l-header__content/l-header__logoのスタイリング
続いて、l-header内のコンテント部分やロゴ部分のスタイリングをしていきます。
まずl-header__contentは、ヘッダーのロゴとボタンを横並べ中央揃えにする必要があるので、flexboxを使って横並べしていきます。
@use "./../foundation/variable" as *;
.l-header {
// 中略
&__content {
display: flex;
justify-content: space-between;
align-items: center;
}
}
flexboxは書き方が混合しがちでよく間違えそうになりますが、Chromeの検証ツールを使えば視覚的に設定できるのでぜひ使ってみてください！
検証ツールの画面
では、続いてl-header__logo部分のスタイリングです。
スマホ時にロゴ画像が大きくなりすぎないようにmax-widthを当てておきます。
@use "./../foundation/variable" as *;
.l-header {
// 中略
&__content {
// 中略
}
&__logo {
display: inline-block;
max-width: 40%;
}
}
c-buttonのスタイリング
ヘッダーのボタン部分のスタイリングを行っていきます。
ボタンもinnerと同様に他のセクションでも使うのでobject/component内で扱います。
object/componentフォルダ内に、_button.scssファイルを作成します。
で、style.scssにも反映させていきます。
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
/*--------------------------------------*
* layout
*--------------------------------------*/
@use "./layout/header";
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
+ @use "./object/component/button";
@use "./object/component/inner";
では、c-buttonのスタイリングをしていきます。
インライン要素であるaタグに直接クラスを付けているので、インラインブロック要素としてpaddingやborderを設定していきます。
@use "./../../foundation/variable" as *;
.c-button {
display: inline-block;
padding: 3px 20px;
color: $color-base;
background-color: $color-accent;
border: solid 2px $color-accent;
border-radius: 50px;
font-weight: bold;
text-decoration: none;
&:hover {
color: $color-accent;
background-color: $color-base;
}
}
こうすると、以下のようなデザインのボタンになるかと思います。
最終的な_header.scssのコード
最終的に、_header.scssは以下のようなコードになります。
@use "./../foundation/variable" as *;
.l-header {
position: sticky;
top: 0;
background-color: $color-base;
z-index: 1;
&__content {
display: flex;
justify-content: space-between;
align-items: center;
}
&__logo {
display: inline-block;
max-width: 40%;
}
}
では、続いてp-fv部分のスタイリングに移っていきます！