HTML、CSSで使用している教科書は「１冊ですべて身につくHTML&CSSと Webデザイン入門講座[第2版]」です。
６月２６日はP110~145まで学習しました。
9月にサーティファイのWebクリエイター試験を受けるので、試験内容にも重なるものには【サーティファイ試験】を記載しています。
P110~ 3-8 上手に配色しよう
【サーティファイ試験】色相、明度、彩度
- 色相：12色の色相環。補色は対面にあり、合わせると黒（グレー）になる組み合わせ。
- 明度：明るさの度合い。黒っぽい→白っぽい、役所などは低め（落ち着き）、ファッショナブルなサイトは高め（明るく爽快）
- 彩度：色の鮮やかさ。低いと大人っぽい、高いと爽やか（青の場合、低いとグレーっぽい、高いと青が強い）
企業や地域にはイメージカラーがある。
例えば京都や太宰府は紫、愛媛はオレンジ、警察は紺色、など（サイトを確認した）
色の印象
- 暖色：赤を中心。炎や血液を連想。気持ちを高揚させる。食欲増進。ex.赤、オレンジ、黄色、茶色
- 寒色：青を中心。見た目に涼しく、精神を安定。まじめな印象。ex.青、紺、シアン、黒
- 中性色：温度を感じない。暖色や寒色と組み合わせることで温度感を追加。ex.緑、紫
- 無彩色：どの色を組み合わせても調和が取りやすい。ex.白、灰色、黒
【サーティファイ試験】色の比率 7:25:5の法則
| ベースカラー | メインカラー | アクセントカラー |
|---|---|---|
| ７０％ | ２５％ | 5% |
| デザインの基盤となる色 | デザインの中で見てほしい色。全体の雰囲気を印象付ける。 | デザインを引き締め、メリハリをつける。メインカラーの補色や警戒色などを使用 |
| 背景色 | テーマカラー | 差し色 |
P124~ 3-10 背景を彩ろう
背景を設置：background-image プロパティ
background-image:url(○/○);
()内は相対パス（P63 呼び出し元のファイルから見た対象ファイルの位置）で入力
小さい画像も全体に背景として設置できる
（サーバーエラーや画像のリンク切れなどで画像を読み込めない可能性を考え、backgroundには色を設定しておく方が良い）
背景画像の繰り返し表示：background-repeat プロパティ
background-repeat:値;
主な値（左上を起点として）
- repeat-X:横一列
- repeat-y:縦一列
- repeat:縦横共に繰り返し表示←今のブラウザのデフォルト
- no-repeat:繰り返さない（左上に画像を1枚だけ表示
背景画像の大きさを指定：background-size プロパティ
background-size:値;
主な値
- 数値指定（px、%、rem)
- cover:全体を覆うように拡大。縦横比はそのまま。表示領域より画像が大きいと切れる。
- contain:その範囲に含まれるように拡大。縦横比はそのまま。表示領域の方が大きいときは余白ができる。
背景画像を表示する位置を指定：background-psition プロパティ
background-psition:値;
値には：水平 垂直;が入る
- 水平：left,center,right
- 垂直:top,center,bottom
- 数値の指定も可能：px,rem,% 例えば30px(横方向X） ８０px（縦方向y）など
背景画像を2枚以上（複数）指定 （サーティファイ試験出題あり★）
back ground image:url( ),url( )
,で区切ると複数指定可能
P1３２~ 3-１１ 幅と高さを指定しよう
- 幅：width
- 高さ：height
- 数値で設定or auto（関連するプロパティの値によって自動設定）
- 例えばdiv{width: 500px;} p{width: 50%;}なら、pは５００pxに対する５０％になる（親要素に対しての５０％）
相対単位
- ％：親要素を基準とした割合(親６００pxの時、子５０％は300px)
- em:親要素を基準とした単位 （親が１６pxの時、１em＝16px)
- rem:ルート要素（タグ）のサイズを基準に計算。root+em=rem HTML要素のフォントが１６pxのときは、1rem=16px
- vw:viewport width ビューポートの幅。例えば１２００oxの時、50vwは６００px
- vh:view height ブラウザの端末の表示高さ
補足：ビューポートとはブラウザーでwebサイトを閲覧するときの表示領域
vwとvhはスマホ表示に切り替えるとき活躍
P1３６~ 3-１２ 余白を調整しよう
外側の余白 margin
短縮技法
- ４方向全て margin:値；
- 上下 左右 margin:値 値；
- 上 左右 下 margin:値 値 値；
- 上 右 下 左 margin:値 値 値 値；
内側の余白 padding
文字と枠の間の余白は、最低でも文字サイズの1〜1.5倍
padding 1rem とすると、1文字分＝1rem分スペースができる
P1４２~ 3-１３ 線を引こう
太さ border-width: ;
- marginと同じ短縮技法使用可能
- 数値またはキーワードで設定
- thin 細い
- medium 普通
- thick 太い
border-style: ;
- none 非表示
- solid 1本
- double 2本
- dashed 破線
- dotted 点線
borderのみだと全ての辺に指定されるが、以下のように使えばどの辺に指定するか設定できる
- 上 border-top
- 下 border-bottom
- 左 border-left
- 右 border-right