Q&A
提供いただいたソースコードをcodepen( https://codepen.io/Qanji/pen/xxGjRBj )に反映させましたが、おっしゃるような問題は再現しませんでしたね…
問題が発生している環境などを記載していただいたほうが良いかもしれません。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
html5とcss3を用いてwebデザインをもとに模写コーディングをしています。
2つのブロック要素を横並べにしたいため、そのブロック要素の親要素に対してdisplay:flexを指定しましたが、
その親要素の背景が左にずれて、それにつられる様に2つのブロック要素も左にずれてしまいます。
これをずれない様に2つのブロック要素を横並べにさせたいです。
発生している問題・エラーメッセージ
「display: flex； を指定後の画像」
「display: flex； を指定前の画像」
該当のソースコード
html5
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>Bunny!</title> 7 <link rel="stylesheet" href="./styles.css"> 8</head> 9<body> 10 <header> 11 <div class="container"> 12 <div class="header-left"> 13 <img src="./img/logo.png" width="160" height="60" alt="ロゴ"> 14 </div> 15 <div class="header-right"> 16 <button type="button" class="btn btn-pink">お問い合わせ</button> 17 </div> 18 </div> 19 <div class="clear"></div> 20 </header> 21 <div class="wrapper"> 22 <div class="content"> 23 <div class="article"> 24 <h1>かわいいのは、うさぎ。</h1> 25 <p>うさぎは世界で一番かわいい動物です。どうしてこんなにかわいいのでしょうか？今回はうさぎに癒されながらサイトを作っていきましょう。</p> 26 </div> 27 <button type="button" class="btn btn-pink">うさぎとは?</button> 28 <button type="button" class="btn btn-white">うさぎの可愛さの秘密</button> 29 </div> 30 <div class="thumb"> 31 <img src="./img/mv.png" width="600" height="345" alt="背景画像"> 32 </div> 33 </div> 34 <footer></footer> 35</body> 36</html>
css3
1body { 2 margin: 0; 3 padding: 0; 4 font-family: '游ゴシック体'; 5} 6 7/* header */ 8header { 9 height: 90px; 10 width: 1280px; 11 margin: 0 auto; 12} 13 14.container { 15 width: 1080px; 16 margin: 0 auto; 17} 18 19.header-left { 20 float: left; 21 height: 90px; 22} 23 24.header-left img { 25 padding: 15px 0; 26} 27 28.header-right { 29 float: right; 30} 31 32.header-right { 33 padding: 21px 0 ; 34} 35 36.clear { 37 clear: both; 38} 39 40.btn { 41 border-radius: 28px; 42 padding: 13px 30px 15px; 43 font-size: 20px; 44 line-height: 20px; 45 box-shadow: 3px 3px 10px #00000029; 46} 47 48.btn-pink { 49 background-color: #EC84A0; 50 color: #FFFFFF; 51 font-size: 18px; 52 padding: 15px 30px; 53} 54 55.btn-white { 56 background-color: #FFFFFF; 57 color: #EC84A0; 58 border: 2px solid #EC84A0; 59 font-size: 18px; 60 padding: 15px 30px; 61} 62 63/* wrapper */ 64.wrapper { 65 background-image: url(./img/bg.png); 66 background-repeat: repeat; 67 padding-top: 24px; 68 margin: 0 auto; 69 width: 1280px; 70 display: flex; /* 該当箇所 */ 71} 72 73.content { 74 width: 422px; 75 height: 250px; 76} 77 78.article { 79 width: 400px; 80} 81 82.article h1 { 83 line-height: 1; 84 font-size: 36px; 85 margin: 0; 86} 87 88.article p { 89 margin: 40px 0; 90} 91
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
画面幅をある程度広げると症状がでますね。
原因は、ヘッダー部分の要素の横並びを、float でしていることだ思われます。
float は後ろの要素のレイアウトに影響を及ぼすので思わぬトラブルの原因になります。
以前は、横並びさせるときに、他に手段がなかったので多用されましたが、
現在ではflexで簡単にトラブルなく横並びにできますのでそれを使用すべきです。
floatは、本来の機能であるテキストの回り込みの設定以外で使う場面はないと思います。
下記のように設定してヘッダーの要素を横並びにして、要素のfloat設定は削除してください。
css
1.container { 2 max-width: 1080px; 3 margin: 0 auto; 4 display: flex; /*横並び*/ 5 justify-content: space-between;/*両端揃え*/ 6}
floatを使わなければ、
<div class="clear"></div> .clear {clear: both;}
も不要になりますので削除してください。
投稿2020/03/16 00:46
編集2020/03/16 02:43
総合スコア34075
hatena19 様
回答ありがとうございます！
divタグでclearクラスを用いたので、ブロック要素(.container)は子要素の高さを認識して、後ろの要素に影響されないと思っていましたが、関係しているんですね。確かに上手く動作することを確認致しました！
あなたの回答
tips
プレビュー
