Q&A
＞･･･そうするとh1のフォントサイズは変わらないのに･･･
→ 最近のブラウザでは変わる事が多いはずです。どこかでサイズ指定しているか、記述位置により、変わったり変わらなかったりします。
「24px指定」は、どこに記述していたのですか？
-追記-
ありました、見落としていました。スミマセン。
(^^;)
font-sizeの反映ルールについて質問があります。
まず、添付のコードが実現したい形であるのですが、これを実験でいじっていた時に腑に落ちない箇所がありました。
responsiveのコード中に、
\\\\\\\\\\\\\\\
/* 「.top-wrapper h1」のfont-sizeを24pxに指定 */
.top-wrapper h1{
font-size: 24px;
}
/////////////////////////////////////////////////////////////////////////////////
という部分があるのですが、親要素であるtop-wrapper にfont-sizeを指定しても同じ事になるのではと、h1を消してみたのですが、
そうするとh1のフォントサイズは変わらないのに、下記に配置されていた、btn-wrapperのグループのフォントサイズが変わりました。
top-wrapperが親なので、親のfont-sizeが変われば、子も一律に変わるという認識だったのですが、何か間違っていますでしょうか？
理屈を教えていただけると大変助かります。
よろしくお願いいたします。
HTML
1コード 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Progate</title> 8 <link rel="stylesheet" href="stylesheet.css"> 9 <link rel="stylesheet" href="responsive.css"> 10 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 11 </head> 12 <body> 13 <header> 14 <div class="container"> 15 <div class="header-left"> 16 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 17 </div> 18 <div class="header-right"> 19 <a href="#">レッスン</a> 20 <a href="#">新規登録</a> 21 <a href="#" class="login">ログイン</a> 22 </div> 23 </div> 24 </header> 25 <div class="top-wrapper"> 26 <div class="container"> 27 <h1>LEARN TO CODE.</h1> 28 <h1>LEARN TO BE CREATIVE.</h1> 29 <p>Progateはオンラインプログラミング学習サービスです。</p> 30 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 31 <div class="btn-wrapper"> 32 <a href="#" class="btn signup">新規登録はこちら</a> 33 <p>or</p> 34 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 35 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 36 </div> 37 </div> 38 </div> 39 <div class="lesson-wrapper"> 40 <div class="container"> 41 <div class="heading"> 42 <h2>Learn Where to Get Started!</h2> 43 </div> 44 <div class="lessons"> 45 <div class="lesson"> 46 <div class="lesson-icon"> 47 <img src="https://prog-8.com/images/html/advanced/html.png"> 48 <p>HTML & CSS</p> 49 </div> 50 <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 51 </div> 52 <div class="lesson"> 53 <div class="lesson-icon"> 54 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 55 <p>jQuery</p> 56 </div> 57 <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> 58 </div> 59 <div class="lesson"> 60 <div class="lesson-icon"> 61 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 62 <p>Ruby</p> 63 </div> 64 <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 65 </div> 66 <div class="lesson"> 67 <div class="lesson-icon"> 68 <img src="https://prog-8.com/images/html/advanced/php.png"> 69 <p>PHP</p> 70 </div> 71 <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 72 </div> 73 <div class="clear"></div> 74 </div> 75 </div> 76 </div> 77 <div class="message-wrapper"> 78 <div class="container"> 79 <div class="heading"> 80 <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> 81 <h3>Let's learn to code, learn to be creative!</h3> 82 </div> 83 <span class="btn message">さっそく開発する</span> 84 </div> 85 </div> 86 <footer> 87 <div class="container"> 88 <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> 89 <p>Learn to code, learn to be creative.</p> 90 </div> 91 </footer> 92 </body> 93</html>
CSS
1コード 2* { 3 box-sizing: border-box; 4} 5 6body { 7 margin: 0; 8 font-family: "Hiragino Kaku Gothic ProN", sans-serif; 9} 10 11a { 12 text-decoration: none; 13} 14 15.clear { 16 clear: left; 17} 18 19.container { 20 width: 100%; 21 padding: 0 15px; 22 margin: 0 auto; 23} 24 25.top-wrapper { 26 padding: 180px 0 100px 0; 27 background-image: url(https://prog-8.com/images/html/advanced/top.png); 28 background-size: cover; 29 color: white; 30 text-align: center; 31} 32 33.top-wrapper h1 { 34 opacity: 0.7; 35 font-size: 45px; 36 letter-spacing: 5px; 37} 38 39.top-wrapper p { 40 opacity: 0.7; 41} 42 43.btn-wrapper { 44 text-align: center; 45 margin: 20px 0; 46} 47 48.btn-wrapper p { 49 margin: 10px 0; 50} 51 52.signup { 53 background-color: #239b76; 54} 55 56.facebook { 57 background-color: #3b5998; 58 margin-right: 10px; 59} 60 61.twitter { 62 background-color: #55acee; 63} 64 65.btn { 66 padding: 8px 24px; 67 color: white; 68 display: inline-block; 69 opacity: 0.8; 70 border-radius: 4px; 71 text-align: center; 72} 73 74.btn:hover { 75 opacity: 1; 76} 77 78.fa { 79 margin-right: 5px; 80} 81 82header { 83 height: 65px; 84 width: 100%; 85 background-color: rgba(34, 49, 52, 0.9); 86 position :fixed; 87 top: 0; 88 z-index: 10; 89} 90 91.logo { 92 width: 124px; 93 margin-top: 20px; 94} 95 96.header-left { 97 float: left; 98} 99 100.header-right { 101 float: right; 102 margin-right: -25px; 103} 104 105.header-right a { 106 line-height: 65px; 107 padding: 0 25px; 108 color: white; 109 display: block; 110 float: left; 111 transition: all 0.5s; 112} 113 114.header-right a:hover { 115 background-color: rgba(255, 255, 255, 0.3); 116} 117 118.lesson-wrapper { 119 padding-bottom: 80px; 120 padding-left: 5%; 121 padding-right: 5%; 122 background-color: #f7f7f7; 123 text-align: center; 124} 125 126.heading { 127 padding-top: 80px; 128 padding-bottom: 50px; 129 color: #5f5d60; 130} 131 132.heading h2 { 133 font-weight: normal; 134} 135 136.lesson { 137 float: left; 138 width: 25%; 139} 140 141.lesson-icon { 142 position: relative; 143} 144 145.lesson-icon p { 146 position: absolute; 147 top: 44%; 148 width: 100%; 149 color: white; 150} 151 152.text-contents { 153 width: 80%; 154 display: inline-block; 155 margin-top: 15px; 156 font-size: 13px; 157 color: #b3aeb5; 158} 159 160.heading h3 { 161 font-weight: normal; 162} 163 164.message-wrapper { 165 border-bottom: 1px solid #eee; 166 padding-bottom: 80px; 167 text-align: center; 168} 169 170.message { 171 padding: 15px 40px; 172 background-color: #5dca88; 173 cursor: pointer; 174 box-shadow: 0 7px #1a7940; 175} 176 177.message:active { 178 position: relative; 179 top: 7px; 180 box-shadow: none; 181} 182 183footer img { 184 width: 125px; 185} 186 187footer p { 188 color: #b3aeb5; 189 font-size: 12px; 190} 191 192footer { 193 padding-top: 30px; 194 padding-bottom: 20px; 195}
responsive /* タブレット向けレイアウト */ @media (max-width: 1000px) { .lesson { width: 50%; margin-bottom: 50px; } /* 「.top-wrapper h1」のfont-sizeを32pxに指定 */ .top-wrapper h1 { font-size : 32px; } .heading h2 { font-size: 20px; } /* 「.heading h2」のfont-sizeを20pxに指定 */ } /* スマホ向けレイアウト */ @media (max-width: 670px) { .lesson { width: 100%; } footer { text-align: center; } .btn { width: 100%; } .facebook { margin-bottom: 10px; } .top-wrapper { text-align: left; } /* 「.top-wrapper h1」のfont-sizeを24pxに指定 */ .top-wrapper h1{ font-size: 24px; } .top-wrapper p{ font-size: 14px; } /* 「.top-wrapper p」のfont-sizeを14pxに指定 */ }
回答2件
0
ブラウザにはデフォルトスタイルシートがあって、そこの指定が優先されるているだけでは？
デベロッパーツールで確認してみてください。
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
投稿2019/03/24 09:23
総合スコア69398
（なんか兄弟と親子の概念がわかってない質問者のきもするけど調べるための回答はこれだよな）
> ブラウザにはデフォルトスタイルシートがあって、そこの指定が優先されるているだけでは？
デフォルトスタイルシートの優先度は最下位なので、その可能性はないように思います。
https://triple-underscore.github.io/css-cascade-ja.html#cascading
@think49
タグ（H1) のブラウザCSS ＞ 親要素からの継承のCSS よ
> 、h1を消してみたのですが
@asahina1979
ご指摘ありがとうございます。継承ルールの把握が甘かったようです。
https://triple-underscore.github.io/css-cascade-ja.html#inheriting
確かに、"カスケード値が無いときは，その値が継承により決定されることを意味する" とありました。
回答ありがとうございます。
当方初心者で理解出来てない可能性が大いにあります。
デビロッパーツールでの検証、試してみたいと思います。
ツールで確認したところ、上方に書いてある1000pxのタブレット用の方にあった top-wrapper h1 が適用されていたようです。
670pxでの作業環境で試していたのですが、まさか別条件である1000pxの方のh1が適用されるとは驚きました。
max-width/min-widthの違いとか、そのあたりを実際にコードを書いて試してみてください。
【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries
0
ベストアンサー
親要素であるtop-wrapper にfont-sizeを指定しても同じ事になるのではと、h1を消してみたのですが、
CSS
1.top-wrapper h1 { 2 font-size : 32px; 3} 4 5.top-wrapper h1 { 6 font-size: 24px; 7}
上記を下記のように書き換えたのであれば、
CSS
1.top-wrapper h1 { 2 font-size : 32px; 3} 4 5.top-wrapper { 6 font-size: 24px; 7}
.top-wrapper h1 のセレクタの方が詳細度が高いので、.top-wrapper { font-size: 24px; } は無効です。
- 16. 選択子の詳細度の計算法 - Selectors Level 4 （日本語訳）
- HTML - divの中のpの中のaの中のimgにCSSを適応させるにはどのように書けば良いですか？｜teratail
Re: ShinYam さん
投稿2019/03/24 14:21
編集2019/03/24 14:21総合スコア18162
回答ありがとうございます。
わかりずらかったかもしれません。申し訳ありません。
問題となっているのが、responsiveシートにある、
/* 「.top-wrapper h1」のfont-sizeを24pxに指定 */
.top-wrapper h1{
font-size: 24px;
}
.top-wrapper p{
font-size: 14px;
}
/* 「.top-wrapper p」のfont-sizeを14pxに指定 */
なのですが、
このｈ１を消した場合に、ｈ１の大きさが32pxで無くなってしまう理由がわからないということでした。
ｈ１を消したtop-wrapper により、h1を含む、top-wrapper下にある要素のフォントが、pを除いて32pxになるはずではないかというのが、私の考えです。
すみません わかりました！
スマホ向けレイアウト（670px)時にtop-wrapper h1のh1を削除すると、上方に書いてある1000pxのタブレット用の方にあった top-wrapper h1 が適用されていたようです。
詳細度が優先されるとはそういう意味なのですね 理解できました！
（670pxでの作業環境であっても、1000px設定時の＠mediaにあるh1の設定を引っ張ってくるのには驚きました。）
@media (max-width: 1000px) は1000px以下を意味するので、670px以下でも条件を満たします。
なるほど！確かにその通りですね
という事は、CSSは後の方が優先的に反映されるから、レスポンスを書く場合はwidthが広い順から書かないといけないという事ですね
> CSSは後の方が優先的に反映されるから
そのルールは「詳細度が同値の場合のみ」です。
あなたの回答
tips
プレビュー
