おはようございます！
8月8日 木曜日。曇り。灰色の雲が浮かんでたりうっすら日差しがあったり。
最高気温34℃。じめじめしております。
今日は失業保険を取得すべくハローワークに行ってきました。
かなり人がいて時間指定で行ったのに15分～20分待ち時間がありました。
いや、失業してる人たくさんいるんだなぁと。。
そんな今日も学んでまいります。
今日の教材は相変わらずこちら、
[PR]
よしやっていこう！
CHAPTER３ Webのデザインを作る！CSSの基本
文字や文章を装飾しよう
◆文字の大きさを変える
「font-sizeプロパティ」は文字のサイズを指定する。単位は主に「px」「rem」「%」を使う。
ページの基準となる<html>タグに「font-size: 100%;」を指定すると、ブラウザのデフォルトの文字サイズ、またはユーザーがブラウザの環境設定により調整したサイズを基準に相対値が設定できる。
＜CSS設定例１＞
＜HTML実装＞
＜CSS設定例２＞
＜HTML実装＞
＜適切な文字サイズは？＞
ブログやニュースサイト等、文章主体のWebサイトでは本文の文字サイズを14px～18pxに設定するのが一般的。
また、デザインに統一感をもたせるため、文字サイズは２～５種類程度にとどめること。まずは本文で使う文字サイズを決め、それを基準に見出しや注釈など、他の要素で使用する文字サイズを決める。
＜見出しとジャンプ率＞
ジャンプ率とは見出しと本文の文字サイズの比率のこと。文字サイズの差が大きいと「ジャンプ率が高い」といい、小さいと「ジャンプ率が低い」と表現する。ジャンプ率が高いと躍動的で楽しい雰囲気になり、ジャンプ率が低いと上品で落ち着いた雰囲気になる。
・高いジャンプ率
月の大きさ
月の直径は約3,474 kmで、地球の約1/4の大きさです。
・低いジャンプ率
月の大きさ
月の直径は約3,474 kmで、地球の約1/4の大きさです。
◆フォントの種類を変えよう
「font-familyプロパティ」を使ってフォントの種類を指定。指定したフォントをユーザーがインストールしていない場合は、ブラウザで設定しているデフォルトのフォントで表示される。
＜CSS設定例＞
＜HTML実装＞
＜フォントの種類＞
・明朝体
１．縦線と横線の太さの違い
縦線が太く、横線が細い。
２．ウロコとハネ
文字の端に「ウロコ」（三角形の山）や「ハネ」がある。
３．可読性の高さ
縦横の線に強弱があり、文字に動きがあるため、長い文章でも読みやすい。
４．使用される場面
新聞、書籍、教科書など印刷物の本文に多く使用される。
５．印象
繊細さや優雅さの印象を与え、和や伝統、高級感を感じさせる。
＜詳細情報：1: 東具 2: Wikipedia 3: Weblio辞書＞
・ゴシック体
１．線の太さが均一
縦線と横線の太さがほぼ同じで、視認性が高い。
２．装飾がない
明朝体のようなウロコやハネがなく、シンプルでモダンな印象を与える。
３．力強さと親しみやすさ
太めのゴシック体は力強さを感じさせ、細目のゴシック体は親しみやすさを感じさせる。
４．使用させる場面
見出し、プレゼン資料、看板、ポスター、パソコンやスマホのディスプレイなど
＜1: 東具 2: 京都広告デザイン 3: Primitive-Seed＞
・装飾系フォント
「読ませる」ことより、「見せる」ことを主の目的として作成された書体。可読性は低いため、使用は見出しや短文にとどめて本文には使わないようにする。
＜フォントを統一しよう＞
異なるフォントを多用しすぎると読みにくくなるだけでなく、そのサイト全体のデザインの統一感が失われるため、使用するフォントは１～３種類までにとどめること。
なんだか画像に力入れてたら疲れてもうた。。。
ほぇーーー
CHAPTER３－５の途中ですが、HPが残1になってしまったためこれにて終了です。
おつかれさまでした～(´・ω・)ﾉ
コメント