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

初心者向けにCSSのmin-widthの使い方について解説しています。min-widthは要素に最小の幅を設定することが出来ます。max-widthとともにレスポンシブなどでもよく使われるので、この機会にぜひ覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSのmin-widthの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

min-widthとは

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

 

min-widthの使い方

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

以下の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では初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。