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

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

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

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

CSS

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

Q&A

1回答

438閲覧

メニューの長さが縮まりません。

takawork

総合スコア95

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/09/10 17:02

イメージ説明
メニュー自体の長さを縮めたい思っています。
具体的にはホームボタンのボックスの左左端と「あなたにぴったりの」の「あ」の左端が一致するくらいの長さにしたいと思っています。
.wsmenu のmax-widthを変更しても変わりませんでした。
よろしくお願いします。

<div class="topbarbg clearfix"> <div class="headerwp clearfix"> <div class="desktoplogo clearfix"><a href="index.html"><img src="images/logo.png" alt=""></a></div> </div> <!-- ナビゲーション --> <nav class="wsmenu clearfix"> <ul class="wsmenu-list"> <!-- ホームリンク --> <li aria-haspopup="true"><a href="#" class="wshomelink active"><i class="fas fa-home"></i><span class="hometext">&nbsp;&nbsp;ホーム</span></a></li> <!-- メガメニュー1 --> <li aria-haspopup="true"><a href="#"><i class="fas fa-list-ul"></i>代理店の選び方 <span class="wsarrow"></span></a> </li> <!-- メガメニュー2 --> <li aria-haspopup="true"><a href="#"><i class="fas fa-list-ul"></i>広告の種類 <span class="wsarrow"></span></a> </li> <!-- メガメニュー3 --> <li aria-haspopup="true"><a href="#"><i class="fas fa-list-ul"></i>発注のポイント <span class="wsarrow"></span></a> </li> <!-- メガメニュー4 --> <li aria-haspopup="true"><a href="#"><i class="fas fa-list-ul"></i>業界から探す <span class="wsarrow"></span></a> </li> <!-- メガメニュー5 --> <li aria-haspopup="true"><a href="#"><i class="fas fa-list-ul"></i>悩みから探す <span class="wsarrow"></span></a> </li> <!-- メガメニュー6 --> <li aria-haspopup="true"><a href="#"><i class="fas fa-list-ul"></i>このサイトの使い方 <span class="wsarrow"></span></a></li> </ul> </nav> </div>
.wsmenu html, .wsmenu body, .wsmenu iframe, .wsmenu h1, .wsmenu h2, .wsmenu h3, .wsmenu h4, .wsmenu h5, .wsmenu h6 { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Helvetica, sans-serif; -webkit-font-smoothing: subpixel-antialiased; font-smoothing: antialiased; font-smooth: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased; font-smooth: subpixel-antialiased; } .wsmenu .cl { clear: both; } .wsmenu img, object, embed, video { border: 0 none; max-width: 100%; } .wsmenu a:focus { outline: none; } .wsmenu:before, .wsmenu:after { content: ""; display: table; } .wsmenu:after { clear: both; } /* ================== Desktop Main Menu CSS ================== */ .wsmenu { font-family: Helvetica, sans-serif; color: #fff; position: relative; font-size: 15px; padding: 0; width: 100%; display: block; margin: 0px auto 0 auto; max-width: 1140px; } .wsmenu-list { border:1px solid rgb(209, 204, 204); } .wsmenu>.wsmenu-list { text-align: left; margin: 0 auto 0 auto; width: 100%; display: table; position: relative; padding: 0; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .wsmenu>.wsmenu-list>li { text-align: center; display: table-cell; padding: 0; margin: 0; background-color:#FDECE6; color:black; font-weight: bold; } .wsmenu>.wsmenu-list>li>a { display: block; padding: 0 13px; line-height: 30px; text-decoration: none; position: relative; } .wsmenu>.wsmenu-list>li>a i { display: inline-block; font-size: 14px; line-height: inherit; margin-right: 9px; vertical-align: top; } .wsmenu>.wsmenu-list>li>a.wshomelink i { margin-right: 0px; font-size: 14px; padding: 0px 3px; } .wsmenu>.wsmenu-list>li>a .wsarrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; content: ""; float: right; height: 0; margin: 0 0 0 9px; position: absolute; text-align: right; top: 22px; width: 0; }

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

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

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

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

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

guest

回答1

0

解決方法は二つあります。

1, .topbarbgにpaddingを設定する

2, .topbarbgの中の二つの要素の親となる要素を作成し、max-width等を指定

投稿2020/09/11 02:45

kyoya0819

総合スコア10429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問