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

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

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

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

CSS

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

Q&A

解決済

1回答

2908閲覧

(html css) max-widthが効かない!

xue

総合スコア6

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/12/10 14:57

前提・実現したいこと

input-pledgeでmax-width: 550px;にしたいのですが、反映されません。

該当のソースコード

(HTML)

<div class="info"> <label for="ins0"> ■保険加入状況 </label> <div class="format format-flex"> <div> <div> <label for="ins1"> ・健康保険 </label> <div class="format"> <input type="radio" class="bunrui" name="emp" required value="有">有 <input type="radio" class="bunrui" name="emp" required value="無">無 </div> </div> </div> <div> <label for="pledge"> 未加入の場合の誓約 </label> <div class="format"> <input type="text" required class="inputsome input-pledge" name="seiyaku1"> </div> </div> </div>

(CSS)
.info {
margin-bottom: 40px;
}

.format {
margin-top: 10px;
}

.format-flex {
display: flex;
margin-top: 10px;
}

.inputsome {
box-sizing: border-box;
height: 32px;
background: #ffffff;
border: 1px solid #708090;
border-radius: 4px;
padding: 0 10px;
margin: 0 0 0 10px;
font-size: 16px;
color: #333333;
letter-spacing: .1em;
margin-bottom: 5px;
margin-right: 5px;
}

.input-pledge {
width: 100%;
max-width: 550px;
}

補足

divを横並びにしたところ、右側のdivのinputのmax-widthが効かなくなりました。
max-widthを反映させるにはどのようにすればよろしいでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

divを横並びにしたところ、右側のdivのinputのmax-widthが効かなくなりました。

display: flex;で子要素を横並びにすると、子要素の幅はデフォルトでは広がりません。そのため、その孫要素のテキストボックスの幅もmax-widthより小さくなるので、max-widthは無意味になります。

flex-grow flex-shrink flex-basis でフレックスアイテムの幅の拡縮、基準幅を設定するようにします。

具体的には、
まず、HTMLで下記のようにフレックスアイテムのdivにクラスを追加します。

html

1 <div class="format format-flex"> 2 <div> 3 4 <!-- 略 --> 5 6 </div> 7 <div class="pledge-wrapper"> <!-- クラスを追加 --> 8 <label for="pledge"> 9 未加入の場合の誓約 10 </label> 11 <div class="format"> 12 <input type="text" id="pledge" required class="inputsome input-pledge" name="seiyaku1"> 13 </div> 14 </div> 15 </div>

追加したクラスに対して flex-grow flex-shrink flex-basis を設定します。

css

1.input-pledge { 2/* width: 100%; 削除 */ 3/* max-width: 550px; 削除 */ 4 width: calc(100% - 10px); /* 追加 */ 5} 6 7/* 以下追加 */ 8.pledge-wrapper { 9 flex-grow: 0; 10 flex-shrink: 1; 11 flex-basis: 550px; 12}

Flexbox の基本的な使い方/Web Design Leaves

投稿2020/12/10 16:15

hatena19

総合スコア33620

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

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

xue

2020/12/11 04:25

無事、子要素の幅を広げることができました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問