Q&A
タイトルと中身が合致してないように見受けられます。
聞きたいのは何ですか？
pcサイトの場合、コンテンツとサイドバーという２カラムのサイトが多いですよね。コンテンツ部分を800px、サイドバーを240pxなどとします。コンテンツ部分の800pxから16pxを引き算して、サイドバーとの余白を作ります。
自分は8の倍数でデザインしているので、すべてのpxは8の倍数になっています。
今まではこのようなデザインをしていましたが、最近はpx指定はしないものだという記事を見かけました。
pcモニタサイズはほぼ8の倍数になっているらしいですよね。そこでvwを基準にしてコンテナを作り、コンテンツとサイドバーを内包させます。また、paddingもcontainerの文字サイズを基準とします。文字サイズも8の倍数です。
しかし、ブラウザで表示させた場合、タスクバーなどの幅が含まれてしまうため、コンテンツやサイドバーは8の倍数となりません。
であれば、やはりpx指定するしかないと思うのですがどうでしょうか？
8の倍数ルールは必ず守らなければいけないものではないと思いますが。
css
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style type="text/css"><!-- 9 div#container{ 10 width:90vw; 11 height:500px; 12 display:flex; 13 flex-wrap: wrap; 14 margin: auto; 15 font-size: 16px; 16 17border: 8px solid red; 18 } 19 div#content{ 20 width:70%; 21 box-sizing: border-box; 22 background-color: silver; 23 padding:1rem; 24 } 25 div#sidebar{ 26 width: 30%; 27 box-sizing: border-box; 28 background-color: pink; 29 padding:1rem; 30 } 31 --></style> 32</head> 33<body> 34<div id="container"> 35 <div id="content"> 36 こんてんつ 37 </div> 38 <div id="sidebar"> 39 さいど 40 </div> 41</div> 42 43</body> 44</html>
>最近はpx指定はしないものだという記事
曲解している可能性もあるので、記事URLを提示してください。
ディスプレイのデバイス・ピクセル比も等倍、２倍、３倍などありますし、モニタのピクセル等倍表示や８にこだわっても良いことないと思いました。
taknaさん回答ありがとうございます。
8の倍数でやるならピクセル固定、ピクセル固定しないなら8の倍数ルールを捨てる事が必要なのかと思いました。
8の倍数だときれいに見えるということで取り入れていました。
「見えるということで取り入れていました。 」
それって、ご自身の目で確かめられましたか？ 今の時代の各ブラウザでご自身の目で比較してみてください。
回答1件
0
ベストアンサー
こんにちは。
ある程度はおっしゃるとおりで、たとえば、Bulma は「何分の何」でカラムサイズの指定をしますし、Bootstrap は 「12分の何」でカラムサイズ指定をしますので、そういう意味ではpx単位の指定をしていないと言えます。
一方で、container などの全体をラップする要素などは、Bulma も Bootstrap もpx単位の指定がされており、そういう意味ではpx単位の指定は健在です。
私見ですが、カラムサイズでpx単位の指定をしていないのは、フレックスレイアウトで流動的なサイズ指定をしているからであって、blendeggさんがおっしゃるようなvwを参照するサイズ指定とはまた別の視点ではないでしょうか。
つまり、一言でいうと、ケースバイケースではないでしょうか。
投稿2021/06/03 01:30
総合スコア36981
あなたの回答
tips
プレビュー
