2024年11月25日(月)
[CSS] <body></body>にもmargin #HTML5&CSS3&JavaScript
[CSS] <body></body>にもmargin #HTML5&CSS3&JavaScript
P.S. iMac の Safariブラウザにおいて、viewport の長さの単位であるvw vh vmin vmax に致命的な欠陥があることを発見しました。１週間、悩んだあげく、確信しました。後日、詳細にブログします。なので、このブログは、ボツにして、後日、改めて書き直します。
スマホは、画面が小さいので、画面設計にはピクセル単位でシビアに作成を心掛けています。
一昔前は、長さの単位で px pt em を使ってきました。viewportが導入されて、vw vh vmin vmax が普及して、便利になった反面、正確さを追及するには、HTMLの親切な表現力が仇になり、工夫が必要です。
ブラウザで、ページの拡大縮小すると、margin padding も拡大縮小することになります。正確に作成したつもりでも、どうしてもずれてしまいます。
なので、色々とテストしました。今だに、<body></body>にmarginがありました。自分は、昔から念の為、下記の様にゼロ宣言してます。
-- CSS --
html{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
}
--
自分は、読みやすいWebページは『縦スクロール』で完結するというこ拘りを持っています。スマホならなおさらです。パソコンでも、表示幅648pxに留めています。行の認識良し、印刷良しという考えなので。ちゃんと、文章は左揃えで、ページはモニターの中央揃えしています。
┌───────┐
│ ┌───┐ │
│余│文章 │余│
│白│ │白│
│ └───┘ │
└───────┘
-- HTML --
<body>
<div style="margin:0px auto; width:100%; max-width:648px;">
文章が、幅648ピクセルで折り返され、かつ中央揃えで、読みやすい。
</div>
</body>
--
<body>は画面表示部分の大元(root:根っこの意)なので、『親』に設定しておけば、文字関連の設定値は入れ子構造である『子』に自動的に引き継がれます。あまり使いませんが、値をinheritに設定して、親から継承を明示することもできます。
なので、<body>のCSS(style)は、しっかりと設定しておきましょう。
なお、ブラウザの基準設定では、font-size:12pt;です。念の為、16pxで設定しています。
-- CSS --
body {
margin:0px;
padding:0px;
border-style:none;
font-family:sans-serif;
font-size:16px;
line-height:1em;
word-wrap:break-word;
background:#111111;
color:#ffffff;
}
--
ザックリですが、仮想の画面幅の画素数は、下記の通りで考えてきています。現時点では、タブレットの位置付けが、難しいですね。
--
スマホ縦：タブレット縦：パソコン横
= 400px:800px:1200px
= 1:2:3
自分の保有している機器 100％表示時
iPhon16：iPad：iMac
= (縦320,横597)：(縦1024,横1366)：1280
--
viewport単位では、下記の様な換算になります。
--
1vw
= 4px 8px 12px
4vw
= 16px 32px 48px
= 12pt 24pt 36pt
5vw
= 20px 40px 60px
5.33vw
= 21.33px 42.67px 64px
= 16pt 32pt 48pt
--
つまり、スマホ用に16ptのつもりで、font-size:5.33vw;を設定すると、パソコンでは48ptを意味してしまいます。逆にfont-size:16pt;で文字を作成すると、パソコンではいいのですが、スマホでは予想より小さくなります。
スマホは、画面が小さいので、画面設計にはピクセル単位でシビアに作成を心掛けています。
一昔前は、長さの単位で px pt em を使ってきました。viewportが導入されて、vw vh vmin vmax が普及して、便利になった反面、正確さを追及するには、HTMLの親切な表現力が仇になり、工夫が必要です。
ブラウザで、ページの拡大縮小すると、margin padding も拡大縮小することになります。正確に作成したつもりでも、どうしてもずれてしまいます。
なので、色々とテストしました。今だに、<body></body>にmarginがありました。自分は、昔から念の為、下記の様にゼロ宣言してます。
-- CSS --
html{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
}
--
自分は、読みやすいWebページは『縦スクロール』で完結するというこ拘りを持っています。スマホならなおさらです。パソコンでも、表示幅648pxに留めています。行の認識良し、印刷良しという考えなので。ちゃんと、文章は左揃えで、ページはモニターの中央揃えしています。
┌───────┐
│ ┌───┐ │
│余│文章 │余│
│白│ │白│
│ └───┘ │
└───────┘
-- HTML --
<body>
<div style="margin:0px auto; width:100%; max-width:648px;">
文章が、幅648ピクセルで折り返され、かつ中央揃えで、読みやすい。
</div>
</body>
--
<body>は画面表示部分の大元(root:根っこの意)なので、『親』に設定しておけば、文字関連の設定値は入れ子構造である『子』に自動的に引き継がれます。あまり使いませんが、値をinheritに設定して、親から継承を明示することもできます。
なので、<body>のCSS(style)は、しっかりと設定しておきましょう。
なお、ブラウザの基準設定では、font-size:12pt;です。念の為、16pxで設定しています。
-- CSS --
body {
margin:0px;
padding:0px;
border-style:none;
font-family:sans-serif;
font-size:16px;
line-height:1em;
word-wrap:break-word;
background:#111111;
color:#ffffff;
}
--
ザックリですが、仮想の画面幅の画素数は、下記の通りで考えてきています。現時点では、タブレットの位置付けが、難しいですね。
--
スマホ縦：タブレット縦：パソコン横
= 400px:800px:1200px
= 1:2:3
自分の保有している機器 100％表示時
iPhon16：iPad：iMac
= (縦320,横597)：(縦1024,横1366)：1280
--
viewport単位では、下記の様な換算になります。
--
1vw
= 4px 8px 12px
4vw
= 16px 32px 48px
= 12pt 24pt 36pt
5vw
= 20px 40px 60px
5.33vw
= 21.33px 42.67px 64px
= 16pt 32pt 48pt
--
つまり、スマホ用に16ptのつもりで、font-size:5.33vw;を設定すると、パソコンでは48ptを意味してしまいます。逆にfont-size:16pt;で文字を作成すると、パソコンではいいのですが、スマホでは予想より小さくなります。
お問い合わせby Network Communication Note