レスポンシブをSassのmixinで爆速＆効率的に進める方法【第12話】

本記事では前回に引き続き課題制作の学習を記録しています。

RaiseTechのWordPress副業コースが気になっている方やプログラミングスクールってどんな感じなのか気になっている方は是非参考にしてもらえると嬉しいです。

[PR] 筆者が受講しているスクールはこちら

RaiseTechはAWS・Java・副業・デザイン・マーケティングに特化し現場レベルの学習ができるエンジニアリングスクールです。カリキュラムはもちろんあらゆるサポートが充実していることも特徴の1つです。

RaiseTechの無料説明会に参加してみる

404 NOT FOUND | 文系女子大生、プログラミング学習始めました。

文系女子大生がプログラミング学習を始めたお話

前回までの進捗状況
RaiseTech課題制作
最後に

前回までの進捗状況

jQueryでホバーしたらサブメニューが出てくるという動きをつけパソコンサイズの模写が完成しました！

このような動きの付け方については前回の記事で紹介しているので参考にしてみてください！

HTML＋CSS＋jQueryでドロップダウンメニュー作り【第11話】

コーディング初心者向け HTMLとCSSとjQueryだけを使った簡単なドロップダウンリストを作成します。実際にプログラミング初心者でも簡単にドロップダウンリストを作ることができた方法についてご紹介しています。

今回からはレスポンシブ化です。これが本当に難しかった…
それでは始めていきましょう！

RaiseTech課題制作

レスポンシブ化とは？

レスポンシブ化とはこのように画面の幅が変わるとサイトのスタイルが変わるように設定することです。
パソコンの画面とスマートフォンの画面の幅は全然違いますからね。サイトを作る上では必須の作業になります。

あちらこちらが変わっていますがまずはどの幅になったら変化が起こるのかを調査してみました。
検証ツールを開いたまま画面の幅を変えると何pxで変わっているかが確認できます。

ちなみに変化が起こるポイントを「ブレイクポイント」と言います。

・1280px
・1260px
・1200px
・1080px
・767px

以上5つのブレイクポイントがありました！変更の幅はとても広かったのですが上から設定していきましょう。

画面幅別の指定方法（メディアクエリ）

画面の幅によってスタイルを変更することを可能にする仕様をメディアクエリと言います。
筆者はProgateでメディアクエリを使ってCSSに書く方法は知っていたのですがSCSSでの記述方法は知らないので調べてみました。

🔎scss メディアクエリ

$△△: 〇〇px;  //△△や××は後で使うのでわかりやすい名前に。
$□□: 〇〇px;  //〇〇にはブレイクポイントを。

@mixin ××{
  @media (max-width: ($△△)) {
    @content;
  }
}
@mixin ☆☆ {
   @media (max-width: ($□□)) {
    @content;
  }
}

このようなテンプレートを発見しました。こちらの記号部分に指定したい数値や名前を入れてSCSSに追記するみたいです。
××と☆☆の部分は呼び出しで使うのでわかりやすい名前にしたほうが良いそうです。

$first: 1290px; // ロゴ横を消す
$second: 1260px; //メニュー余白変え 
$third: 1200px;  //ハンバーガーメニュー 
$fourth:1080px; //メイン下変え
$fifth: 767px; //スマホスタイル

@mixin logo-side {
  @media (max-width: ($first)) {
    @content;
  }
}
@mixin padding {
  @media (max-width: ($second)) {
    @content;
  }
}
@mixin hamburger {
  @media (max-width: ($third)) {
    @content;
  }
}
@mixin main-bottom {
  @media (max-width: ($fourth)) {
    @content;
  }
}
@mixin smart-phone {
  @media (max-width: ($fifth)) {
    @content;
  }
}

ブレイクポイントが多いため長くなりましたが以上をSCSSに追記します。
そしてこれらを呼び出して指定するときは、

セレクタ {
  @include 〇〇{ //〇〇は@mixinの後ろで指定した文字
    プロパティ: 値;
  };
}

こちらのテンプレートで必要なところを書き換えて指定していくようです。
メディアクエリの書き方が長くなりましたが実際に始めていきましょう。

ブレイクポイント1290pxのレスポンシブ化

上が1290px以上の時で、下が1290px以下の時です。赤枠の部分が消えたことがわかりますね。要素を消すときは、

display: none;

で消すことができます。ではこれを1290pxになったら消すようにメディアクエリで指定しましょう。

.header-logo{
 a{
  p{
    padding-left: 16px;
    font-size: 1.4rem;
         :
//追加
    @include logo-side{
     display: none;
    };
//追加ここまで
  } //pセレクタの閉じカッコ
 } //aセレクタの閉じカッコ
} //.header-logoの閉じカッコ

@include以下が画面幅がlogo-side(1290px以下)の時だけ効くスタイルというように指定しました。

しっかり反映されましたね。それでは次のブレイクポイントへ移りましょう。

ブレイクポイント1260pxのレスポンシブ化

同じく上が1260px以上1290px以下の時の画面、下が1260px以下の時の画面です。
このブレイクポイントでは右メニューの左右余白が若干減少しているのでそちらを指定します。

.drop-btn{
 a{
   @include padding{
    padding: 0px 10px;
  };
 }
}

.last-btn{
 a{
  @include padding{
    padding: 0px 10px;
  };
 }
}

フロント側はこのようになりました。

ブレイクポイント1200pxのレスポンシブ化

非常に厄介なことになっています。

・ヘッダー高さの変更
・ヘッダーロゴimgの大きさ変更
・右メニューが消える
・ハンバーガーメニューに出現
・ハンバーガークリックでサブメニュー出現

この日はすぐにできる上3つだけレスポンシブ化を行いました。

//ヘッダー高さ変更
header{
 height: 70px;
     :
//追加
  @include hamburger{
    height: 50px;
  };
//追加ここまで
}

//main
.layer3{
  padding-top: 70px;
        :
//追加
   @include hamburger{
     padding-top: 50px;
  };
//追加ここまで
}

メイン部分の修正を忘れると

黄色い部分に余白ができてずれます。
周辺のスタイルにも影響を与えるレスポンシブは気をつけないとですね。

//ヘッダーロゴimgの大きさ変更
.header-logo
 a{
   height: 70px;
   padding-left: 19px;
        :
//追加
   @include hamburger{
     height: 50px;
     padding-left: 13px;
   };
//追加ここまで
 img{
   @include hamburger{
     height: 30px;
    };
  }
}

//右メニューを消す
.right{
//追加
  @include hamburger{
    display: none;
  };
//追加ここまで
}

複雑なように見えますが、{ } のペアを見失わないように気をつけて@includeを追記します。

フロント側を確認してみましょう。