質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

display: flex;を指定するとその要素の位置が左にずれる理由について

kazuhito0106
kazuhito0106

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

140閲覧

投稿2020/03/15 16:14

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

html5とcss3を用いてwebデザインをもとに模写コーディングをしています。
2つのブロック要素を横並べにしたいため、そのブロック要素の親要素に対してdisplay:flexを指定しましたが、
その親要素の背景が左にずれて、それにつられる様に2つのブロック要素も左にずれてしまいます。
これをずれない様に2つのブロック要素を横並べにさせたいです。

発生している問題・エラーメッセージ

「display: flex; を指定後の画像」
イメージ説明

「display: flex; を指定前の画像」
イメージ説明

該当のソースコード

html5

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bunny!</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <img src="./img/logo.png" width="160" height="60" alt="ロゴ"> </div> <div class="header-right"> <button type="button" class="btn btn-pink">お問い合わせ</button> </div> </div> <div class="clear"></div> </header> <div class="wrapper"> <div class="content"> <div class="article"> <h1>かわいいのは、うさぎ。</h1> <p>うさぎは世界で一番かわいい動物です。どうしてこんなにかわいいのでしょうか?今回はうさぎに癒されながらサイトを作っていきましょう。</p> </div> <button type="button" class="btn btn-pink">うさぎとは?</button> <button type="button" class="btn btn-white">うさぎの可愛さの秘密</button> </div> <div class="thumb"> <img src="./img/mv.png" width="600" height="345" alt="背景画像"> </div> </div> <footer></footer> </body> </html>

css3

body { margin: 0; padding: 0; font-family: '游ゴシック体'; } /* header */ header { height: 90px; width: 1280px; margin: 0 auto; } .container { width: 1080px; margin: 0 auto; } .header-left { float: left; height: 90px; } .header-left img { padding: 15px 0; } .header-right { float: right; } .header-right { padding: 21px 0 ; } .clear { clear: both; } .btn { border-radius: 28px; padding: 13px 30px 15px; font-size: 20px; line-height: 20px; box-shadow: 3px 3px 10px #00000029; } .btn-pink { background-color: #EC84A0; color: #FFFFFF; font-size: 18px; padding: 15px 30px; } .btn-white { background-color: #FFFFFF; color: #EC84A0; border: 2px solid #EC84A0; font-size: 18px; padding: 15px 30px; } /* wrapper */ .wrapper { background-image: url(./img/bg.png); background-repeat: repeat; padding-top: 24px; margin: 0 auto; width: 1280px; display: flex; /* 該当箇所 */ } .content { width: 422px; height: 250px; } .article { width: 400px; } .article h1 { line-height: 1; font-size: 36px; margin: 0; } .article p { margin: 40px 0; }

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

k_fujimoto
k_fujimoto

2020/03/15 23:23 編集

提供いただいたソースコードをcodepen( https://codepen.io/Qanji/pen/xxGjRBj )に反映させましたが、おっしゃるような問題は再現しませんでしたね… 問題が発生している環境などを記載していただいたほうが良いかもしれません。
kazuhito0106
kazuhito0106

2020/03/16 14:50

k_fujimoto 様 回答ありがとうございます! 横幅を1820px以上にすると左にずれることを確認しました。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。