エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS
ボタンのラベルが短い場合でも、ボタン自体には最低限ある程度の幅を持たせたいという場合がある。そん... ボタンのラベルが短い場合でも、ボタン自体には最低限ある程度の幅を持たせたいという場合がある。そんなときには、ボタン自体にmin-widthを指定して最低幅を設定する。 button { min-width: 10em; } しかし、そのボタンを配置するコンテナの幅が、ボタン自体のmin-widthの値よりも狭くなってしまうこともある。すると、ボタンがコンテナをはみ出してしまう。 ボタンの幅をコンテナに収めるためにはmax-width: 100%が使えそうにも思えるが、min-widthの方が優先されてしまうので機能しない。そこで、min-widthの値としてmin()を使うようにする。 button { min-width: min(10em, 100%); } このようにすると、min-widthの値が100%を超えることを防げる。 See the Pen Untitled by Yuh