HTML/CSS

【HTML/CSS】 "max-width"と"min-width" 使い方まとめ

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

HTML/CSSでレスポンシブデザインをするためには必ず習得しておきたい「max-widthとmin-width」について一緒に見ていこうと思います。

レスポンシブデザインってよく聞くんですが、
そもそも何のことなんですか?

IT博士
IT博士

スマホやPCやタブレットなど、様々な大きさの端末で見てもちょうどいい大きさに表示されるようにするWebデザインのことですよ♪

今回は、そんなスマホ対応をする際にぜひ使ってほしい「max-widthとmin-width」について簡単に解説します。

 



私は現役でフリーランスエンジニアとしてWebサービスやサイト制作をしながら、現在ご覧いただいているブログの運営をしております。

最小幅(min-width)の使い方

"min-width"では「"width"の取ることのできる最小値」を指定しています。

簡単に言うと、要素がこれ以上小さくならない幅を指定することができます。
まずはサンプルコードを見ていきましょう。

<!-- 要素が100pxより小さくならない(100px以上)という指定 -->
p {
  min-width :100px;
}

このように指定すると「段落要素(pタグ)が100pxよりも小さくならない」という意味になります。

"min-width"の使いどころ

"width"を%で指定したときに、"min-width"をセットで使うと便利なんです。

例えば"width:50%"を指定したとき、ウェブページを見る端末やブラウザのサイズによって要素が小さすぎたり、大きすぎたりするのです。

「PCで見たときはちょうどよい大きさだけど、スマホで見ると小さい!」

こんな場面はよくあるお思います。
そんな時に"min-width"を指定しておくと、スマホで見たときに指定したサイズよりも小さくならないのです。

実際に使った例をサンプルコードで見ていきましょう!

<p>親要素が大きい場合</p>
<div class="sample1">
  <p class="notmin">最小幅なし</p>
  <p class="min">最小幅 "100px"</p>
</div>

<p>↓親要素が小さい場合</p>
<div class="sample2">
  <p class="notmin">最小幅なし</p>
  <p class="min">最小幅 "100px"</p>
</div>

このHTMLに次のCSSを適応させます。

<!-- 親要素大きめの場合 -->
.sample1 {
  width: 200px;
  background:skyblue;
}
<!-- 親要素小さめの場合 -->
.sample2 {
  width: 100px;
  background:skyblue
}
<!-- 最小幅なしの場合 -->
.notmin {
  background:gray;
  width: 50%;
}
<!-- 最小幅ありの場合 -->
.min {
  background:orange;
  width: 50%;
  min-width: 100px;
}
IT博士
IT博士

このように"min-width"を使うことで、それぞれの要素に対して「これよりは小さくしない」という制限をつけることができます。

 

 

最大幅(max-width)の使い方

次に、"max-width"の使い方を見てみましょう。

考え方は最小幅と基本的に同じです。
違うところは、使いどころが"min-width"と少し異なります。

"max-width"では「"width"の取ることのできる最大値」を指定します。
つまり、要素がこれ以上は大きくならない幅を指定することができます。

例えば、次のサンプルコードのように書くと「段落要素(pタグ)が200pxよりも大きくならない」という指定をすることができます。

<!-- 要素が200pxより大きくならない(200px以下)という指定 -->
p {
  max-width :200px;
}

"max-width"の使いどころ

例えば、要素が"width:80%"のとき
「スマホで見るとちょうど良い大きさなのに、PCで見るとでかすぎる!」
なんてことがよくあります。

そんなときに使いましょう。
"max-width"(最大幅)が決まっていれば「画面の大きいPCで見ても、これ以上は幅が大きくならない!」という設定ができるようになります。

説明はこのくらいにしてサンプルコードを見ていきましょう!

<p>親要素が小さい場合</p>
<div class="sample1">
  <p class="notmin">最大幅なし</p>
  <p class="min">最大幅"100px"</p>
</div>

<p>親要素が大きい場合</p>
<div class="sample2">
  <p class="notmin">最大幅なし</p>
  <p class="min">最大幅"100px"</p>
</div>

このHTMLに次のCSSを適用します。

<!-- 親要素小さめの場合 -->
.sample1 {
  width: 100px;
  background:skyblue;
}
<!-- 親要素大きめの場合 -->
.sample2 {
  width: 200px;
  background:skyblue;
}
<!-- 最大幅なしの場合 -->
.notmin {
  background:gray;
  width: 80%;
}
<!-- 最大幅ありの場合 -->
.min {
  background:orange;
  width: 80%;
  max-width: 100px;
}

画像の縦横比を保つ方法

”max-width”を使ったときに縦横比が崩れてしまうことがあると思います。
そんな時は、CSSに以下の指定を追加します。

height: auto;

たったこれだけなんです。
これで縦横比を保ったまま画像が縮小されるようになります。

まとめ

今回は、HTML/CSSでレスポンシブデザインをするためには必ず習得しておきたい「max-widthとmin-width」について一緒に見ていきました。

このプロパティはWebサイトを作るうえでは必ずと言ってもいいほど必要なスキルなので、覚えておきましょう!

https://itthestudy.com/html-div%E3%81%A8span%E3%82%BF%E3%82%B0%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%EF%BC%9F%E8%AA%B0%E3%81%AB%E3%81%A7%E3%82%82%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%A7%A3%E8%AA%AC/


 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.