HTML・CSSのline-height

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Progate</title>
7    <link rel="stylesheet" href="stylesheet.css">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
10  </head>
11  <body>
12    <header>
13      <div class="container">
14        <div class="header-left">
15          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
16        </div>
17        
18        <div class="header-right">
19          <a href="#">レッスン</a>
20          <a href="#">新規登録</a>
21          <a href="#">ログイン</a>
22        </div>
23        <span class = "fa fa-bars"></span>
24      </div>
25    </header>
26    <div class="top-wrapper">
27      <div class="container">
28        <h1>LEARN TO CODE.</h1>
29        <h1>LEARN TO BE CREATIVE.</h1>
30        <p>Progateはオンラインプログラミング学習サービスです。</p>
31        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
32        <div class="btn-wrapper">
33          <a href="#" class="btn signup">新規登録はこちら</a>
34          <p>or</p>
35          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
36          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
37        </div>
38      </div>
39    </div>
40    <div class="lesson-wrapper">
41      <div class="container">
42        <div class="heading">
43          <h2>Learn Where to Get Started!</h2>
44        </div>
45        <div class="lessons">
46          <div class="lesson">
47            <div class="lesson-icon">
48              <img src="https://prog-8.com/images/html/advanced/html.png">
49              <p>HTML & CSS</p>
50            </div>
51            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
52          </div>
53          <div class="lesson">
54            <div class="lesson-icon">
55              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
56              <p>jQuery</p>
57            </div>
58            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
59          </div>
60          <div class="lesson">
61            <div class="lesson-icon">
62              <img src="https://prog-8.com/images/html/advanced/ruby.png">
63              <p>Ruby</p>
64            </div>
65            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
66          </div>
67          <div class="lesson">
68            <div class="lesson-icon">
69              <img src="https://prog-8.com/images/html/advanced/php.png">
70              <p>PHP</p>
71            </div>
72            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
73          </div>
74        </div>
75        
76      </div>
77    </div>
78    <div class="message-wrapper">
79      <div class="container">
80        <div class="heading">
81          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
82          <h3>Let's learn to code, learn to be creative!</h3>
83        </div>
84        <span class="btn message">さっそく開発する</span>
85      </div>
86    </div>
87    <footer>
88      <div class="container">
89        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
90        <p>Learn to code, learn to be creative.</p>
91      </div>
92    </footer>
93  </body>
94</html>

CSS1
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  font-family: "Hiragino Kaku Gothic ProN";
8}
9
10a {
11  text-decoration: none;
12}
13
14.container {
15  max-width: 1170px;
16  width: 100%;
17  padding: 0 15px;
18  margin: 0 auto;
19}
20
21.top-wrapper {
22  padding: 180px 0 100px 0;
23  background-image: url(https://prog-8.com/images/html/advanced/top.png);
24  background-size: cover;
25  color: white;
26  text-align: center;
27}
28
29.top-wrapper h1 {
30  opacity: 0.7;
31  font-size: 45px;
32  letter-spacing: 5px;
33}
34
35.top-wrapper p {
36  opacity: 0.7;
37}
38
39.btn-wrapper {
40  text-align: center;
41  margin: 20px 0;
42}
43
44.btn-wrapper p {
45  margin: 10px 0;
46}
47
48.signup {
49  background-color: #239b76;
50}
51
52.facebook {
53  background-color: #3b5998;
54  margin-right: 10px;
55}
56
57.twitter {
58  background-color: #55acee;
59}
60
61.btn {
62  padding: 8px 24px;
63  color: white;
64  display: inline-block;
65  opacity: 0.8;
66  border-radius: 4px;
67  text-align: center;
68}
69
70.btn:hover {
71  opacity: 1;
72}
73
74.fa {
75  margin-right: 5px;
76}
77
78header {
79  height: 65px;
80  width: 100%;
81  background-color: rgba(34, 49, 52, 0.9);
82  position :fixed;
83  top: 0;
84  z-index: 10;
85}
86
87.logo {
88  width: 124px;
89  margin-top: 20px;
90}
91
92.header-left {
93  float: left;
94}
95
96.header-right {
97  float: right;
98  margin-right: -25px;
99}
100
101.header-right a {
102  line-height: 65px;
103  padding: 0 25px;
104  color: white;
105  display:block;
106  float: left;
107  transition: all 0.5s;
108}
109
110.header-right a:hover {
111  background-color: rgba(255, 255, 255, 0.3);
112}
113
114.lesson-wrapper {
115  padding-bottom: 80px;
116  padding-left: 5%;
117  padding-right: 5%;
118  background-color: #f7f7f7;
119  text-align: center;
120}
121
122.heading {
123  padding-top: 80px;
124  padding-bottom: 50px;
125  color: #5f5d60;
126}
127
128.heading h2 {
129  font-weight: normal;
130}
131
132.lesson {
133  float: left;
134  width: 25%;
135}
136
137.lesson-icon {
138  position: relative;
139}
140
141.lesson-icon p {
142  position: absolute;
143  top: 44%;
144  width: 100%;
145  color: white;
146}
147
148.text-contents {
149  width: 80%;
150  display: inline-block;
151  margin-top: 15px;
152  font-size: 13px;
153  color: #b3aeb5;
154}
155
156.heading h3 {
157  font-weight: normal;
158}
159
160.message-wrapper {
161  border-bottom: 1px solid #eee;
162  padding-bottom: 80px;
163  text-align: center;
164}
165
166.message {
167  padding: 15px 40px;
168  background-color: #5dca88;
169  cursor: pointer;
170  box-shadow: 0 7px #1a7940;
171}
172
173.message:active {
174  position: relative;
175  top: 7px;
176  box-shadow: none;
177}
178
179footer img {
180  width: 125px;
181}
182
183footer p {
184  color: #b3aeb5;
185  font-size: 12px;
186}
187
188footer {
189  padding-top: 30px;
190  padding-bottom: 20px;
191}
192
193/* -------------------- CSSはここから追加していきましょう！ -------------------- */
194.fa-bars {
195  font-size:25px;
196  float:right;
197  color:white;
198  display:none;
199  padding-top:20px;
200}
201

CSS2
1/* タブレット向けレイアウト */
2@media all and (max-width: 1000px) {
3  
4}
5
6/* モバイル向けレイアウト */
7@media all and (max-width: 670px) {
8  .header-right {
9    display: none;
10  }
11  
12  .fa-bars {
13    display: block;
14  }
15}

Progateの道場コース上級編に関して質問です。上記のコードの場合、表示結果は下の画像の1～3枚目のようになります。

しかしながら、CSS2の.fa-barsにline-height:100%;を書き加え、CSS1のpaddig-top:20px;を消すことによって、モバイル向けのレイアウトのハンバーガーメニューをheaderの上下中央の位置にしようとするとモバイル版の表示が下の画像のようになってしまい、上手くいきません。何故でしょうか？

また、ちょうど上下中央にするにはどのようにしたらいいでしょうか？

m.ts10806

2021/02/17 22:34

>上下中央の位置にできてるように見えますが。具体的にどの位置にしたいのでしょう。

yamauchi-gomide

2021/02/18 01:03

訂正いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

上手くいきません。何故でしょうか？

パーセンテージの基準を勘違いされているかもしれません。

<percentage> 要素自身の**フォントサイズに対する相対値**です。計算値はこの <percentage> に要素のフォントサイズの計算値を掛けたものです。

line-height - CSS: カスケーディングスタイルシート | MDN

__また、ちょうど上下中央にするにはどのようにしたらいいでしょうか？ __

float: rightを生かしながらとなりますと、固定値にするしかないと思います。
たとえば：

CSS
1.fa-bars {
2	padding-top: 0;
3	line-height: 65px;
4}

なお、ご提示のHTMLのままですと、このスタイルは後から書かれる Font Awesome に打ち消されますので、適宜修正してください。

蛇足ですが、要素を横並びにする目的でfloatを使うのは時代遅れで、苦労が増えると思います。10年前ならともかく、2021年に採用をする理由はありません。
フレックスレイアウトなどを採用することをおすすめします。

もし、スクールでフロートレイアウトを教えられているのであれば、スクールや教材の見直しを検討するべきかもしれません。

投稿2021/02/18 02:13

編集2021/02/18 02:17

Lhankor_Mhy

総合スコア36946

yamauchi-gomide

2021/02/18 04:23

ありがとうございます。 floatはてっきり主流のものだと思っていました。勉強になりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

HTML・CSSのline-height

関連した質問