CSS max-widthとmin-widthで幅が自動で最適になるように設定

max-width min-widthとは、文字の通り横幅の最大、最小を決める設定です。

今、Webサイトでは様々な画面幅のPCでも、見やすく文字や画像などの要素が配置出来る「レスポンシブデザイン」というWebレイアウト手法がよく使われています。 このレスポンシブデザインを使う時、高頻度で登場する設定が、このmax-width min-widthなのです。

この記事では、

  • max-width min-widthの書き方がわからない!
  • max-width min-widthの使い所がわからない!
  • widthとどう違うの?
  • どう組み合わせればいいの?

こんな疑問を解決します。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

max-widthとは?min-widthとは?

max-width min-widthについて、おさらいです。

max-width min-widthとは、文字の通り横幅の最大、最小を決める設定です。

今、Webサイトでは様々な画面幅のPCでも、見やすく文字や画像などの要素が配置出来る「レスポンシブデザイン」というWebレイアウト手法がよく使われています。 このレスポンシブデザインを使う時、高頻度で登場する設定が、このmax-width min-widthです。

max-widthは横幅の最大値を決め、min-widthは横幅の最小値を決めます。

max-widthとmin-width書き方・使い方

〇〇 {
    max-width: 500px;
    min-width: 200px;
}

% pxのどちらの単位でも使えますが、基本はpxを使います!そして、当たり前ですが、min-width<max-widthになるように値を調節しましょう。

max-widthとmin-widthを使用例紹介

max-width min-widthを使う場所は、「それ以上要素が大きくなってほしくない時」です。

例えば、「画面の小さいスマートフォンでは、幅いっぱいに要素を表示し、画面の大きなPCでは、300〜400pxの大きさにおさえたい」といった場合に使えます。

この場合、widthと組み合わせることで、実現できます。

〇〇 {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
}

このように設定します。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ