CSSのmin-widthの使い方【初心者向け】

CSSのmin-widthの使い方について解説します。min-widthは要素の最小の幅を設定できるプロパティです。レスポンシブサイトなどでも使いますので、ぜひこの機会に覚えましょう。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

min-widthとは

widthを％などで可変の値で設定した時に最小値を設定できるプロパティです。

 

min-widthの使い方

例えば、レスポンシブサイトを作成していて、「どんな大きさのブラウザでみても、見やすいものにしよう」としてコンテンツの幅をwidth: 30%;で設定した要素があるとします。

そのコンテンツが、スマホなどの横幅の小さいブラウザで見た時に、狙ったよりも小さくなってしまった場合、わざわざメディアクエリなどを利用して別の値を設定しなくても、min-width を％ではなく数値(px)で設定することで、実寸が その値よりも小さくならないようになります。

 

[PR] Webデザインで副業する学習方法を動画で公開中

実際に書いてみよう

以下のHTMLにCSSを適用させると、ブラウザの幅を小さくしてもmax-widthで指定した幅以下にはなりません。

HTML

<div class="container">
  <div class="box">
    <p>ブラウザー幅を変更してみてください。<br>min-width: 200px; を設定したので、<br>
    200px以下にはなりません。</p>
  </div>
</div>

 

CSS

.box{
  width: 30%;
  height: 200px;
  min-width: 200px;
  background-color: #66b6d5; 
}

 

補足事項

 

この記事を監修してくれた方 和田 祥子（わださちこ） フリーランスのWebデザイナー7年目です。Ruby勉強中。 テニスと音楽とビールが好きです。

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。