HTML/CSS 小林 秀樹

【html/css】よくあるWebページ、結局どう作るの？ 第2回 〜header（SP版）編〜

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月２桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。前回に続いてsp版を作ります。前提として、タブレット用のデザインがない場合を想定します。実際の案件でタブレットのデザインまで用意されている場合が経験上ほとんどなかったので。なので、ブレイクポイント（PC版とSP版を切り替える画面サイズ）は768pxにします。768px以下の時にSP版のデザインが適用されます。SP版のheaderは以下のデザインです。（今回はハンバーガーメニューの機能までは作りません。）

〜目次〜

外枠の調整

まずは、ブレイクポイントを768pxにしたためinnerクラスの幅である960px以下、768px以上の時を特別に考える必要があります。

.header__innerクラスは横幅が96remなので、画面幅がそれ以下の時ははみ出します。ブラウザが横スクロールしてくれるのでそんなに問題はありませんが、せっかくなので１画面に収めましょう。また、ロゴとリンクが端に寄ってしまうのでheaderタグにpaddingを入れます。

1
2
3
4
5
6
7
8
9
10
11
12
13
header {
  /*省略*/
 
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
 
.header__inner {
  width: 100%;
  max-width: 96rem;
 
  /*省略*/
}

このようにheader__innerの幅の指定を変更します。基本はheaderタグの幅と同じになりますが、960px以上にはならなくなります。

ロゴとリンクの調整

次にロゴとリンクを調整します。ロゴは中央揃えに、リンクは非表示にして代わりにメニューアイコンを置きます。
メディアクエリは記事の都合上連続で書いていますが、本来は対象のセレクタごとにPC版スタイルのすぐ下に書いた方が見やすいかなと思います。
例：
header {
　/*スタイル*/
}

@media screen and (max-width:768px) {
　header {
　　/*スタイル*/
　}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
index.html
 
<div class="header__inner">
  <div class="header__logo">
    <!-- 省略 -->
  </div>
 
  <div class="header__nav">
    <!-- 省略 -->
  </div>
 
  <!-- ここから追記 -->
  <div class="header__menu">
<img src="./img/menu.svg" alt="">
  </div>
  <!-- ここまで追記 -->
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
style.css
 
.header__inner {
  /* 省略 */
 
  position: relative;
}
 
@media screen and (max-width:768px) {
  .header__logo {
    margin: auto;
  }
}
 
@media screen and (max-width:768px) {
  .header__nav {
    display: none;
  }
}
 
.header__menu {
  display: none;
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 1.5rem;
  right: 0;
}
 
@media screen and (max-width:768px) {
  .header__menu {
    display: block;
  }
}

ここでポイントなのが、メニューアイコンの配置の仕方です。単純に要素として入れると、その分ロゴが左に寄ります（画像上）。なので、positionプロパティを用いて指定します。そうすることで要素が重なった状態になり、ロゴがきちんと中央に配置されます（画像下）。

これでSP版も完成です！画面幅の変更によってデザインが変わるようになったでしょうか？

完成コードの確認

最後にここまでのコードを載せます。もし何か問題が起こったら参考にしてみてください。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
index.html
 
<!DOCTYPE html>
<html lang="ja">
 
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style/style.css">
</head>
 
<body>
  <header>
<div class="header__inner">
  <div class="header__logo">
<img src="./img/logo.png">
  </div>
  <div class="header__nav">
<a href="#section1" class="nav__item">リンク１</a>
<a href="#section2" class="nav__item">リンク２</a>
<a href="#section3" class="nav__item">リンク３</a>
  </div>
  <div class="header__menu">
<img src="./img/menu.svg" alt="">
  </div>
</div>
 
  </header>
 
  <div class="body">
  </div>
 
  <footer>
  </footer>
</body>
</html>
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
style.css
 
* {
  box-sizing: border-box;
}
 
html {
  font-size: 62.5%;
}
 
body {
  font-size: 1.6rem;
  margin: 0;
}
 
a {
  display: block;
  color: #000;
  text-decoration: none;
}
 
img {
  display: block;
  width: 100%;
  height: auto;
}
 
header {
  width: 100%;
  height: 6rem;
  background: #000;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
 
.header__inner {
  width: 100%;
  max-width: 96rem;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
 
 
.header__logo {
  width: 15rem;
}
 
@media screen and (max-width:768px) {
  .header__logo {
    margin: auto;
  }
}
 
.header__nav {
  width: 25rem;
  display: flex;
  justify-content: space-between;
}
 
@media screen and (max-width:768px) {
  .header__nav {
    display: none;
  }
}
 
.nav__item {
  color: #fff;
  font-size: 2rem;
}
 
.header__menu {
  display: none;
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 1.5rem;
  right: 0;
}
 
@media screen and (max-width:768px) {
  .header__menu {
    display: block;
  }
}

さて、第2回はここまでです。いかがでしたでしょうか。次回はトップの画像エリアを制作していきます。

【html/css】よくあるWebページ、結局どう作るの？ 第3回 〜トップの画像のエリア（PC版）編〜

2019年2月6日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月２桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

NEW POSTこのライターの最新記事