Q&A
発生している問題・エラーメッセージ
GoogleChromeのブラウザの横幅を1760px以上に広げるとh2タグの「We'll Make Your Day」の「Day」の部分が改行されてしまいます。
ブラウザの横幅をどんなに広げても上記が改行されないようにする方法はありますでしょうか。
予想の正誤も含めて教えていただけるとありがたいです。
※条件として、headerのwrapperの設定はそのままにしておきたいです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>WCB Cafe</title> 6 <meta name="description" content="ヘルシーなカフェ"> 7 8 <!-- CSS --> 9 <link rel="stylesheet" href="https://unpkg.com/ress@3.0.0/dist/ress.min.css"> 10 <link rel="stylesheet" type="text/css" href="css/style.css"> 11 </head> 12 <body> 13 <header class="page-header wrapper"> 14 <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ ホーム"></a></h1> 15 <nav> 16 <ul class="main-nav"> 17 <li><a href="news.html">News</a></li> 18 <li><a href="menu.html">Menu</a></li> 19 <li><a href="contact.html">Contact</a></li> 20 </ul> 21 </nav> 22 </header> 23 <div class="home-content wrapper"> 24 <h2 class="page-title">We'll Make Your Day</h2> 25 <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p> 26 <a class="button" href="menu.html">メニューを見る</a> 27 </div><!-- /.home-content --> 28 </body> 29</html> 30
css
1@charset "UTF-8"; 2 3/* 共通部分 4------------------------------- */ 5html { 6 font-size: 100%; 7} 8body{ 9 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 10 line-height: 1.7; 11 color: #432; 12} 13a { 14 text-decoration: none; 15} 16img { 17 max-width: 100%; 18} 19 20 21/* HEADER 22------------------------------- */ 23.logo { 24 width: 210px; 25 margin-top: 14px; 26} 27.main-nav { 28 display: flex; 29 font-size: 1.25em; 30 text-transform: uppercase; 31 margin-top: 34px; 32 list-style: none; 33} 34.main-nav li { 35 margin-left: 36px; 36} 37.main-nav a { 38 color: #432; 39} 40.main-nav a:hover { 41 color: #0bd; 42} 43.page-header { 44 display: flex; 45 justify-content: space-between; 46} 47.wrapper { 48 max-width: 1100px; 49 margin: 0 auto; 50 padding: 0 4%; 51} 52 53/* HOME 54------------------------------- */ 55.home-content { 56 text-align: center; 57 margin-top: 10%; 58} 59.home-content p { 60 font-size: 1.125rem; 61 margin: 10px 0 42px; 62} 63 64/* 見出し */ 65.page-title { 66 font-size: 5rem; 67 font-family: 'Philosopher', serif; 68 text-transform: uppercase; 69 font-weight: normal; 70} 71 72/* ボタン */ 73.button { 74 font-size: 1.375rem; 75 background: #0bd; 76 color: #fff; 77 border-radius: 5px; 78 padding: 18px 32px; 79} 80 81.button:hover { 82 background: #0090aa; 83}
試したこと
cssに以下のコードを追記してみましたが、結果は変わりませんでした。
css
1.wrapper h2 { 2 max-width: 2000px; 3}
予想
予想では.wrapperのmax-widthが1100pxに対し、左右のpaddingが4%とあるので、ブラウザの画面幅を広げていくごとに同じく広がっていくpaddingと1100pxの閾値に圧迫されて改行されてしまうのでは？と思っています。
補足情報（FW/ツールのバージョンなど）
OS:windows10
開発環境:Sublime Text 3
文字コード:UTF-8
ブラウザ:Google Chrome
参考書:「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」 Mana
回答1件
0
ベストアンサー
予想では.wrapperのmax-widthが1100pxに対し、左右のpaddingが4%とあるので、ブラウザの画面幅を広げていくごとに同じく広がっていくpaddingと1100pxの閾値に圧迫されて改行されてしまうのでは？と思っています。
その予想通りだと思います。
paddingが4%と相対的なものなので、画面幅が広がるとそれに応じてpaddingの値も大きくなり、改行されてしまいます。よって、
※条件として、headerのwrapperの設定はそのままにしておきたいです。
とのことですが、この部分の設定を変更(固定値で指定)しないと解決できません。
wrapperクラスは他でも設定されているので、他への影響を懸念されてのことなら、
セレクターで対象を限定して、さらにメディアクエリで特定の幅(1760px以上)に限定するなどしたらどうでしょう。
下記を現状の.wrapper の後に追加します。
css
1@media screen and (min-width: 1700px) { 2 .home-content.wrapper { 3 padding: 0 70px; 4 } 5}
投稿2021/02/28 13:35
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/01 14:49