やあやあ。U235です。
WEBCOACHのWEBデザインについての学習の一環で、WordPressのオリジナルテーマ開発を行っています。
参考書としているのは以下の書籍です。
これのCHAPTER6が終わりました。CHAPTER6は全幅と幅広の機能を追加しよう、という話。
なんで機能があるのに最初から入ってないのさ？とか、参考書の時点（2019年、WordPress5.3）では初期実装されていなかった部分が現時点（2024年、WordPress6.6）では初期実装されるようになっていた！とか、そういうアレコレはありましたが。
今回はCSSの基本部分で「これなんだっけ」「ちゃんと説明できない」となったので、そこを復習したいと思います。
CHAPTER6
CSSの単位について
CSSにはいくつかの単位があります。CHAPTER6ではそのうちの1つ、vwが出てきました。
どの単位を使うのかっていうのは見た目もそうですがレスポンシブ対応をするときにも重要になってきそうなので、これを機にCSSで使う単位を復習したいと思います。
CSSの単位①：px
よく使うやつ。1pxは1ドット。
絶対値なので親要素に影響されない。
pxってめちゃめちゃわかりやすいですけど、ブラウザのフォントサイズ調節機能が働かなくなるのでアクセシビリティが悪くなるらしい。画面拡大ではちゃんと大きくなりますが。
CSSの単位②：%
%の意味は誰でもわかると思いますが、これは相対値なので親要素に影響されます。
たとえば親要素のフォントサイズが50pxで、子要素のフォントサイズを50%に設定したら、子要素のフォントサイズは25pxになる。
他にも親要素の高さ（height）が500pxで、子要素の高さ（height）を50%に設定したら、子要素の高さは250pxになる。
CSSの単位③：em・rem
em・remも相対値です。
emは親要素のフォントサイズを基準にした値のこと。
親要素のフォントサイズが20pxのとき、子要素のフォントサイズは1em＝20px、0.8em＝16px、みたいな。
HTMLのフォントサイズの初期値は16pxになっています。
emはどんどん継承できるので、例えばこんなときに困ります。
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>.parent {
font-size: 1.5em;
}
.child {
font-size: 0.5em;
}
.grandchild {
font-size: 3em;
}こんな設定だったとき。それぞれのフォントサイズ（px）がいくつかわかりますか？
正解は以下の通り。
parentが24px（初期値の16px×1.5）、childが12px（親要素parentの24px×0.5）、grandchildが36px（親要素childの12px×3）になります。
parent … 16×1.5 ＝ 24（px）
child … 16×1.5×0.5 ＝ 12（px）
grandchild … 16×1.5×0.5×3 ＝ 36（px）
ぱっとgrandchildのフォントサイズを知りたくなったときにすぐ計算できますか？
これがもっと子要素が多くなっていってしまったらフォントサイズを辿るのが面倒です。
そこで生み出されたのがremです。remとはroot EMの略だそう。
rootというのはHTMLの元の大きさのこと。つまりあえて設定しなければ16pxのこと。
親要素がどの大きさであれ、HTMLの大きさ（16px）を基準に計算するからわかりやすい。
CSSの単位④：vw・vh
vw・vhのvはviewport（ビューポート）。表示領域のこと。
wはwidth、hはheightになるので、vwは表示領域の横幅を単位として、vhは表示領域の縦幅を単位とします。
100vwは表示領域の横幅の100%のこと。モニター幅が1600pxなら1vwは16px。
スマホ、タブレット、パソコンはそれぞれモニターの幅や高さが違います。もちろん機種によっても。
どんな端末でも、ファーストビューは画面いっぱいにしたい！みたいなときに大活躍。
注意なのは、windowsだと画面左端のスクロールバーをビューポートに含めてしまうこと。
で、しかもブラウザによってスクロールバーの幅が違うという厄介なことが起きます。
参考書では、画像を100vwで表示させるとスクロールバー分はみ出してしまうことになりました。
そこで、はみ出る分を隠したり、縮めたりという作業が必要になってしまいました。
CSSの単位⑤：vmin・vmax
これは初めてのような。触れたことあったのかな……。
vminはビューポートの縦横のうち、小さい方を基準にする。
vmaxはビューポートの縦横のうち、大きい方を基準にする。
最後に
ビューポート基準の考え方はもう少し復習したいかな。
今回のCSSだけでvwを調整したやり方はわかるようなわからないようなで止まってしまったので。
作業中はわかった気がしたんだけど、いざブログに書こうとしたらわからなくなってきた……。
明日は地域のお祭りがあるので、楽しんできまーす。
ではでは。
コメント