購入価格:3000円
評価:
この記事は約2分10秒で読めます
「WEBデザインオンラインレッスン(12週間コース)」を受講いただいている生徒さん向けの教材として読了。
教える側としても、非常に勉強になる一冊。しばしばHTML/CSSは軽く見られるが、知らぬ間に進化し変化して、昔よりも相当に難しくなっていると感じる。
キャッチコピーh1のフォントサイズを画面幅に合わせて変化させます。このとき、メディアクエリで切り替える方法は使用せず、clamp()関数を使用して48ピクセルから68ピクセルに変化させます。ここではフォントサイズを5vwと指定して可変にし、最小値を48ピクセル、最大値を68ピクセルに指定しています。5vwは画面幅960pxで48ピクセル、画面幅1360pxで68ピクセルになるため、キャッチコピーのフォントサイズは次のように変化します。
.hero h1{
margin-bottom:42px;
font-family:”Montserrat”,sans-serif; font-size:clamp(48px,5vw,68px); min-height:0vw;
font-weight:400;
line-height:1.3;
text-align:center;
}
※min-heightはclamp()で指定した フォントサイズをSafariで機能させ るために記述しています。
フォントサイズ48~68ピクセルを画面幅375~1366pxにかけてなめらかに変化させることもできます。そのためのフォントサイズは一次関数の式「y=ax+b」で求めることが可能です。まずはaとbを求めます。
a傾き=(yの増加量)÷(xの増加量)=(68-48)÷(1366-375)=0.0201816
b =y – ax=48 – 0.0201816 X375 =48-7.5681 = 40.4319
これで、現在の画面幅「X=100vw」でのフォントサイズyが得られます。
y = ax +b= 0.0201816 X 100vw +40.4319pX =2.01816vw + 40. 4319px
※オンラインツールで算出することもできます。
Font-size clamp()generator (https://clamp.font-size.app/)
Fluid-responsive font-size calculator (https://websemantics.uk/tools/responsive-font-calculator/)
画像imgの下に余計な余白が入るのを防ぐ画像の下に余計な余白が入るのは、imgが標準ではインラインブロックボックスに相当するものとして扱われるのが原因です。ここではdisplayを「block」と指定し、ブロックボックスを構成するように指定して余白が入るのを防いでいます。さらに、この指定は基本設定としてすべてのimgに適用するようにしています。