ボックスモデルと
パーセント指定を
極める
ボックスモデルの基本を振り返る

image: ボックスモデルとパーセント指定を極める

ボックスモデルをパーセントで指定するときの漠然とした疑問

 | 2023/08/28

基本

ボックスモデルのcontent-boxとborder-boxのおさらい
  • content-boxの場合

    content-boxではpaddingを設定した場合、追加という形で余白が作られます。そのため要素全体の幅は400 + 400 x 20% = 480pxとなり、親要素の横幅400pxからはみ出してしまいます。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig1-13.png
    border-boxの場合

    上記の問題を防ぐためにborder-boxがあります。border-boxの場合は、横幅は増えず、内部を仕切る形で余白が設定されます。結果として横幅が320pxと20%短くなります。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig2-10.png

応用

上記を踏まえ、今度は余白のスペースに代わりの子要素を追加して合計3つの要素で親ボックスを仕切ってみます
  • 親要素がborder-boxの場合に要素を並べる

    実践的なレイアウトでは親要素の中に子要素を複数並べてそれぞれの横幅を%で指定することが多いと思われます。
    簡単に示すと下記の様なコードになります。

    <div id="item_a">
    	<div class="side">item / side</div>
    	<div class="core">item / core</div>
    	<div class="side">item / side</div>
    </div>
    https://studio-happyvalley.com/wp/wp-content/uploads/fig3-8.png

    ここでうっかりしやすいのが親がborder-boxだと子要素の真ん中「item / core」の横幅を100%に指定しそうなことです。
    実際に指定するとわかりますがここは80%でないといけません。
    下はwidth:100%のサンプルです。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig4-4.png

    よく考えると解るんですがpaddingなどを使ってないのでbox-sizingの値は関係ないんですよね。

    ボックスモデルとパーセント指定のサンプル:https://labo.studio-happyvalley.com/percent/padding/

おまけ
1

%とvwの違い
  • ブラウザの横幅をそのまま使いたいときは注意。

    基本、vwはブラウザ横幅のパーセントに相当します。しかし、必ずしも100% == 100vwとなるわけではありません。
    例えば、もっとも違いが顕著なのがブラウザ横幅いっぱいのwidth:100%の要素です。
    下記のような違いがります。スクロールバーの横幅16pxの差がでます。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig5.png横幅を100%で指定した場合、親の横幅全体(スクロールバーの横幅をマイナスした)732px。https://studio-happyvalley.com/wp/wp-content/uploads/fig6-1.png横幅を100vwで指定した場合、ブラウザの横幅全体749px。

おまけ
2

canvas要素を簡単に指定する方法
  • おまけその2はcanvas要素を簡単に設定する方法

    このコンテンツのサンプルコードは赤の引き出し線をcanvas要素で作ってます。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig7.png

    HTMLは

    <canvas id="canvas3" width="50" height="100"></canvas>

    JSは

    	var canvas = document.getElementById('canvas');
    	var canvasL = document.getElementById('canvasLeft');
    	if (canvas.getContext) {
    		var ctx = canvas.getContext('2d');
    		ctx.strokeStyle = 'rgb(217,0,54)';
    		ctx.fillStyle = '#d90036';
    		ctx.beginPath();
    		ctx.arc(4, 50, 4, 0, 2 * Math.PI);
    		ctx.moveTo(4, 50);
    		ctx.lineTo(100, 50);
    		ctx.stroke();
    		ctx.fill();
    		var ctxl = canvasL.getContext('2d');
    		ctxl.strokeStyle = 'rgb(217,0,54)';
    		ctxl.fillStyle = '#d90036';
    		ctxl.beginPath();
    		ctxl.arc(46, 50, 4, 0, 2 * Math.PI);
    		ctxl.moveTo(46, 50);
    		ctxl.lineTo(0, 50);
    		ctxl.stroke();
    		ctxl.fill();
    	}

    と直線一本引くだけでも9行も必要になります。黒丸を設定するだけでも同じく9行。
    さらにcanvas要素は使用する場所へそれぞれ設定する必要があります。
    そのためこれをそれぞれ繰り返す必要があります。面倒ですねえ・・・。
    こういう場合はjavascriptの配列の出番です。
    幸い、設定値は相対的に指定できるので配列から取り出した要素には定数で設定できるので簡単です。

    function drawLines() {
    	var canvases = document.querySelectorAll('canvas');
    	canvases.forEach(function(item, num){
    		if (item.getContext) {	
    			let arcXPoint= 4;
    			let lineXPoint= 100;
    			if( item.id.includes('L') ){arcXPoint= 46;lineXPoint= 0; }
    			const ctx = item.getContext('2d');
    			ctx.strokeStyle = 'rgb(217,0,54)';
    			ctx.fillStyle = '#d90036';
    			ctx.beginPath();
    			ctx.arc(arcXPoint, 50, 4, 0, 2 * Math.PI);
    			ctx.moveTo(arcXPoint, 50);
    			ctx.lineTo(lineXPoint, 50);
    			ctx.stroke();
    			ctx.fill();
    		}
    	});
    }
    
    export { drawLines };
    
    /* モジュール化してます */

    ボックスモデルとパーセント指定のサンプル:https://labo.studio-happyvalley.com/percent/padding/

『ボックスモデルとパーセント指定を極める』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition