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

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

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

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

CSS

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

解決済

flexで横並びにした要素の一部分だけを横幅いっぱいに広げたい

mupo
mupo

総合スコア35

HTML5

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

CSS

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

3回答

0グッド

0クリップ

1259閲覧

投稿2021/07/16 07:35

前提・実現したいこと

イメージ説明

タイトルボックスをflexで2列の横並びにしています。
ここのボーダーだけを常にブラウザの横幅いっぱいに広げたいのですが、どうしてもうまくいきません。

横幅は可変で指定しており、指定を外すとボーダーは横幅いっぱいになるのですが、代わりにタイトル位置がずれてしまってデザイン通りになりません。
ボーダーだけを横幅いっぱいにする方法はないでしょうか?

該当のソースコード

css

1.index { 2 position: relative; 3 display: flex; 4 margin: 0 auto; 5 max-width:1200px; 6} 7 8.index >div { 9 width: 50%; 10} 11 12.index div ul { 13 position: relative; 14 display: flex; 15 flex-wrap: wrap; 16 justify-content: center; 17 margin: 0 auto; 18 padding: 0; 19} 20 21.index div ul li { 22 width: 41%; 23 margin: 2%; 24 height: 180px; 25 line-height: 180px; 26 background: #000; 27 text-align: center; 28 list-style: none; 29} 30 31h3.border { 32 position: relative; 33 padding: 0 65px; 34 text-align: center; 35 font-size: 20px; 36 font-weight:normal; 37} 38 39h3.border:before { 40 position: absolute; 41 top: calc(50% - 1px); 42 left: 0; 43 width: 100%; 44 height: 2px; 45 content: ''; 46 background: #993333; 47} 48 49h3.border span { 50 position: relative; 51 display: block; 52 width: 200px; 53 padding: 20px 0; 54 margin: 0 auto; 55 background: #000; 56 color: #fff; 57 border: 1px solid #993333; 58}

HTML

1 <div class="index"> 2 <div> 3 <h3 class="border">タイトル</h3> 4 <ul> 5 <li></li> 6 <li></li> 7 <li></li> 8 <li></li> 9 </ul> 10 </div> 11 <div> 12 <h3 class="border">タイトル</h3> 13 <ul> 14 <li></li> 15 <li></li> 16 <li></li> 17 <li></li> 18 </ul> 19 </div> 20 </div>

試したこと

max-width指定を外す→
指定しないとタイトル位置がずれてしまう。

spanやpなどでborderを別に作り、absoluteで重ねる→
うまくいきませんでした。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

2

多少乱暴な方法でも良いのであれば、borderのあるbefore疑似要素の位置を画面外に配置するという方法で実現できるかと思います。

css

1body{ 2 /* 横幅いっぱいに広げたborder部分がはみ出した領域をスクロールさせない */ 3 overflow-x: hidden; 4} 5 6h3.border:before { 7 position: absolute; 8 top: calc(50% - 1px); 9 /* 左端と右端を画面外へ吹っ飛ばす */ 10 left: -100vw; 11 right: -100vw; 12 height: 2px; 13 content: ''; 14 background: #993333; 15}

単純に画面外へborderの端を吹き飛ばすと画面が横方向へスクロールするので、bodyのoverflow-xで横方向スクロールを抑止しています。

codepenでのデモ

投稿2021/07/16 07:52

hope_mucci

総合スコア4403

mupo, Lhankor_Mhy👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mupo

2021/07/16 07:59

コメントありがとうございます。こちらの方法でもうまくできました!複数のやり方がわかり勉強になります。ありがとうございました。
hope_mucci

2021/07/16 08:07

Lhankor_Mhyさんのコメントでも触れさせていただきましたが、フレックスボックス中のposotion:relativeにボーダー配置調整以外の意味があるとrelativeを削除できなくなるかと思います。position:relativeを全削除しても問題なければLhankor_Mhyさんの案のほうが安全かもしれません。 私の案は親要素にrelativeが必要でも使えます。横スクロールできなくなるところだけは留意してください。

0

ベストアンサー

フレックスレイアウトと絶対配置の静的位置を利用してみるのはどうでしょう?
以下のようにするとどうなりますか?

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/s37r4v58/

css

1.index { 2 /* position: relative; 削除 */ 3 display: flex; 4 margin: 0 auto; 5 max-width: 1200px; 6} 7 8/* ... */ 9 10h3.border { 11 /* position: relative; 削除 */ 12 padding: 0 65px; 13 text-align: center; 14 font-size: 20px; 15 font-weight: normal; 16 display: flex; /* 追加 */ 17 align-items: center; /* 追加 */ 18 justify-content: center; /* 追加 */ 19} 20 21h3.border::before { 22 position: absolute; 23 /* top: calc(50% - 1px); 削除 */ 24 left: 0; 25 width: 100%; 26 height: 2px; 27 content: ''; 28 background: #993333; 29}

投稿2021/07/16 07:51

Lhankor_Mhy

総合スコア33631

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mupo

2021/07/16 07:58

コメントありがとうございます。デザインがずれることなくボーダーが横幅になりました! フレックスレイアウトと絶対配置の静的位置について詳しく調べてみたいと思います。本当にありがとうございました。
Lhankor_Mhy

2021/07/16 08:03

お役に立てたようで何よりです。
hope_mucci

2021/07/16 08:04

position: relativeを削る副作用が気になりますが、borderのためにrelativeを入れていて他の表示に影響がなければ、この方法が一番まっとうだと思います。 (この方法はタイトル以外のposition:relativeを全部削除することでh3.border::beforeについたabsoluteの起点がbodyになるのでleft:0で画面端にborderを動かすことができるようになっています)
Lhankor_Mhy

2021/07/16 08:05

> relativeを削る副作用が気になり そこなんですよね。 とりあえず、見えてるものだけで判断しました。

0

max-width指定を外す→

指定しないとタイトル位置がずれてしまう。

普通にこれで問題ないと思います
あえて言えば「body{margin:0px}」はつけておいたほうがよいですが

投稿2021/07/16 07:50

yambejp

総合スコア108937

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mupo

2021/07/16 07:57

コメントありがとうございました。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML5

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

CSS

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