ガレコレ
Garage Collection
2024年11月25日(月)
[CSS] <body></body>にもmargin #HTML5&CSS3&JavaScript
P.S. iMac の Safariブラウザにおいて、viewport の長さの単位であるvw vh vmin vmax に致命的な欠陥があることを発見しました。1週間、悩んだあげく、確信しました。後日、詳細にブログします。なので、このブログは、ボツにして、後日、改めて書き直します。







 スマホは、画面が小さいので、画面設計にはピクセル単位でシビアに作成を心掛けています。

 一昔前は、長さの単位で 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