5.1 position: fixed
固定ポジショニング (position: fixed) を使うと、ページをスクロールしても同じ位置にエレメントを固定できるんだ。これは、いつでも表示したいエレメントを作るのに便利な方法だね。固定ポジショニングのメリットとデメリットを詳しく見てみよう。
固定ポジショニングの特徴：
position: fixedを使ったエレメントは、通常のドキュメントの流れから外れて、ブラウザウィンドウを基準に配置されるんだ- ページをスクロールしても、こういうエレメントは位置が変わらず、いつでも見える状態にできるよ
top,right,bottom,leftを使って、ブラウザウィンドウに対する正確な位置を指定できる
シンタックス:
.element {
position: fixed;
top: value;
right: value;
bottom: value;
left: value;
}
どこで：
top: ブラウザウィンドウの上端からエレメントの上端までの距離right: ブラウザウィンドウの右端からエレメントの右端までの距離bottom: ブラウザウィンドウの下端からエレメントの下端までの距離left: ブラウザウィンドウの左端からエレメントの左端までの距離
固定ポジショニングの例：
CSS
.wrapper {
height: 150px;
overflow: auto;
}
.fixed-box {
position: fixed;
top: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
}
.content {
background: linear-gradient(white, gray);
}
HTML
<div class="wrapper">
<div class="fixed-box">Fixed</div>
<div class="content">
サンプルテキスト。コンテンツエリアにスクロールされる内容が入ります。
</div>
</div>
コードの説明：
-
.fixed-box:position: fixed;がついたエレメントで、ブラウザの右上に固定されているよ .content: 固定エレメントの動作を示すためのスクロール可能なコンテンツ
5.2 固定ポジショニングの利点
1. 常時表示
固定ポジショニングのエレメントは、スクロールしても位置が変わらないから、常にユーザーに表示しておきたいナビゲーションメニューやトップに戻るボタン、通知なんかに最適だね。
例:
CSS
.wrapper {
height: 150px;
overflow: auto;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #2c3e50;
color: white;
text-align: center;
padding: 10px;
}
.content {
margin-top: 60px;
background: linear-gradient(white, gray);
}
HTML
<div class="wrapper">
<div class="fixed-header">固定メニュー</div>
<div class="content">
サンプルテキスト。コンテンツエリアにスクロールされる内容が入ります。
</div>
</div>
コードの説明：
.fixed-header: 固定メニューで、ページをスクロールしてもブラウザの上端に固定されているよ
2. ナビゲーションの改善
固定エレメントは、ページ内のナビゲーションを改善して、重要なリンクやコントロールを常にユーザーに使える状態にするんだ。
例:
CSS
.wrapper {
height: 150px;
overflow: auto;
}
.fixed-sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #34495e;
color: white;
padding: 20px;
}
.content {
margin-left: 220px;
background: linear-gradient(white, gray);
}
HTML
<div class="wrapper">
<div class="fixed-sidebar">
<ul>
<li><a href="#" style="color: white;">リンク 1</a></li>
<li><a href="#" style="color: white;">リンク 2</a></li>
<li><a href="#" style="color: white;">リンク 3</a></li>
</ul>
</div>
<div class="content">
サンプルテキスト。コンテンツエリアにスクロールされる内容が入ります。
</div>
</div>
</div>
コードの説明：
.fixed-sidebar: 固定サイドメニューで、ページをスクロールしてもその位置に留まり、ナビゲーションのアクセス性を向上させるよ。
5.3 固定ポジショニングのデメリット
1. レスポンシブ問題の可能性
固定エレメントは、特に小さな画面では、その固定されたサイズが重要なコンテンツを覆ってしまうことがあるんだ。
例:
CSS
.wrapper {
max-height: 150px;
overflow: auto;
}
.fixed-element {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 150px;
background-color: #e74c3c;
color: white;
text-align: center;
}
.content {
background: linear-gradient(white, gray);
}
HTML
<div class="wrapper">
<div class="fixed-element">固定エレメント</div>
<div class="content">
サンプルテキスト。コンテンツエリアにスクロールされる内容が入ります。
</div>
</div>
コードの説明：
.fixed-element: 小さな画面でコンテンツを覆ってしまうことがある固定エレメントで、アクセス性とレスポンシブ性に問題を引き起こす可能性があるよ
2. 他のエレメントとの相対的な配置の難しさ
固定エレメントは、ページ上の他のエレメントを考慮しないため、重なったり、正しく配置されないことがあるんだ。
例
CSS
.wrapper {
height: 150px;
overflow: auto;
}
.fixed-box {
position: fixed;
top: 50px;
right: 50px;
width: 200px;
background-color: #9b59b6;
color: white;
text-align: center;
}
.content-box {
margin-top: 100px;
padding: 20px;
background-color: #ecf0f1;
border: 2px solid #bdc3c7;
width: 400px;
}
HTML
<div class="wrapper">
<div class="fixed-box">固定エレメント</div>
<div class="content-box">
サンプルテキスト。コンテンツエリアにスクロールされる内容が入ります。
</div>
</div>
コードの説明：
.fixed-box: 他のページ上のエレメントと重なり、内容の視認性に問題を引き起こす可能性のある固定エレメントだよ
GO TO FULL VERSION