本日、１か月の新人研修が無事終了しました。通年2回に分けていた人数を一度に実施したため、結構大変でした。測定装置で渋滞したり発表に時間を要したりなどなど。でも、研修初めに発熱者が出てあわやオンライン研修になるかと危ぶんでおりましたが、コロナでなく対面で研修を続けることでき助かりました。やはり、現場・現物・現実の研修は対面じゃないとダメですね。 本日は、Webページ作成時のCSSの基礎事項に関する話の続きです。
資料をご覧ください。 → CSSその3
p.1 <section>のフォントサイズを例えば16ptと決めておき、後は比例係数を指示する方法です。「em」の前の数値が比例係数です。見出しは、1.5emなので、実際のサイズは、1.5×16＝24ｐｔとなります。
p.2 「 line-height」でフォントサイズを指定する方法は３種類あります。先ほどの「em」、「係数のみ」、「百分率」の３種類です。 「text-align」を用いて、表示位置を左・中央・右に指定することができます。
p.3 フォントは「font-family」を用い、表中の単語を続けて指定します。 フォントの太さは「font-weight」の次に、100～400（normal）～900の数値を書き込みます。
p.4 段組みの基本パターンは、１カラム、２カラム及び３カラムです。レイアウトは固定と可変があります。固定の場合は、Webページを見る媒体により、切れてしまったり、スペースが空き過ぎたりする欠点があります。可変の場合は見る画面に合わせたサイズにすることが可能です。ただし、一行の文字数が多くなり、判読が困難になる場合もあるようです。パソコン画面やスマホではサイズが異なるので、可変レイアウトにすることが多いようです。
p.5 段落を分ける場合は「float」を用い、百分率で幅を指定します。 分割を止めて基に戻す際は「clear」で解除します。忘れないで、必ず解除してください。そうしないと、レイアウトが崩れてしまうようです。
ここまでで、基本的なCSSの文法はおしまいです。来週は、WebページのデザインをCSSで実施する最終段階の話になります。