background を使って背景表現を作ってみよう | HTML / CSS基礎

前のページでは、

::before
::after
position
transition

などを組み合わせて、装飾やアニメーションを作りました。

今回は、

背景に画像やグラデーションを設定するCSS

を学びます。

Webサイトでは、

ヒーロー画像
背景写真
グラデーション
オーバーレイ
背景固定

などが大量に使われています。

その中心になるのが、

background

です。

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

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

html-practice/
├── index.html
├── css/
│   └── style.css
└── images/
    └── bg.jpg

background-color の復習

まずは基本です。

body {
  background-color: #f5f5f5;
}

これは背景色を指定しています。

すでに使っていますが、

background はかなり奥が深い

です。

背景画像を設定する

<div class="hero">
  HERO AREA
</div>

.hero {
  height: 400px;

  background-image: url("../images/bg.jpg");
}

これで背景画像が表示されます。

なぜ ../ が必要？

例えば、

css/style.css

から見た場合、

images/bg.jpg

へ行くには、

一度 css フォルダを出る

必要があります。

そのため、

../

を書きます。

background-repeat

背景画像は、初期状態だと繰り返されます。

background-repeat: repeat;

そのため、通常は以下を使います。

background-repeat: no-repeat;

background-size

ここは超重要です。

cover

background-size: cover;

これは、

要素全体を画像で埋める

指定です。

実務で大量に使われています。

background-position

画像の表示位置を調整します。

background-position: center;

これは、

中央を基準に表示

です。

実務でよく見る組み合わせ

.hero {
  height: 100vh;

  background-image: url("../images/bg.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

これは本当に頻出です。

100vh とは？

height: 100vh;

の vh は、

画面高さに対する割合

です。

つまり、

100vh = 画面いっぱい

です。

ヒーローセクション

最近のサイトでは、

画面いっぱいの大きな画像

を最初に表示することがよくあります。

これを、

ヒーローセクション

と呼ぶことがあります。

背景画像の上に文字を置く

<div class="hero">

  <h1 class="title">
    SAMPLE SITE
  </h1>

</div>

.hero {
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;
}

文字が見えづらい問題

背景画像の上では、

文字が読みにくい

ことがあります。

これは実務でもかなりあります。

overlay を重ねる

そこでよく使うのが、

黒い半透明

です。

before を使った overlay

.hero {
  position: relative;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background-color: rgba(0,0,0,0.5);
}

文字が消えた？

overlay が前面に来ているためです。

z-index を使う

.title {
  position: relative;
  z-index: 1;

  color: white;
}

これで文字が前面へ出ます。

linear-gradient

グラデーションもかなり使われます。

background: linear-gradient(
  90deg,
  #2563eb,
  #7c3aed
);

90deg とは？

グラデーションの方向

です。

例えば、

90deg

なら横方向になります。

グラデーションだけでもかなり今風

背景固定

background-attachment: fixed;

を使うと、

背景だけ固定

できます。

パララックス風

スクロール時に、

背景だけ動かない

ため、

奥行き感

が出ます。

ただしスマホでは注意

background-attachment: fixed; は、

スマホで不安定

なことがあります。

実務では避けることもあります。

まとめ

今回は、

background

を学びました。

background-image
background-size: cover
background-position
linear-gradient
overlay
ヒーロー画像

など。

このあたりを使えるようになると、

「本当にサイトっぽい見た目」

がかなり作れるようになります。