HTMLmin-widthとmax-widthとは?レスポンシブデザインでよく使われます。レスポンシブデザインとはスマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのことです。レスポンシブデザインを作るためには、min-widthとmax-widthを避けては通れません。これは、それぞれwidthの最小値と最大値を決める便利なものです。いってもなかなか分かりづらいと思うので、順々に解説していきます。min-width(最小幅)の使い方min-widthでは「widthの取ることのできる最小値」を指定します。言い換えると要素がこれ以上小さくならない幅を指定することができます。以下のように書くと「段落要素(pタグ)が300pxよりも小さくならない」という指定になります。要素が300pxより小さくならない(300px以上)という意味です。min-widthは具体的にどのようなときに使うのでしょうか。min-widthの指定方法widthを%で指定したときに、min-widthはセットで使うと便利です。width:50%のとき、ウェブページを見る端末(ブラウザ)のサイズによって要素が小さくすぎたり、大きすぎたりするわけです。PCでみる分にはwidth:50%はちょうどいい大きさだけど、スマホでは小さすぎる、ということがレスポンシブ対応のウェブサイトを制作していると起こります。そんなときにmin-widthを使えば「どんな端末・ブラウザで見てもこれよりは幅が小さくならない」という設定ができます。実際にmin-widthを使ってみましょう。width:50%とmin-width:300pxをセットで使って「親要素の幅が小さくなっても、要素の幅が300pxより小さくならない」ようにしてみます。親要素が小さくなっても最小幅が100pxに設定されていると100px以下の大きさになりません。このようにmin-widthを使うことで、それぞれの要素に対して「これよりは小さくならない」という制限を設定できます。今度はmax-widthの使い方を見ていきましょう。考え方は最小幅と基本的に同じですが、使いどころが少し異なります。max-widthでは「widthの取ることのできる最大値」を指定します。要素がこれ以上は大きくならない幅を指定することができます。以下のように書くと「段落要素(pタグ)が300pxよりも大きくならない」という指定になります。要素が300pxより大きくならない(300px以下)という意味です。max-widthは具体的にどのように使うのでしょうか。max-widthの指定方法たとえば要素がwidth:80%のときスマホで見るとちょうど良い大きさなのに、PCで見ると大きすぎて見にくい、なんてことがあります。そんなときmax-width(最大幅)が決まっていれば「画面の大きいPCで見ても、これ以上は幅が大きくならない」という設定ができます。実際にmax-widthを使ってみましょう。試しにmax-widthを使ってみましょう。width:80%とmax-width:300pxをセットで使って「親要素の幅が大きくなろうと、要素の幅は300pxより大きならない」ようにしてみます。親要素が大きくなっても最大幅が300pxに設定されていると300px以上の大きさになりません。最小幅と最大幅についてでした以上がmin-widthとmax-widthの説明になります、このようにmin-widthとmax-widthを使うことでスマホやPCを見やすくすることが可能になります。他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。technology.。