色を使ってサイトの印象を変えてみよう | HTML / CSS入門

前のページでは、

フォントサイズ
行間
文字間

を使って、読みやすさを調整しました。

今回は、

文字色
背景色
配色

を使って、サイトの印象を変えてみます。

色を変えるだけでも、

「なんとなくオシャレ」

な雰囲気が出てきます

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

color と background-color

CSS では、

color
background-color

を使って色を変更できます。

文字色を変える

例えば、

h1 {
  color: #2563eb;
}

を書くと、見出しの文字色が青になります。

背景色を変える

例えば、

body {
  background-color: #f5f7fb;
}

を書くと、ページ全体の背景色が変わります。

実際に書いてみよう

body {
  background-color: #f5f7fb;
  color: #333333;

  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
}

.card {
  background-color: white;

  padding: 24px;

  border-radius: 12px;
}

保存してブラウザを確認してください。

かなり「Webサイトっぽい」見た目になってきたはずです。

なぜ背景を真っ白にしないの？

例えば、

background-color: #ffffff;

の完全な白にすると、

まぶしく感じる

ことがあります。

そのため、

#f5f7fb

のような、

少しだけ色が付いた背景

がよく使われます。

カードを白にする理由

背景を少しグレー系にして、

.card {
  background-color: white;
}

とすると、

カードが浮いて見える

ようになります。

これによって、

情報が見やすくなる
レイアウトが整理されて見える

という効果があります。

文字色も少しだけ薄くする

例えば、

color: #333333;

のようにしています。

これは、

真っ黒 (#000000)

より少し柔らかい色です。

なぜ真っ黒を避けるの？

完全な黒は、

コントラストが強すぎる

ことがあります。

そのため、

少しだけ薄い黒

がよく使われます。

色は3〜4色くらいにするとまとまりやすい

初心者のうちは、

背景色
文字色
メインカラー
アクセントカラー

くらいに絞ると、デザインが崩れにくいです。

よくある配色例

例えば、

用途	色
背景	`#f5f7fb`
文字	`#333333`
メインカラー	`#2563eb`
ボタンhover	`#1d4ed8`

などです。

実際に色を変えてみよう

例えば、

background-color: #fff7ed;

にすると、暖かい雰囲気になります。

逆に、

background-color: #eff6ff;

にすると、寒色系の爽やかな印象になります。

色だけで雰囲気がかなり変わる

同じHTMLでも、

色が違うだけで別サイトに見える

くらい印象が変わります。

そのため、

配色

はWebデザインで非常に重要です。

最初は「真似」がおすすめ

最初は、

好きなサイト
有名企業サイト
デザイン参考サイト

などを見ながら、

どんな色を使っているか

を観察するのがおすすめです。

DevTools で色を見ることもできる

Chrome の DevTools を使うと、

どんなCSSの色が使われているか

を見ることもできます。

気になるサイトを観察すると、かなり勉強になります。

今回学んだこと

今回学んだこと：

color
background-color
背景とカードの色分け
真っ黒・真っ白を少し避ける考え方
色数を増やしすぎない

などです。

次のページでは

次のページでは、

box-shadow
border
カードデザイン

を使って、

「立体感」

を出す方法を学んでいきます。

少しずつ「UIデザインっぽさ」が増えていきます