HTML/CSS 小林 秀樹

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

ABOUTこの記事をかいた人

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

こんにちは。前回に続いて、header部分を作っていきます。以下の画像の部分です。PC版を作ってからレスポンシブにしていきます。

〜目次〜

外枠の作成

まずは一番外側の要素です。背景黒、横幅100%、縦幅6remにします。headerタグに対してスタイルを書きます。

1
2
3
4
5
6
7
style.css
 
header {
  width: 100%;
  height: 6rem;
  background: #000;
}

この次が今回のポイントです。どのようにロゴと３つのリンクを配置するのかについて詳しく書いていきます。

僕がよくやるのは、innerクラスを作って中央寄せする方法です。innerクラスのサイズを外側より小さくして両サイドの余白を確保します。

1
2
3
4
5
6
index.html
 
<header>
  <div class="header__inner">
  </div>
</header>
1
2
3
4
5
6
7
style.css
 
.header__inner {
  width: 96rem;
  height: 100%;
  margin: auto;
}

こうすると次の画像のような状態になります。

これで余白が確保できていますね。

余白を入れる方法として、他にもpaddingを使う方法もあります。上の方法とはブラウザ幅が変わった時に中の要素の動きに違いが出ます。画像上がinnerクラスを使った場合、下がpaddingで余白を作った場合です。

このような違いになります。innerクラスはそのdivの幅が固定なので、ロゴとリンクの間隔は保たれ余白が縮まります。
paddingで余白を作った場合は、余白が固定なのでロゴとリンクの間隔が縮まります。
今回はリンクの要素の幅がそれほどないので大きな問題にはなりませんが、長くなった場合に下の方法だと文字が２行になったりして見栄えが良くないので基本は上の方法にしています。とはいえデザインによってどうすればいいか変わってくるので、場合に合わせてコーディングしましょう。

ロゴ、リンクの作成

それではロゴとリンクを入れていきましょう。display: flexを使う方法がおすすめです。header__innerの中に２つのdivを用意して、それをjustify-content: space-betweenで両端に寄せます。また、縦方向にも中央ぞろえをしておきます。

1
2
3
4
5
6
7
8
9
10
11
index.html
 
<div class="header__inner">
  <!-- ここから追記 -->
  <div class="header__logo">
  </div>
 
  <div class="header__nav">
  </div>
  <!-- ここまで追記 -->
</div>
1
2
3
4
5
6
7
8
9
style.css
 
.header__inner {
  /*省略*/
 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

続いて中の要素を入れます。リンク先は一旦仮のものを入れます。
リンク部分もdisplay: flexで横並べにしておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="header__inner">
  <div class="header__logo">
    <!-- ここから追記 -->
    <img src="./img/logo.png">
    <!-- ここまで追記 -->
  </div>
 
  <div class="header__nav">
    <!-- ここから追記 -->
    <a href="#" class="nav__item">リンク１</a>
    <a href="#" class="nav__item">リンク２</a>
    <a href="#" class="nav__item">リンク３</a>
    <!-- ここまで追記 -->
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
style.css
 
.header__logo {
  width: 15rem;
}
 
.header__nav {
  width: 25rem;
  display: flex;
  justify-content: space-between;
}
 
.nav__item {
  color: #fff;
  font-size: 2rem;
}

これでPC版は完成です！以下の画像のようになっていますか？

完成コードの確認

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

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
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>
 
  </header>
 
  <div class="body">
  </div>
 
  <footer>
  </footer>
</body>
</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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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;
}
 
.header__inner {
  width: 96rem;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.header__logo {
  width: 15rem;
}
 
.header__nav {
  width: 25rem;
  display: flex;
  justify-content: space-between;
}
 
.nav__item {
  color: #fff;
  font-size: 2rem;
}

第1回はここまでです。いかがでしたでしょうか。次回はheaderのSP版を制作していきます。

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

2019年2月6日

コメントを残す

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

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

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

ABOUTこの記事をかいた人

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

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