CSS

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

Sponsored Link

Sponsored Link

CSSの基本である高さと幅、余白について基本的なことをまとめてみましたが。

CSS 幅と高さの指定方法 widthとheightプロパティ基本

CSS marginとpadding 余白の指定方法 基礎

その上でいくつかのプロパティについて見ていきたいと思います。

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に以下のように記述をしてみます。

親要素を2つ作りそれぞれの中にpタグを2つ置き。
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プロパティで使われる3つの値

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

 

初期値は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に対応」位を気にかければ良いということのようです。

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

まとめ

幅や高さ、余白について記事を書いたあとだったので。
レスポンシブデザインに必要なmax-widthとmin-width 、box-sizingのborder-box について簡単にまとめてみました。

max-widthとmin-widthは大きさの範囲を上限と下限で指定するものでPCやタブレット・スマートフォンなど画面の大きさが違うものに対して
大きさを調整します。

またbox-sizingのborder-boxは要素のうちpaddingやborderをひとまとめにして記述できますから。
レスポンシブデザインに欠かせない可変的な単位(%、emなど)と絶対的な単位を組み合わせる場合など。
かなり便利です。

ということで今回はここまで。

 

 

Sponsored Link

Sponsored Link

関連記事

  1. CSS marginとpadding 余白の指定方法 基礎
  2. aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを…
  3. HTMLで動画や画像を埋め込みする方法を詳説
  4. HTMLとCSS 初歩的な文字装飾 基本まとめ
  5. CSS 擬似要素beforeとafter 使い方基本
  6. HTML ul ol liタグで作る箇条書きリスト 使い方の基本…
  7. CSS最低の書き方の基本 CSSはどこにあるの?
  8. CSS positionの使い方

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. WordPressエディタ「Gutenberg」の使い方 総まとめ
  2. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  3. 【Basics of site construction】ワードプレスで日付を消す方法
  4. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  5. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  6. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  7. HTMLで動画や画像を埋め込みする方法を詳説
  8. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)

ソフト・アプリの使い方

PAGE TOP