HTML/CSS 小林 秀樹

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

ABOUTこの記事をかいた人

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

だんだんページが出来てきましたね。前回トップの画像エリアのPC版が完成しました。続けてSP版を作っていきましょう。以下の画像のデザインです。

〜目次〜

文字の調整

文字の調整をします。今回は文字サイズの変更だけなのでシンプルですね。

1
2
3
4
5
6
7
8
9
10
11
style.css
 
@media screen and (max-width:768px) {
  .bigimage__main-catch {
    font-size: 2.4rem;
  }
 
  .bigimage__sub-catch {
    font-size: 1.2rem;
  }
}

外枠の調整

外枠のサイズを調整します。height: 64rem;のままだとスマホなどでは大きいですね。そしてheaderの時と同様に、画面幅が960px以下の時に中の文字が端によらないようbigimageクラスにpaddingを追加します。また、innerクラスのpaddingも合わせて小さくし、文字の位置を整えます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
style.css
 
.bigimage {
  /*省略*/
 
  padding-left: 2rem;
  padding-right: 2rem;
}
 
@media screen and (max-width:768px) {
  .bigimage {
    height: 30rem;
  }
 
  .bigimage__inner {
    padding-top: 10rem;
  }
}

これで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
38
39
40
41
42
43
44
45
46
47
48
49
50
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 class="bigimage" style="background: url(./img/bigimage.jpg) no-repeat center; background-size: cover">
      <div class="bigimage__inner">
        <div class="bigimage__text">
          <div class="bigimage__main-catch">
            html/css Practice
          </div>
          <div class="bigimage__sub-catch">
            〜a common page〜
          </div>
        </div>
      </div>
    </div>
  </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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
* {
  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;
  }
}
 
.bigimage {
  width: 100%;
  height: 64rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
 
.bigimage__inner {
  width: 100%;
  max-width: 96rem;
  height: 100%;
  margin: auto;
  padding-top: 30rem;
}
 
@media screen and (max-width:768px) {
  .bigimage {
    height: 30rem;
  }
 
  .bigimage__inner {
    padding-top: 10rem;
  }
}
 
.bigimage__text {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
 
.bigimage__main-catch {
  display: inline-block;
  font-size: 4.8rem;
  background: #fff;
  padding: 1rem;
}
 
.bigimage__sub-catch {
  display: inline-block;
  font-size: 2rem;
  background: #fff;
  margin-top: 1rem;
  padding: 0.5rem;
}
 
@media screen and (max-width:768px) {
  .bigimage__main-catch {
    font-size: 2.4rem;
  }
 
  .bigimage__sub-catch {
    font-size: 1.2rem;
  }
}

第4回はここまでです。いかがでしたでしょうか。次回はメインコンテンツのエリア、footer（PC版）を制作していきます。

【html/css】よくあるWebページ、結局どう作るの？ 第5回 〜メインコンテンツのエリア、footer（PC版）編〜

2019年2月6日

コメントを残す

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

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

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

ABOUTこの記事をかいた人

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

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