前回は上記の記事を見てね。

さて今回は、CSSをやっていきましょうか。

CSSでレスポンシブ対応

今回の流れ

  1. CSS全体像
  2. 全体の設定
  3. ヘッダー部分
  4. ハンバーガーメニュー部分
  5. レスポンシブ部分

CSS全体像

まず、『Hello』フォルダに『master.css』ファイルを作ってね。

Helloフォルダ階層
Hello/
┣ index.html
master.css

さて、ここからCSSをやっていくけど、ちょっと長いから、GitHubに全体像を置いとくね。
コピペしてもいいんだけど、理解するために全て見てみよう。

全体の設定

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: fantasy;
  color: #fafafa;
}

a {
  text-decoration: none;
}

さて、まずは全体の設定だね。
『*』っていうのは、全てのタグを対象にするって意味。

まあ、2、3行目の『margin』『padding』の値を0にしないと変なスキマができたりするから、どのCSSを書く時にも必要になってくるよ。

ヘッダー部分

header {
  background-color: #333;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 100px;
  height: 60px;
}

.header-nav {
  display: flex;
  background-color: #333;
}

.nav-list {
  margin: 0 20px;
  font-size: 20px;
  font-weight: bold;
}

.nav-list:hover {
  color: tomato;
}

はい、ここで注目してほしいのは『.container』『.header-nav』だね。

ここでは『display: flex』っていうの使ってるんだけど、まあ簡単に言えば全て横方向に並べられる
注意としては、1段階下のタグにしか効かないから今回は、2回使ってる。

『justify-content: space-between』で横になったタグを自動で調整してくれて
『align-items: center;』で上下中央に自動で調整されるから、今後もすごく使うようになるよ。

 ヘッダー部分ができたら、『height: 60px』の数値を80pxとか120pxとかに変えると、勝手に調整されて、きれいなヘッダー部分ができる

よく使うセット

  • display: flex
  • justify-content: space-between
  • align-items: center

ハンバーガーメニュー部分

.hamburger {
  display: none;
  width: 32px;
  height: auto;
  cursor: pointer;
}

.hamburger div {
  background-color: #fafafa;
  border-radius: 20px;
  padding: 2px 5px;
  margin: 4px 0;
}

.hamburger p {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}

次は、ハンバーガーメニュー部分。

ハンバーガーメニュー詳細

  • .hamburger・・・メニューの大きさを決める
  • .hamburger div・・・横棒3本を作る
  • .hamburger p・・・pタグ文字の大きさとかの調整

横棒作るときに、他のclassを用意して調整すれば真ん中の横棒だけ短くするとか、オリジナルのハンバーガーメニューが作れるようになるから挑戦してみて。

ちなみに、ハンバーガーメニューはパソコンでは表示させたくないんだよね。
だから、2行目で『display: none』として表示させない設定にしてるから覚えておいてね。

レスポンシブ部分

@media screen and (max-width: 900px) {
  .hamburger {
    display: block;
  }

  .header-nav {
    display: none;
    position: absolute;
    flex-direction: column;
    top: 60px;
    right: 0;
    width: 100%;
    height: auto;
  }

  .active {
    display: flex;
  }

  .nav-list {
    text-align: center;
    margin: 20px 0;
    width: 100%;
  }
}

さて、最後とうとうレスポンシブ部分を作っていこうか。

これはまず『max-width: 900px』900px以下になったら上記のコードを実行してね、っていうこと。

Width設定内容
max-width:○○px○○px以下になったらコードを実行
min-width:○○px○○px以上になったらコードを実行

次にさっきのハンバーガーメニューを表示させて、今まで右側にでてたリンクを消してねって設定。

さっきと違って、リンクは縦に戻したいから『flex-direction: column』で縦に戻してるよ。

気を付けてほしいのが『.active』
「どこにもHTMLで表示されてないじゃん」って気づいたあなたはすごい。

これは次の記事で紹介するJavaScriptで使うから今はとりあえず書いておいて。

 『.active』を使うためにJavaScript書くことになる重要な役割

今回はここまで。
最後JavaScriptだね、たった6行で終わるから挑戦してみて。

人気記事【必読】"見やすく修正しやすいコード"につながる本『リーダブルコード』