N-box1の直し | そうちゃ式 受験算数(新1号館 数論/特殊算)

N-box1の直し

現状

こんなだったかなぁ?

(タイトル)

●「AがBの倍数」
→➀AはBの2倍・3倍…

●「明日は月曜日」
→➁AはBで割り切れる

一行目のインデント処理が失敗している。

bodyのフォントのサイズを精査設定し直したので、フォントやパディングなどのvw連動調整は不要かもしれない

そもそもbox自体にフォントサイズが指定してあるので、タイトルや本文の指定よりも大きくなっている。

改造

pにインデントを設定,トップマージンを増やす

N-box1改造中

●「AがBの倍数」
→おでかけですか

●「れれれのれ」
→➀AはBの2倍・3倍…

要素の大きさを改造

ボックス全体のフォントサイズをinheritにして、

パディングとpのフォントをemで固定サイズ指定

N-box1改造中

●「AがBの倍数」
→おでかけですか

●「れれれのれ」
→➀AはBの2倍・3倍…

タイトル位置

タイトルの位置をemで指定

N-box1改造中

●「AがBの倍数」
→おでかけですか

●「れれれのれ」
→➀AはBの2倍・3倍…

やはり…画面がでかくなるにつれて、ボックスの両脇が空いて間抜けなので、ボックス全体のフォントサイズをvw連動で大きくする。

bodyのフォントサイズの関数がコレ
「min(calc(0.9rem + 0.4vw),1.1rem」
ルートのフォントサイズのremに直結した定義

calcのvw傾きを大きめに、rem切片を小さめに、上限を高めにした関数を独自に設定してみる

独自関数

ボックスのフォントサイズをremとvwの独自関数に変更。pにはフォントサイズは指定しない。

N-box1改造中

●「AがBの倍数」
→おでかけですか

●「れれれのれ」
→➀AはBの2倍・3倍…

通常段落よりも明らかに大きくなるのは、不自然かな…?

クールダウンして観察

 

経過観察の結論(6/18)

字が多少大きくなるのは、重要事項をクローズアップしているので不自然ではない。

これで、実装する

タイトルとURLをコピーしました