【HTML&CSS】background-positionの使い方をわかりやすく説明

こんにちは、@AWAKOJIです。

今日も、薬剤師をしながらプログラミングの勉強をしています。

この記事では、webサイトに表示した背景画像の位置(background-position プロパティ)の設定について解説します。

このプロパティを使うことで、background-imageプロパティによって表示される画像の位置を調整することができます。

うまく利用して見やすいwebサイトを目指しましょう。

使用する言語はCSS

背景画像の繰り返しを設定するにはCSSを使います。
CSSとは、webサイトのデザインを担当する言語です。
詳しくはこちらの記事をどうぞ。

CSSとは?書き方を簡単にわかりやすく説明(漫画付)
記事のポイント CSSはWEB上のデザインを担当する言語である プログラミング初心者 『CSS?なんじゃそれ?HTMLとどんな関係があるの?』 こんにちは、AWAKOJIです。 今日も薬剤師をしながらプログラミングの勉...

使用するプロパティはbackground-position

CSSの基本構造は以下の通りです。


そして今回、背景画像の繰り返しを設定するため、background-repeatプロパティを使います。

“background”(背景)

“position”(位置)

なので覚えやすいですね!

また、横方向と縦方向の位置を表示する必要があるため、値は2つ書く必要があります

つまり背景画像の繰り返しを設定するための基本構造は以下のとおりになります。

値と値の間は半角スペースを空けてください

以下、background-positionプロパティを使うときのセレクタと値について解説していきます。

background-positionのセレクタ

background-imageプロパティと同様、セレクタにはすべての要素を書くことができます。

つまり、背景画像の表示位置は

body⇒サイト全体

h1⇒見出し

table⇒表

tr⇒表の行

div⇒ブロックレベル要素

span⇒インライン要素

など、どの場所にも設定できるというわけです。

background-positionの値

値に書けるのは

  • キーワード
  • 数値

の2つです。

それぞれ見ていきます。

キーワード

値にキーワードを用いることができます。

具体的には、

  • 横方向⇒left(左)、center(中央)、right(右)
  • 縦方向⇒top(上)、center(中央)、bottom(下)

です。

実際に表示位置を確認してみましょう。

HTMLファイルは以下の通りです。

headタグ内でCSSファイル(sample.css)を読み込んでください。

CSSファイル(sample.css)は以下の通りです。

background-imageプロパティ水玉の画像ファイル(waterball.png)を設定しています。

水玉の画像(waterball.png)

そして、background-repeatプロパティの値をno-repeatにすることで画像の表示を1つだけにしてください。

それぞれのプロパティについて詳しく知りたい方は以下の記事をご覧ください。

【HTML&CSS】background-imageの使い方をわかりやすく説明
こんにちは、@AWAKOJIです。 今日も、薬剤師をしながらプログラミングの勉強をしています。 この記事では、webサイトの背景に画像を表示する方法を解説します。 そして、解説のあとで、実際webサイトに画像を表示させてみます。 ...
【HTML&CSS】background-repeatの使い方をわかりやすく説明
こんにちは、@AWAKOJIです。 今日も、薬剤師をしながらプログラミングの勉強をしています。 この記事では、webサイトに表示した背景画像の繰り返し(background-repeat プロパティ)の設定について解説します。 こ...

さらに、最後に5行目にbodyの領域をwebサイト全体にすることで、背景画像がうまく挙動するようにしています。

この状態のブラウザ表示は以下の通りです。

※ブラウザ表示(クリックで拡大表示します)

背景画像の表示の起点は左上なので、水玉は左上に1つだけ表示されています。

この状態で、background-positionプロパティをたしていきます。

①横方向をleft、縦方向をtopに指定します。

※ブラウザ表示(クリックで拡大表示します)

もともと起点が左上なので表示位置は変わっていません

②次に横方向をcenter、縦方向をcenterに指定します。

※ブラウザ表示(クリックで拡大表示します)

水玉が中央に表示されました。

③そして、横方向をright、縦方向をbottomに指定します。

※ブラウザ表示(クリックで拡大表示します)

水玉が右下に表示されました。

数値

画像の表示位置を指定するために数値を書くことができます。

表示領域の左上から画像の左上の距離を書きます。

数値の単位は、px、cm、ch、emなどがあります。

pxを使って表示位置をみてみます。

※ブラウザ表示(クリックで拡大表示します)

画像の左上の位置が、表示領域の左上から横に300px、縦に400pxの位置になるように表示されました。

%で表示位置を設定することもできます。

表示領域の座標に画像の座標が重なるように表示されます。

よくわからないと思うので実際にみてみます。

①『0% 0%』の指定をします。

※ブラウザ表示(クリックで拡大表示します)

②『50% 50%』の指定をします。

※ブラウザ表示(クリックで拡大表示します)

③『100% 100%』の指定をします。

※ブラウザ表示(クリックで拡大表示します)


表示領域の座標と画像の座標が重なるように表示されます。
つまり

  • 0% 0% = left top
  • 50% 50% =center center
  • 100% 100% =right bottom

と同じ意味になります。

値の省略

background-positionプロパティで指定する値は省略することができます。

  • leftまたはrightだけ(横方向のみの記載)⇒縦方向はcenter
  • topまたはbottomだけ(縦方向のみの記載)⇒横方向はcenter
  • centerだけ⇒中央表示
  • 数値だけ⇒横方向はcenter

表示の起点について

値を数値にしたときの起点は、表示領域の左上です。

もう少し詳しくいうと、padding領域の左上です。

この起点を右下にすることもできます。

※ブラウザ表示(クリックで拡大表示します)

また、background-originプロパティを使うと起点を変えることもできます。

まとめ

以上、background-positionプロパティについて説明しました。
まとめると、

  • 画像の繰り返しの設定はCSSを使う
  • プロパティはbackground-position
  • セレクタはすべての要素を書くことができる
  • 横方向の値はleft、center、right、数値(pxや%など)
  • 縦方向の値はtop、center。bottom、数値(pxや%など)
  • 表示の基準点はpadding領域の左上だが変更することもできる

以上になります。

参考サイト:background-position – MDN – Mozilla

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

おすすめ記事

フォローする