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

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

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

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

CSS

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

Q&A

解決済

1回答

777閲覧

レスポンシブをした時になぜか要素が一段下に行ってしまいます

takawork

総合スコア95

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/09/08 10:25

スマホ用の画面に切り替えた時にメールマークが一段下に行ってしまいました。
どうすれば直るでしょうか?
レスポンシブ前
イメージ説明
レスポンシブ後
イメージ説明
検証モードでいろいろ見たのですが、position:abusoluteでしか上にいかせられませんでした。
よろしくお願いします。

<!-- 「アイコン」と「問い合わせフォーム」のヘッダー --> <section class="header-main"> <div class="header-main-cover"> <div class="logo"> <img class="logo-img" src="img/karilogo.png" alt="会社ロゴ"> </div> <div class="form pc"> <a href="#">問い合わせフォーム</a> </div> <img class="mail-logo sp" href="#" src="/img/mail-icon.png"> </div> </section>
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; font-family: 'Roboto', sans-serif; } .header-main { z-index: 100; height: 80px; background-color: black; } .header-main-cover { max-width: 1140px; margin: 0 auto; } .header-main-cover .mail-logo { float: right; height: 70px; margin-right: 10px; } .header-main .logo { float: left; } .header-main .logo-img { height: 80px; margin-left: 10px; } .header-main .form { float: right; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ffcc00), to(#ee8f0b)); background: linear-gradient(to bottom, #ffcc00 50%, #ee8f0b); -webkit-transition: all 0.5s; transition: all 0.5s; width: 200px; border: 2px solid black; border-radius: 8px; } .header-main .form:hover { background-color: #ffcc00; } .header-main .form a { color: rgba(5, 1, 1, 0.842); font-weight: bold; line-height: 60px; display: block; text-align: center; text-decoration: none; } .pc { display: block !important; } .sp { display: none !important; } @media only screen and (max-width: 959px) { /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: none !important; } .sp { display: block !important; } .menu-container { width: 100%; } .menu-mobile { display: block; } .menu-dropdown-icon:before { display: block; } .menu > ul { display: none; } .menu > ul > li { width: 100%; float: none; display: block; } .menu > ul > li a { padding: 1.5em; width: 100%; display: block; } .menu > ul > li > ul { position: relative; } .menu > ul > li > ul.normal-sub { width: 100%; } .menu > ul > li > ul > li { float: none; width: 100%; margin-top: 20px; } .menu > ul > li > ul > li:first-child { margin: 0; } .menu > ul > li > ul > li > ul { position: relative; } .menu > ul > li > ul > li > ul > li { float: none; } .menu .show-on-mobile { display: block; } .header-main .logo { float: none; text-align: center; } }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

横並びに、float を使ってますが、これは他にレイアウトに悪影響を及ぼしますので、やめましょう。
今は、横並びは Flexbox を使うのが主流です。

もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends

css

1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 outline: none; 6 font-family: 'Roboto', sans-serif; 7} 8 9.header-main { 10 z-index: 100; 11 background-color: black; 12} 13 14.header-main-cover { 15 max-width: 1140px; 16 height: 80px; 17 margin: 0 auto; 18 display: flex; 19 justify-content:space-between; 20 align-items: center; 21} 22 23.header-main-cover .mail-logo { 24 height: 70px; 25 margin-right: 10px; 26} 27.header-main .logo { 28 height: 70px; 29 margin-left: 10px; 30} 31.header-main .logo-img { 32 height: 100%; 33} 34 35.header-main .form { 36 margin-right: 10px; 37 background: linear-gradient(to bottom, #ffcc00 50%, #ee8f0b); 38 transition: all 0.5s; 39 width: 200px; 40 border: 2px solid black; 41 border-radius: 8px; 42} 43 44.header-main .form:hover { 45 background-color: #ffcc00; 46} 47 48.header-main .form a { 49 color: rgba(5, 1, 1, 0.842); 50 font-weight: bold; 51 line-height: 60px; 52 display: block; 53 text-align: center; 54 text-decoration: none; 55} 56.pc { 57 display: block !important; 58} 59 60.sp { 61 display: none !important; 62} 63 64@media only screen and (max-width: 959px) { 65 /* パソコンで見たときは"pc"のclassがついた画像が表示される */ 66 .pc { 67 display: none !important; 68 } 69 .sp { 70 display: block !important; 71 } 72 .header-main .logo { 73 flex: 1 0 auto; 74 text-align: center; 75 } 76}

Codepenサンプル

投稿2020/09/08 16:01

編集2020/09/08 16:58
hatena19

総合スコア33544

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takawork

2020/09/08 16:45

回答ありがとうございます。コードを試してみたのですが、flexを使うと真ん中のロゴが今度は左によってしまいます。この場合はどうすればよいでしょうか?
hatena19

2020/09/08 17:02

回答のコードとサンプルを修正しました。確認ください。 スマホ用のCSSに1行追加しただけです。 .header-main .logo { flex: 1 0 auto; /* 追加 */ text-align: center; }
takawork

2020/09/08 17:41

ありがとうございます。コードをコピペしたらうまくいきました。 ところで flex: 1 0 auto; text-align: center; のコードの意味がよく分かりません。 https://parashuto.com/rriver/development/how-flex-item-width-is-calculated こちらを読んだのですがさっぱりでした。 flex: 1 0 auto;は初期化(display:none;みたいな)をしていて、 text-align: center;で真ん中に寄せたということでしょうか? もしくはpadding: 20px 30px 10px; みたいな感じの記述なのでしょうか?
hatena19

2020/09/10 01:51

flex - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/flex 分かりづらいプロパティですが、flex: 1 0 auto; は、 flex-grow: 1; flex-shrink: 0; flex-basis: auto; という設定を一括でしているものです。 つまり、余白に応じて幅を拡張する、縮小はしない、という設定をしています。 よって .logo は右にある画像の除く範囲に広がります。 text-align: center; を設定することで、その範囲の中で、子要素の .logo-img が中央に配置されます。
takawork

2020/09/10 04:56

なるほど、分かりやすい説明ありがとうございます。 お手隙で良いので是非以下の質問にもお答え頂けると嬉しいです。 よろしくお願いします。 https://teratail.com/questions/290779
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問