menu
menu

キーワード検索

 

12月更新・前月(11月)の人気記事トップ10 - 12/02/2019

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  5. (圏外↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. ( 4 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  7. (圏外↑) 【Google】Googleアカウントのメールアドレスを変更する方法
  8. (圏外↑) 【Mac】MacにGoogle Driveをインストール
  9. (圏外↑) 【Suica】iPhoneでSuicaをクレジットカード無しで使う方法
  10. ( 7 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

min-width【CSSリファレンス】

min-width【CSSリファレンス】

こんにちは(・∀・)

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはmin-widthです。

概要

min-widthプロパティを使用して要素の横幅の最小値を指定します。親要素の横幅より大きな値を指定した場合は親要素で入力した横幅が優先されます。文字列は指定した幅に達すると自動的に折り返されます。


.sample {
  min-width: 300px;
}
適用要素

すべての要素
置換要素以外のインライン要素ととtr要素・thead要素・tbody要素・tfoot要素を除く

指定できる値
実数値+単位
要素の最小横幅を実数値+単位で設定
%値
要素の最小横幅を親要素の幅に対する割合で設定
初期値

0

サンプル
HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
</p>
CSS

.demo {
  min-width: 300px;
}
Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.

min-width:300pxと指定してあるのでブラウザの横幅を縮めても要素の横幅は300pxより小さくなりません。

  • CSS
このエントリーをはてなブックマークに追加