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

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

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

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

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2165閲覧

bootstrap4 flexを使ったボックス内のaタグのリンクをボックス内の全範囲にしたい

kagaminoB

総合スコア14

CSS3

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

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2018/04/06 11:13

bootstrap4 を使用しています。
flexでリストをボックス(大きいメニュー)にし横並びに4つ並べています。
flex内には <li> のリストを作成し <li> 内のテキストを <a>でリンクしています。
それぞれのボックス内の右下にはFontawsomeのアイコンが表示されるようにしています。
hoverでボックス内のすべての背景色を変更したいのですがテキストの背景色のみ変更されている状態です。

<li>を<div>で囲むとよいかと設定するとボックスが整列せず、 【http://kana-webmanual.hatenablog.com/entry/2017/08/02/160052】のサイトを参考にしましたできずお手上げになりました。

html

1 2<ul class="flex-container"> 3 <li class="waku m-arrow1"><a href="">中メニュー1</a></li> 4 <li class="waku m-arrow1"><a href="">中メニュー2</a></li> 5 <li class="waku m-arrow2"><a href="">中メニュー3</a></li> 6 <li class="waku m-arrow3"><a href="">中メニュー4</a></li> 7</ul>

css

1.flex-container{ 2 display: flex; 3 flex-wrap: wrap; 4} 5 6.flex-container li{ 7 margin: 10px; 8 border: 1px solid rgba(0, 0, 0, 0.4); 9} 10 11.m-arrow1, 12.m-arrow2, 13.m-arrow3{ 14 position: relative; 15} 16 17.m-arrow1::before{ 18 position: absolute; 19 bottom: 5px; 20 right: 5px; 21 display: block; 22 font-size:1.2rem; 23 content:'\f35d'; 24 font-family: "Font Awesome 5 Free"; 25 font-weight: 900; 26 color:#f57c00; 27} 28 29.m-arrow2::before{ 30 position: absolute; 31 bottom: 5px; 32 right: 5px; 33 display: block; 34 font-size:1.2rem; 35 content:'\f35d'; 36 font-family: "Font Awesome 5 Free"; 37 font-weight: 900; 38 color:#0091ea; 39} 40 41.m-arrow3::before{ 42 position: absolute; 43 bottom: 5px; 44 right: 5px; 45 display: block; 46 font-size:1.2rem; 47 content:'\f35d'; 48 font-family: "Font Awesome 5 Free"; 49 font-weight: 900; 50 color: #f44336; 51} 52 53.waku{ 54 display:inline-block; 55} 56 57.waku a { 58 display: block; 59 width: 100px; 60 height: 100%; 61 background:#fff; 62} 63 64.waku a:hover{ 65 background:#eff; 66}

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

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

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

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

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

guest

回答1

0

ベストアンサー

bootstrap4の環境が無く、ご提示のコードで判断しての推測ですが、CSSの設定を変更すれば良いと思います。

とりあえず、簡単な対処としては.waku awidth: 100px;の単位を%に変更ではどうですか?

-追記-
質問内容を勘違いしていましたので、回答を編集しました。

投稿2018/04/08 04:38

編集2018/04/08 04:47
yoshinavi

総合スコア3521

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

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

kagaminoB

2018/04/18 05:30

回答ありがとうございました。 ご教示いただいた方法でcss を修正しましたがテキストの背景色のみ変更されました。 liのリストで作成することをあきらめhtml から見直し<div>のみでテキストくくり、width:100%で設定できました。 ありがとうございました。
yoshinavi

2018/04/18 06:51

自己解決されたみたいで何よりです。(^^) 実際のコードでは、ご提示いただいたCSS以外に、クラスが付与されているのでしょうか? ご提示のコードではテキストを余白が無い状態でborderが囲い、疑似要素のアイコンが上に飛びだすようになっています。 ご提示のコードには「li」に幅や高さが無いので、中のテキスト部分によって大きさが定められます。 余白が無ければ、「テキスト背景= <li>の背景」になります。 余白が有る場合、幅が100px以下であれば同様の動きになります。100px以上であれば、超えた部分は変化がおきません。 例えば「li」に幅と高さを200px設定してから、「waku a」のwidthを100pxと100%の違いを確認すると、どこまでが範囲になっているか、分かりやすいかと思います。
kagaminoB

2018/04/22 08:09

コメントありがとうございます。 ご指摘の通りです。「li」の中にはfontawsomeのアイコンを設定し「waku」の右下に表示されるよう高さや余白を設定していました。 余白が問題だとは思いませんでした。投稿時のコードを残しているので試してみます。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問