Q&A
左中央とは？
聞いた人がわかるように書きましょう。
h2とその下のｐを
左中央によせたいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ファンデーション</title> 7 <link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10 <div id="home" class="big-bg"> 11 12 <header class="page-header wrapper"> 13 <h1>龍聖堂</h1> 14 <nav> 15 <ul class="main-nav"> 16 <li><a href="news.html">News</a></li> 17 <li><a href="menu.html">Menu</a></li> 18 <li><a href="contact.html">Contact</a></li> 19 </ul> 20 </nav> 21 22<div class="home-contact wrapper"> 23 <h2 class="page-title">Clean your body white</h2> 24 <p>輝く美しい肌に</p> 25 </div> 26 27 </header> 28 </div> 29</body> 30</html>
コード
css
1`@charset "UTF-8"; 2 3html { 4 font-size: 100%; 5} 6 7body { 8 font-family: "Yu Gothic Medium", sans-serif; 9 line-height: 1.7; 10 color: #432; 11} 12 13a { 14 text-decoration: none; 15} 16 17img { 18 max-width: 100%; 19} 20 21h1 { 22 width: 210px; 23 margin-top: 14px; 24 color: #4699ca; 25} 26 27.main-nav { 28 display: flex; 29 font-size: 1.25rem; 30 text-transform: uppercase; 31 margin-top: 34px; 32 list-style: none; 33} 34 35.main-nav li { 36 margin-left: 36px; 37} 38 39.main-nav a { 40 color:aqua; 41} 42 43.main-nav a:hover { 44 color:aquamarine; 45} 46 47.page-header { 48 display: flex; 49 justify-content: space-between; 50} 51 52.wrapper { 53 max-width: 1100px; 54 margin: 0 auto; 55 padding: 0 4%; 56} 57 58.big-bg { 59 background-size: contain; 60 background-position: center top; 61 background-repeat: no-repeat; 62} 63 64#home { 65 background-image: url(../images/白バラの背景.png); 66 min-height: 100vh; 67} 68 69.page-title { 70 text-align: left; 71} 72```
すいません。右半分に画像があるので左半分の中央に文字をいれたかったんです。
フルスクリーンホームページです。
では右半分の画像はどうやって配置しているのですか？
それによってレイアウトの仕方を考えなければなりません。
あと、「左半分の中央」の「中央」って、縦方向の画面の中央という意味ですか？
画面（ウィンドウ）の大きさは可変ではないのですか？
表現するための言葉がわからない時は表現の仕方を工夫しましょう
https://teratail.com/help/question-tips#questionTips3-3-1
ウィンドウのおおきさは可変じゃないです。左半分の中央は縦に四つに割って左から二つ目の部分の真ん中、という意味です。右半分の画像は背景を張り付けているだけです。右半分にだけ画像がある背景なんです。
つまり、
左から1番目に h1 と nav を置いて、
左から2番目に h2 と p を置いて、
左から3番目に 何も置かず（背景画像あり）、
左から4番目に 何も置かず（背景画像あり）、
という理解で合っていますか？
そうです。あっています。
質問のコードを編集されたようですが、h2とpはどこに行きました？
質問の編集を拝読。
h2 と p がなくなりましたが、質問の趣旨が変わりましたか？
h2とpの場所がまぎらわしいと思い消しましたが、趣旨は変わっていないので元に戻しました。まぎらわしくてすいません。
回答2件
0
画面を縦に4分割し、その1番目にh1とnavを入れ、そ2番目に.home-contactを入れる、ということであれば、グリッドレイアウトが適しているように思えます。
css
1.page-header { 2 /* display: flex; */ 3 /* justify-content: space-between; */ 4 display: grid; 5 grid-template-columns: 12.5% 12.5% 25% 25% 25%; 6}
ただ、navが横に長いためはみ出してしまうことについてどう対処するのか、考えた方がいいと思います。
投稿2021/07/24 03:17
総合スコア36175
0
ベストアンサー
こんにちは。
まずは、
</header>を</nav>の次の行に移動するのはどうでしょうか。HTML
1<body> 2 <div id="home" class="big-bg"> 3 4 <header class="page-header wrapper"> 5 <h1>龍聖堂</h1> 6 <nav> 7 <ul class="main-nav"> 8 <li><a href="news.html">News</a></li> 9 <li><a href="menu.html">Menu</a></li> 10 <li><a href="contact.html">Contact</a></li> 11 </ul> 12 </nav> 13 14<div class="home-contact wrapper"> 15 <h2 class="page-title">Clean your body white</h2> 16 <p>輝く美しい肌に</p> 17 </div> 18 19 </header> 20 </div> 21</body>
これを
HTML
1<body> 2 <div id="home" class="big-bg"> 3 4 <header class="page-header wrapper"> 5 <h1>龍聖堂</h1> 6 <nav> 7 <ul class="main-nav"> 8 <li><a href="news.html">News</a></li> 9 <li><a href="menu.html">Menu</a></li> 10 <li><a href="contact.html">Contact</a></li> 11 </ul> 12 </nav> <!-- この行の下に--> 13 </header> <!-- /headerを移動する --> 14 15<div class="home-contact wrapper"> 16 <h2 class="page-title">Clean your body white</h2> 17 <p>輝く美しい肌に</p> 18 </div> 19 20 </div> 21</body>
これで、意図したレイアウトに近くなりませんでしょうか。
投稿2021/07/24 00:48
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
