CSSのbackground-attachmentプロパティの使い方を徹底解説
CSSのbackground-attachmentプロパティは、背景画像のスクロール動作を制御するためのプロパティです。ページをスクロールしたときに、背景画像が一緒に動くのか、それとも画面上に固定されたままなのかを指定できます。
background-attachmentプロパティで指定できる主な値
background-attachmentプロパティには、以下のような値を指定できます。
- scroll（初期値）：背景画像は要素に対して固定され、要素と一緒にスクロールします。
- fixed：背景画像はビューポート（表示領域）に対して固定され、ページをスクロールしても動きません。
- local：背景画像は要素の内容に対して固定され、要素内のスクロールに合わせて動きます。
使用例
以下のコードでは、background-attachment: fixed; を設定することで、ページをスクロールしても背景画像が固定されたまま表示される様子を確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
<p>背景画像は固定されています。ページを下にスクロールしてみてください。</p>
</body>
</html>
実行結果のポイント
このコードを実行してページをスクロールすると、テキストの内容は流れていきますが、背景画像は常に同じ位置に留まります。background-attachment: fixed; の効果により、あたかも背景画像がウィンドウに貼り付けられたような視覚効果が得られます。
この手法は、Webサイトのヒーローセクションなどでよく使われる「パララックス（視差）効果」の基礎にもなります。ただし、モバイルデバイスではfixedの挙動がサポートされていない、あるいはパフォーマンスの問題を引き起こす場合があるため、レスポンシブ対応の際には注意が必要です。
-
CSSのborder-right-styleプロパティの使い方を徹底解説
border-right-styleプロパティとはCSSのborder-right-styleプロパティは、要素の右側の境界線（ボーダー）のスタイルを指定するためのプロパティです。破線や点線、実線など、さまざまな線種を設定できます。主な値の一覧none … ボーダーを表示しない（初期値）solid … 一本の実線dashed … 破線dotted … 点線double … 二重線groove / ridge / inset / outset … 立体的な装飾線実装例以下のコードでは、右側のボーダーに破線（dashed）を適用しています。border-widthで線の太さを4pxに設定し、bor
-
CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法
CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html> <head> </head> <body> <p style = "border-left-width:6px;border