Q&A
タイトルが「ロゴとニュースの位置が変更されない」とされても、このデザインを知らない人からすれば「？」です。タイトルは適切なものに変更したほうが良いと思います。
そして「左に」「真ん中に」と文字で書かれてもどうしたいのかがわからないため、完成イメージ図なりをご用意されたほうが良いと思います。
ロゴクラスの「WCB CAFE]を左に、ページタイトルの「NEWS」を真ん中に置きたい
現在左側の写真の状態です（イメージ図はありません）
以下コードです。```HTML
コード
<html lang="ja"> <head> <meta charset="utf-8"> <title>WCB Cafe -NEWS-</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフード を提供するカフェ"> <!-- CSS --> <limk rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleeapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="icon" type="image/png" href="images/favicon.png"> </head> <body> <div id="news" class="big-bg"> <header class="page-header wrapper"> <div class="wrapper"> <h2 class="page-title">News</h2> </div><!--/.wrapper--> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ ホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> <ul> </nav> </header> </div> </body> </html> コード ``` ```@charset "UTF-8"; /* 共通部分 ------------------------------- */ html { font-size: 100%; } body{ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: 1.7; color: #432; } a { text-decoration: none; } img { max-width: 100%; } .logo{ width:210px; margin-top: 14px; text-align: left; } .main-nav{ display: flex; font-size: 1.25rem; text-transform: uppercase; margin-top: 34px; list-style: none; } .main-nav li{ margin-left: 36px; } .main-nav a{ color:#432; } .main-nav a:hover{ color:#0bd; } .page-header{ display: flex; justify-content: space-between; } .wrapper{ max-width: 1100px; margin: 0 auto; padding: 0 4%; } .home-content{ text-align:center; margin-top: 10%; } .home-content p{ font-size: 1.125rem; margin:10px 0 42px; } /* 見出し */ .page-title{ font-size: 5rem; font-family: 'Philosopher',serif; text-transform: uppercase; font-weight: normal; } /* ボタン */ .button{ font-size: 1.375rem; background:#0bd; color: #fff; border-radius: 5px; padding: 18px 32px; } .button:hover{ background: #0090aa; } .big-bg{ background-size: cover; background-position: center top; background-repeat: no-repeat; } #home{ background-image: url(../images/main-bg.jpg); background-color: #0bd; background-blend-mode: hard-light; min-height: 100vh; background-image: linear-gradient(#c9ffbf,#ffafbd); } #home .page-title{ text-transform:none; } /* NEWS -------------------------------------------*/ #news{ background-image: url(../images/news-bg.jpg); height: 270px; margin-bottom: 40px; } #news .page-title{ text-align: center; } ``` 以上です。もしよかったら回答の方よろしくお願いします。
回答2件
0
display: flex; とした header の子アイテムを入れ替えたいということですよね？
CSS でもできますが、HTML を変えたほうがいいのではないでしょうか？
Pug
1header.page-header.wrapper 2 .wrapper 3 h1 4 nav
CSS
1h1 { 2 order: -1; 3}
投稿2020/03/06 08:01
総合スコア13749
0
ベストアンサー
なぜh2をwrapperで包む必要があるんでしょうか。
text-alignが利かないのは、そもそもnavとロゴがあるせいで要素が動く範囲が制限されてしまっているからです。絶対配置にすれば解決します。ロゴも同様に絶対配置で左に寄せましょう。
css
1.page-header{ 2 display: flex; 3 justify-content: flex-end; /* 変更 */ 4} 5 6.wrapper{ 7 max-width: 1100px; 8 margin: 0 auto; 9 padding: 0 4%; 10 position: relative; /* 追加 */ 11} 12 13/* 以下追加 */ 14 15h1 { 16 position: absolute; 17 left: 0; 18} 19h2 { 20 position: absolute; 21 left: 0; 22 right: 0; 23}
html
1<body> 2 <div id="news" class="big-bg"> 3 <header class="page-header wrapper"> 4 <h2 class="page-title">News</h2> 5 <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ ホーム"></a></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> 14 </div> 15</body> 16
追記
前の方のおっしゃる通りロゴの左寄せはorderプロパティでも良いと思います。ですが、タイトルは絶対配置にしないと完全な真ん中表示にはなりません。
投稿2020/03/06 08:10
編集2020/03/06 08:26
総合スコア757
上記の通りやってみたらうまくいきました。h2をwrapperで包んでいたのが原因だったみたいです。
また、orderにしてみたところこちらもうまく移動できました。お二人共ありがとうございました。
あなたの回答
tips
プレビュー
