色を扱う - To Be Continued

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインの学習を進める。

カラーピッカー

Googleで「カラーピッカー」と検索するとツールが表示される (P107)。

配色

配色により雰囲気が変わる。　(P110)

色相 : 色の違いのこと。色相環の反対にある色を補色。隣り合う色を類似色相

明度 : 色の明るさの度合いのこと。明度高>明るく爽快なイメージ。明度低>暗く落ち着いたイメージ

彩度 : 色の鮮やかさの度合いのこと。彩度高>鮮やかで華やかなイメージ。彩度低>渋く大人っぽいなイメージ。

色の持つ印象についてはP111からP115または、色彩と心理の関係-「配色」をブランディングに活かそう！へ。

組み合わせ

使用する色を選ぶの同じくらい、組み合わせでの比率も大切 (P116)。配色例はP117からP119。

ベースカラー: デザインの基盤、背景色に用いられる > 70%
メインカラー: デザインのテーマカラー、全体の雰囲気を決める > 25%
アクセントカラー: メリハリをつけるためのワンポイント> 5%

背景画像

background-size プロパティで背景画像のサイズを指定する。 (P124)

画像はDynamic Dummy Image Generatorにて生成。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="猫の好きなもの、日々の生活をご紹介">
    <link rel="stylesheet" href="style.css">
    <title>背景を彩る</title>
</head>
<body>
    <div>
        <p>背景画像</p>
    </div>
</body>
</html>

cover : 縦横比を保持したまま、表示領域をうめつくす

contain : 縦横比を保持したまま、画像を表示

div {
  background-image: url(https://dummyimage.com/1200x800/000/fff);
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-size: contain;
  height: 100vh;
}

単位 vh の説明はここまでされていない？読み落としかな？ MDN では寸法で説明されている。 *P132で説明されていた。

vh はビューポートの高さを基準とする値です。　`1vh' はビューポートの幅の 1%。

では、ビューポートとは何のか?

VSCode の Emmet を使うと次のコードが出力される。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

コピペで済ませていませんか？改めて学び直したい「Viewport」のすべてによれば

Viewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返します。 initial-scale=1とした時には、やはり暗黙的にwidth=device-widthであるので、実はどちらかを指定しておけば大丈夫です

余白

複数のものが近くに設置されていると、関連していると認識する。余白を使って関連情報をグループ化できる。 (P136)

文章の場合、文字サイズの1から1.5場合の余白を設けると読みやすい。 (P138)

コンテンツの区切りに使う線は、文字色より薄い色を使う。邪魔にならずにスッキリと見せられる。 (P143)

クラスとID

クラスを使った書き方 class 属性を追加しクラス名を記述する。 (P147) CSSファイルには、 . に続いてクラス名を書く。HTMLファイル内で複数回使える。

<p class="hoge">ABCD</p>

.hoge {
  color: #777;
}

IDを使った書き方 id 属性を追加しid名を記述する。 (P147) CSSファイルには、 # に続いてid名を書く。HTMLファイル内で1度だけ使える。

<p id="fuga">ABCD</p>

#fuga {
  color: #777;
}

優先順位

併用した場合は、idのほうがクラスより優先順位が高い。 (P151)

カラーピッカー

配色

組み合わせ

背景画像

余白

リスト

クラスとID

優先順位