CSS

CSS　レスポンシブデザインに欠かせないmax-widthとmin-width 、box-sizingのborder-box 使い方と基本

max-widthとmin-width

スマホやPCなど
どんな大きさの端末で見てもちょうどいい大きさに表示されるレスポンシブデザインを作る時
それぞれwidthの最小値と最大値を決めることができる
min-widthとmax-widthというプロパティが有効です。

レスポンシブデザインの注意点

端末によって大きさが変わるレスポンシブデザインはスマホの普及もあって今や避けては通れないものですが。
そのコードを書く時。
幅、フォントなどの大きさの指定が常に問題になります。
pxなどの絶対値で書くと可変的動きに対応できませんので
レスポンシブ対応にふさわしい、可変に対応した「%」「rem」「em」や「viewport」などの単位がよく使われるのですが。
不都合が生じる場面がでてきます。

例えば、「%」を単位として記述した場合、要素の幅80%を指定したとして
大型画面だと画面いっぱいに広がって、見にくいというようなことが起こります。
逆にPCでちょうどよくてもスマホで見ようと思ったら小さすぎる場合もあります。
そこで大きすぎたり小さすぎたりしないように制限をかけるのがmax-widthとmin-widthというプロパティです。

最大幅（max-width）の使い方

最大幅（max-width）を指定すると「指定した数値以上に大さくならない」様にすることができます。

実際に例を作ってみていきます。
HTMLに以下のように記述をしてみます。

親要素を２つ作りそれぞれの中にpタグを２つ置き。
pタグの中にCSSで指定する内容を書きます。
それぞれにclassで名前をつけ目印を作ります。

<p>↓親要素が小さい場合</p>
<div class="test1">
  <p class="unspecified">min-widthを指定しない</p>
  <p class="specified">min-width最大幅を200pxとする</p>
</div>

<p>↓親要素大きめの場合</p>
<div class="test2">
  <p class="unspecified">min-widthを指定しない</p>
  <p class="specified">min-width最大幅を200pxとする</p>
</div>

CSSは以下。

.test1 {
  
  width: 200px;
  background:skyblue;
}
.test2 {
  
  width: 400px;
  background:red;
}
.unspecified {
  
  background:gray;
  width: 80%;
}
.specified {
  
  background:green;
  width: 80%;
  max-width: 200px;
}

親要素の幅を違えます。

最初は width: 200px;次の親要素はwidth: 400px;。

さらにpタグの一方に max-width: 200px;と指定をし、もう一つには max-widthを指定しません。

するとブラウザ表示は以下のようになります。

親要素の幅が200pxの場合。
灰色の部分も緑色の部分も親要素の80％という指定がありますから。
同じ幅160pxになります。
親要素を倍の400pxにした場合。
灰色部分は親要素の80％指定ですのでその割合で幅の長さが決まります。

しかしmax-widthをを200pxに指定している緑の方は親要素を大きくしても
200px以上の長さにはなりません。

この様にタブレットではちょうどよい大きさのものを大画面でみたときでも
あまり広がりが出ないようにして見やすくしたいときなどに有効です。

最小幅（min-width）の使い方

min-widthは「これ以上小さくならない」という設定で。
タブレットで見た場合などに小さくなりすぎて見にくくなるのを防ぐために使われます。

さきほど記述をしたCSSの内容を少し変え。

.test1 {
  
  width: 100px;
  background:skyblue;
}
.test2 {
  
  width: 400px;
  background:red;
}
.unspecified {
  
  background:gray;
  width: 80%;
}
.specified {
  
  background:green;
  width: 80%;
  min-width: 100px;
}

親要素が小さい場合の親要素を100pxとしました。
またpタグの下の指定に min-width: 100px;を入れました。

すると以下のようにブラウザ表示されます。

こちらは親要素が大きくなるとそれに合わせて
つまりこの場合は親要素の80％の幅になりますが。
親要素を小さくした場合。

上の灰色部分は親要素の幅が100pxだとその80％の長さになりますが。
下の緑の部分は指定した100px以下にならないことがわかります。

画像などがはみ出したり画像の縦横比がおかしくなる場合の対処法

例えば先程の例で。

pタグの下をmin-width: 100px;だったところをmin-width: 120px;にしたとします。
すると親要素の幅を100pxと小さくした場合親要素からはみ出してしまいます。

はみ出さないようにしたい場合は

 max-width: 100%;

と指定すればはみ出さなくなります。

上記の例の場合は min-width: 100px;を外し。
max-width: 100%;を加えます。
この場合別にwidth: 80%;を指定してありましたのでその影響も加味し以下のようになります。

画像でやってみます。

緑の部分を画像に変えてみます。
わかりやすいように枠を付けました。

<p>↓親要素が小さい場合</p>
<div class="test1">
  <p class="unspecified">min-widthを指定しない</p>
  <img src="おじさん.jpg" alt="酔っ払ってます"  border="1" />
</div>

<p>↓親要素大きめの場合</p>
<div class="test2">
  <p class="unspecified">min-widthを指定しない</p>
  <img src="おじさん.jpg" alt="酔っ払ってます"  border="1" />
</div>

CSS

画像部分の背景のみ変更しました。

.test1 {
  
  width: 100px;
  background:red;
}
.test2 {
  
  width: 400px;
  background:red;

}
.unspecified {
  
  background:gray;
  width: 80%;
}

すると以下のようになります。

親要素を小さくすると画像がはみ出してしまいます。

そういう場合はCSSに

max-width: 100%;

と追加してあげると数値いかんにかかわらず親要素をはみ出すことはありません。

ブラウザ表示は以下になります。

またその様にした場合、若干縦長になっています。
max-width使用時にこんな感じで縦横比が崩れてしまってそれを修正したい場合。
CSSに

height: auto;

と追加で記述すると縦横比は本来の形に戻ります。

また「min-height」と「max-height」というプロパティもありますが。
min-widthとmax-widthと同じ様に使います。

box-sizingの使い方

box-sizingはCSS規格「CSS3」から追加されたプロパティで。

レスポンシブデザインをするのにとても便利なものです。
幅（width）と高さ（height）とpaddingとborderを一緒にして決められるからです。

要素の幅（width）と高さ（height）は表示領域しか決められないので。
それに内外の余白や内枠外枠を指定しなくてはなりません。
すべてpxで指定するのであれば問題はありませんが。

％で指定するときなど枠の太さは基本、pxで表しますので。
調整は面倒くさいので。
一緒に設定できれば便利です。

box-sizingプロパティで使われる３つの値

box-sizingで使われる値には以下の３つがあります。

初期値はcontent-boxというもので paddingとborderを幅と高さに含めません。
border-boxはpaddingとborderを幅と高さに含めます。
もう一つはinheritは親要素のborder-boxの値を引き継ぐものです。

この内

初期値content-boxはpaddingとborderを含みませんので。
幅（width）と高さ（height）を指定し、内側の余白と枠の線を指定するのと何ら変わりません。
ということはPXで指定しようとした場合には問題がありませんが。
％で指定をしようと思った場合には枠の太さとpaddingの大きさによっては親要素からはみ出してしまうこともあります。

またinheritについては
もし親要素がbox-sizingが指定していないのであればinheritに指定した場合自動的に子要素にはcontent-boxが適用されます。

となれば必要があれば border-boxで指定してあげればいいだけですから。
inheritはあまり使われることはないようです。

こう見ていくと使えるのはborder-boxですね。

％で指定しなくてはならない「レスポンシブデザイン」においては枠をpxで指定する場合など
box-sizing:border-boxというプロパティの値は欠かせません。

値がborder-boxの場合

border-boxはpaddingとborderを幅と高さに含めますので

width + 左marin ＋右marin = 100%になっていれば、paddingとborderがどんな値でも親要素にきれいに収まります

例えば

 　　<div class="borderbox">
      <p>border-boxdで表示しました</p>
    </div>

とdivタグで親要素を作りその間にpタグで小要素を作ります。

そのうえでCSSに以下のように記述をしました。

 .borderbox {
   background: green;
}
.borderbox p {
  box-sizing: border-box;
  width: 70%;
  margin: 15%;
  padding: 10px;
  border: solid 5px black;
  background:pink;
}

親要素に余白を入れない場合。
width: 70% margin: 15%;とかwidth: 90% margin: 5%;とかいずれ幅と左右外枠の合計が100になっていれば
ちょうど真ん中に表示領域が収まります。

width: 80% margin:10%にしたときの

ブラウザ表示

親要素にpadding（内枠）を指定した場合には
例えば padding: 10px にして
width: 90% margin:5%のとき

 .borderbox {
 
 padding: 10px ;
  background: green;
}


.borderbox p {
  box-sizing: border-box;

  width: 90%;
  margin: 5%;
  padding: 10px;
  border: solid 5px black;
  background:pink;
}

のブラウザ表示

この様に表示領域が上下左右の真ん中にきます。

更に枠の線を20pxと太くし。
線の色を黒から白に変えた場合。

ブラウザ表示は以下のようになります。

線をただ太くしただけできちんと真ん中に収まります。

非常に楽です^^;

box-sizingが効かないブラウザに対処するには

「CSS3」は新しい規格なので。
ほとんどのブラウザで大丈夫とはいえ。
古いブラウザでは反映されない場合があります。
そこで念の為

プロパティ名の前に書く「-webkit-」「-moz-」「-o-」「-ms-」などの文字を付けておくと古いバージョンにもCSS3のプロパティを対応させることができると言われています。
これをベンダープレフィックスといいますが。
更に調べてみましたらば最新版のCSS3datobox-sizingにはベンダープレフィックスは必要がないとのこと。
せいぜい「-webkit- ：Google ChromeとSafariに対応」位を気にかければ良いということのようです。

ベンダープレフィックスをたくさんつけると汚くなってしまいますので。
無視しても構わないレベルかと思います。