背景画像を画面中央+300pxにする。

2025年2月25日

背景画像はスタイルシートの指定で、左寄せ、中央寄せ、右寄せ、上寄せ、下寄せがあります。
ですが、今回次のようなことをする必要がありました。

左右中央寄せで＋300px右へずらす

この指定で、頭を悩ませたのが「中央位置から＋300px」です。
なぜならば、画面サイズを変えても中央位置＋３００pxをキープしなければいけないためです。

そんなことができるのか？
と思いつつ、いつものようにググりました。

論より証拠。できたものがこちら

何はともあれ、できたものがこちらです。

（１）普通の中央寄せ

背景画像を普通に中央寄せしたバージョンです。
ウィンドウサイズを広げたり、縮めたりしても、背景画像は中央位置になります。

（２）中央一＋300px右へずらす

背景画像を中央寄席＋３００px右へずらしたバージョンです。
ウィンドウサイズを広げたり、縮めたりしても、中央位置＋３００pxがキープされます。

背景画像を中央位置+300pxにする指定方法

実際に中央位置＋300pxにしている具体的な方法について以下に記載します。

スタイルシートの記述

スタイルシートの横位置指定で、なにやら見慣れない記述があります。
それがこちらです。

left calc(50% + 300px)

通常の横中央ならば、centerのみですが、left指定になっています。
いったいどういう仕組みなのでしょうか?

（疑問1）calcは何？

calc()は、計算をする指定です。
calcを使うと、スタイルシート内で計算ができます。
+300pxとすることで、300px右へずらしています。

（疑問2）50%とはどういう意味？

例えば、left 100px というう指定は、左から100pxという意味になります。
では、left 50% と指定すると、左から50%の位置。つまり中央寄せという意味になります。
中央寄せをベースにするため、50%指定をしています。

（疑問3）なぜleft指定なのか?

横中央にする場合、centerを指定します。
ですが、今回の例ではleft指定となっています。

これはcenter指定では、calc()が動作しないためです。
おそらく仕様だと思われますが、calc()を使うために、left指定にしています。
逆にright指定でも大丈夫です。ただしその場合、+300pxにすると、左にずれます。（左右が逆になります）

スタイルシートの進化は目覚ましい

web制作を始めたころは、どちらかというとHTMLで装飾をするのが主流でした。
画像を細かく切って四隅にちりばめたり、見出しを画像にしたりなど、スタイルシートは補助的な役割でした。

ですが昨今は、HTML側では装飾を一切行わず、スタイルシートだけで装飾します。
しかも、画像を使わなくても見出しの装飾ができたりと、とても進化しています。

写真や挿絵は画像にする必要がありますが、装飾という点においては、スタイルシートのみで完結します。

しかも最近では、動的な動作（簡易アニメーションなど）もスタイルシートでできます。
HTMLを組むとは、もはや「スタイルシートを構築する」ということなのです。

---

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。

関連記事