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

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

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

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

CSS

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

Q&A

解決済

2回答

2079閲覧

トップのメニューがロゴの下にカラム落ちしてしまう。

icchiman

総合スコア3

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/20 07:04

編集2020/05/20 10:01

前提・実現したいこと

ブレイクポイント641pxまでメニュー部分<div class="logo_and_title">がカラム落ちしないように設定したいです。

#発生している問題
補足情報にある添付画像のようにトップのメニューがブラウザ環境(chrome)幅が647pxでカラム落ちが発生します。

試したこと

manu_button li{float:left;}の代わりにdisplay:inline-block;を入れてみる。
②floatが入っているロゴ[.top_logo_nav h1]とメニュー[<div class="logo_and_title">]にwidthを設定してみる。

該当のソースコード

HTML

1<!DOCTYPE html> 2 <html lang="ja"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <title>baaa_corporation</title> 10 </head> 11 12 <body> 13 <div id="wrap"> 14 <!-- <div class="main"> --> 15 <div class="top_logo_nav clearfix"> 16 <h1>BAAA Corporation</h1> 17 <div class="logo_and_title"> 18 <ul class="manu_button clearfix"> 19 <li><a href="#">会社概要</a></li> 20 <li><a href="#">事業紹介</a></li> 21 <li><a href="#">採用情報</a></li> 22 <li><a href="#">お問い合わせ</a></li> 23 </ul> 24 </div> 25 </div> 26 </body> 27 28 </html>

CSS

1.clearfix::after { 2 content: ""; 3 display: block; 4 clear: both; 5} 6 7 8img { 9 width: 100%; 10 height: auto; 11} 12 13* { 14 box-sizing: border-box; 15} 16 17 18 19 20a { 21 text-decoration: none; 22 color: #fff; 23} 24 25/* ------------------------------------------ */ 26 27 28body { 29 margin: 0 auto; 30} 31 32#wrap { 33 width: 1200px; 34 max-width: 100%; 35 margin: auto; 36 font-size: 16px; 37} 38 39.main { 40 width: 100%; 41 max-width: 1200px; 42} 43 44.top_logo_nav { 45 width: 960px; 46 max-width: 100%; 47 margin: 20px auto 20px auto; 48 position: relative; 49} 50 51.top_logo_nav h1 { 52 font-size: 28px; 53 font-weight: bold; 54 float: left; 55} 56 57 58 59.logo_and_title { 60 float: right; 61 box-sizing: border-box; 62 /* margin-right: 5.5rem; */ 63} 64 65 66.manu_button { 67 font-size: 0; 68 line-height: 2.5; 69 list-style: none; 70 overflow: hidden; 71 /* float: right; */ 72 /* position: relative; */ 73} 74 75.manu_button li { 76 width: 110px; 77 max-width: 100%; 78 float: left; 79 font-size: 14px; 80 font-weight: bold; 81 /* margin-right: 10px; */ 82} 83 84.manu_button li a { 85 text-decoration: none; 86 color: #000; 87 margin-left: 20px; 88} 89 90.manu_button li a::before { 91 position: absolute; 92 content: ""; 93 display: block; 94 margin-top: 11px; 95 /* margin-left: -14px;消 */ 96 /* top: 7.5%; 削除*/ 97 left: auto; 98 height: 0; 99 width: 0; 100 border-style: solid; 101 border-width: 6px 0 6px 10px; 102 border-color: transparent transparent transparent #006699; 103} 104 105 106 107 108@media screen and (max-width: 641px) { 109 110 section h2 { 111 padding-bottom: 20px; 112 } 113 114 section h3 { 115 margin: 116 105px auto 35px; 117 } 118 119 #wrap { 120 width: 100%; 121 } 122 123 .top_logo_nav { 124 width: 100%; 125 /*width:100%;→①manu_buttonのリストをカラム落ちさせないために試しに設定*/ 126 } 127 128 .logo_and_title { 129 float: right; 130 margin-right: 55px; 131 /* */ 132 } 133 134 135 .manu_button li { 136 max-width: 100%; 137 } 138 139 140}

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

イメージ説明

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

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

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

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

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

Lhankor_Mhy

2020/05/20 07:19

入力の途中で投稿してしまいましたか?
icchiman

2020/05/20 07:34

コメントありがとうございます。 質問内容を全て入力したあとに投稿しましたが、おっしゃるとおり途中で投稿してしまったようです。 後程、再投稿いたします。
TatamiSteak

2020/05/20 07:46

質問は編集できますので…。
kei344

2020/05/20 11:31

幅が一定以下になったら当然「カラム落ち」しますが、どのように回避したいのでしょう。
icchiman

2020/05/21 10:04

ご返事が遅くなってしまい申し訳ありません。 kei344さん コメントありがとうございます。 幅が一定以下になるとカラム落ちするものなのですね。 実現したいことの内容が不足していたのですが 最終的にロゴととメニューが一行で並べられるように調整させたいです。 またはカラム落ちをさせる場合はロゴとメニューを2行にして中央表示させるようにしたいです。
guest

回答2

0

ベストアンサー

幅が一定以下になるとカラム落ちするものなのですね。

例えば幅10のところに幅5と幅6のものを入れられないしfloatの場合カラム落ちします。

最終的にロゴととメニューが一行で並べられるように調整させたいです。

またはカラム落ちをさせる場合はロゴとメニューを2行にして中央表示させるようにしたいです。

647px以下の端末も対象に考えているなら、カラム落ちするあたりで中央表示に切り替えてはいかがでしょう。h1と.logo_and_titleのfloatを解消して、.logo_and_titleをinline-blockにしてtext-align: center;で中央とか。

投稿2020/05/21 15:45

kei344

総合スコア69364

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

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

icchiman

2020/05/25 11:12

kei344さん ご返事が遅くなってしまいすみません。 前回ご回答いただいたfloatのカラム落ちとh1と.logo_and_titleのfloatを解消を参考に 647px以下でh1と.logo_and_titleのfloat解除しmargin:0 auto;をつけることで中央表示させることができました。 長い間詰まっていたので解決することできてうれしいです。 ありがとうございました。
guest

0

カラム落ちさせないのであれば、画面からはみ出すと思いますが、それでよろしいのですか?
サンプル

css

1.top_logo_nav { 2 width: max-content; /* 変更 */ 3 max-width: 960px; /* 変更 */ 4 margin: 20px auto 20px auto; 5 position: relative; 6}

投稿2020/05/21 02:07

Lhankor_Mhy

総合スコア35865

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

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

icchiman

2020/05/21 10:12

Lhankor_Mhyさんコメント、またサンプルをありがとうございます。 いただいたサンプルのようにカラム落ちさせない設定をすると、画面からはみだしてしまうのですね。 ブレイクポイント(@media screen and (max-width: 641px) まで小さくしてもロゴとメニューを1行に並べられるようにしたいのですが、もしかしたらロゴとメニューのfont-sizeを小さくしたら1列に並べられるのでは?と思いついたので試してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問