CSSのPositionプロパティを理解する|実コード付きで解説

※本サイトにはプロモーション・広告が含まれています。

(最終更新日:2023年6月)

✔このような方へ向けて書かれた記事となります

「CSSのpositionプロパティの機能が知りたい」
「positionプロパティの使い方を詳しく学びたい」
「実際のCSS positionプロパティの例が見てみたい」

✔当記事を通じてお伝えすること

  • CSS positionプロパティの基本
  • positionプロパティの応用的な使い方
  • 実際のCSS positionプロパティの実例

当記事では、CSS positionプロパティの基本から応用的な使い方まで、実際のコードを交えながら詳しく解説していきます。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロジェクトマネージャー/SE(元外資系金融機関営業)

【副業】ブログ(月間15万PV)/YouTube/Web・アプリ制作

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

CSS Positionとは?

こちらでは、CSSのPositionについて解説していきます。

Positionは、Webページの要素を特定の位置に配置するための重要な概念です。

  • Positionの基本概念
  • Positionの使い方と活用法

Positionの基本概念

CSSのpositionプロパティは、HTML要素の配置位置を指定するためのものです。

これは画面上のどこに要素を表示するか、また他要素とどのように重ねるかを制御するための重要なツールです。

positionプロパティは5つの値をとります

  • static
  • relative
  • absolute
  • fixed
  • sticky

それぞれ異なる挙動をしますので、それぞれの特性を理解することが大切です。

Positionの使い方と活用法

positionプロパティは、Webページのデザインやレイアウトにおいてとても役立ちます。

具体的には、以下のようなことが可能です。

  • 要素の位置を固定
  • 他の要素と重ねる
  • 画面のスクロールに応じて要素の位置を動かす

しかし、positionを用いるときは注意も必要。

適切に使用しないと、デザインが崩れる原因となってしまいます。

また、アクセシビリティやパフォーマンスにも影響を及ぼす可能性にあるでしょう。

positionの使用法をしっかり理解し、適切な使い方を身につけることが重要です。

Positionの基本文法

Positionの具体的な書き方と、その主要な値について解説していきます。

  • Positionの書き方
  • 主要な値の説明

Positionの書き方

positionプロパティの基本的な書き方は以下の通りです。

selector {
  position: value;
}

ここでのselectorは位置を指定したいHTML要素を選択するためのもの。

valueはpositionプロパティが取りうる値です。

主要な値の説明

positionプロパティは5つの値をとります。

以下は、CSSにおけるpositionプロパティの値とその説明、および例を示した一覧表です。

説明
static要素は通常の文書フローに従って配置されます。position: static;
relative要素は通常の文書フローに従って配置されますが、自身に対して相対的に位置をオフセットできます。position: relative;
absolute要素は最も近い非staticの祖先要素(または初期包含ブロック)に対して絶対位置を指定します。position: absolute;
fixed要素はビューポート(ブラウザーの表示領域)に対して固定位置を指定します。position: fixed;
sticky要素はスクロール位置に応じて相対的または固定的な位置を取ります。position: sticky;

これらの値を使用することで、要素の配置方法やスクロールに対する挙動を制御できます。

適切な値を選択して、要素の位置と挙動を調整してください。

Positionの種類: static, relative, absolute, fixed, sticky

こちらでは、positionプロパティの各値がどのような挙動を示すのか、具体的に解説していきます。

  • staticの特徴
  • relativeの特徴
  • absoluteの特徴
  • fixedの特徴
  • stickyの特徴

staticの特徴

position: static;は、要素に位置を指定しないことを意味します。

これはpositionプロパティのデフォルト値で、要素は文書の通常の流れに従って配置されます。

この場合、top、right、`bottom、leftのプロパティは一切影響しません。

また、z-indexも適用できません。

具体的な例を見てみましょう。

<div style="position: static;">
  これは静的な要素です。
</div>

このdivはページ上で通常通り配置され、周囲の要素と通常通りのインタラクションを持ちます。

relativeの特徴

position: relative;は、要素をその”通常位置”からオフセットする際に使用されます。

オフセットとは、要素をその通常位置から特定の距離だけ移動させること。

toprightbottomleftプロパティを使用して指定可能です。

<div style="position: relative; left: 20px;">
  これは左から20ピクセル移動した要素です。
</div>

この例では、div要素はその通常位置の左側から20ピクセル移動しています。

その”元のスペース”は基準として保持され、他要素はその存在を認識します。

absoluteの特徴

position: absolute;は、要素をその通常のフローから完全に取り除き、ページレイアウトの影響を受けずに配置する場合に使用されます。

その位置は、最も近い親要素(またはそれがなければ最初の包含ブロック)に対して相対的になります。

この位置はtoprightbottomleftプロパティで指定します。

<div style="position: absolute; top: 0; right: 0;">
  これはページの右上に配置された要素です。
</div>

topやrightは、本来の位置からの距離を示すもの。

0のときは通常位置と同じであることを意味します。

fixedの特徴

position: fixed;は、要素をビューポート(ブラウザウィンドウ)に対して固定位置に配置する場合に使用します。

スクロールしてもその位置は変わりません。

toprightbottomleftプロパティで位置を指定します。

<div style="position: fixed; bottom: 0; right: 0;">
  これはビューポートの右下に固定された要素です。
</div>

div要素はビューポートの右下に固定され、ページをスクロールしてもその位置は変わりません。

stickyの特徴

position: sticky;は、要素が一定の範囲でスクロールに伴って位置が変動し、その範囲を超えると固定される特殊な状態を表します。

スクロールした場合、sticky要素は一定の位置に”粘着”するように動作します。

toprightbottomleftプロパティを用いて”粘着”する位置を指定してください。

<div style="position: sticky; top: 0;">
  これはビューポートの上部に"粘着"する要素です。
</div>

この例では、ユーザーがページを下にスクロールしてもdiv要素はビューポートの上部に留まります。

ただしその親要素の範囲を超えると、通常のスクロールと同様に、上へ移動します。

Positionと併用できるプロパティ: top, right, bottom, left, z-index

Positionプロパティと一緒に使われる他の重要なプロパティを紹介します。

これらのプロパティにより、要素の正確な位置を制御できます。

  • top, right, bottom, leftの使い方
  • z-indexの使い方

top, right, bottom, leftの使い方

これらのプロパティは、要素の正確な位置を制御するためにpositionプロパティとともに使用されます。

各プロパティは、それぞれの指定する基準位置からのオフセットを定義します。

  • top:要素の上端
  • right:要素の右端
  • bottom:要素の下端
  • left:要素の左端

これらのプロパティを使用する際は、要素のpositionプロパティがstatic以外の値に設定されていることを確認しましょう。

staticの場合、これらのプロパティは無視されてしまいます。

z-indexの使い方

z-indexプロパティは、要素の重なり順(z軸順)を制御します。

順番を決めるのに、覚えておくことは以下のとおりです。

  • z-indexの値が大きい要素ほど前面に表示される
  • 値が小さい要素は背面に表示される

同じz-index値を持つ要素が重なる場合、HTMLソースで後に来る要素が前面に表示されます。

これらのプロパティを理解し、適切に使用することで、Webページのレイアウトを細かくコントロールすることが可能となります。

positionプロパティがstaticだと、z-indexによる指定は効果が出ません。

実践例: 各Positionの使い方

上記で解説した各position値の具体的な使用例をご覧ください。

  • staticの実践例
  • relativeの実践例
  • absoluteの実践例
  • fixedの実践例
  • stickyの実践例

staticの実践例

position: static;は、指定しなくても全ての要素にデフォルトで適用されます。

これにより、各要素はドキュメントフローに従って配置されます。

relativeの実践例

position: relative;は要素を少しだけ移動させたい時に使います。

例えば、以下のようにマウスホバー時に要素を移動させる効果を作ることが可能です。

<style>
.button {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  top: -3px;
}
</style>

<button class="button">ホバーミー</button>

この例では、ボタンにマウスを置くと少し上に移動します。

absoluteの実践例

position: absolute;は、親要素に対して要素を絶対配置する際に使用します。

例えば、以下のように要素を親要素の右下に配置することが可能です。

<style>
.container {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.box {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>

<div class="container">
  <div class="box">右下に配置されました</div>
</div>

この例では、.box要素は親である.container要素の右下に配置されます。

fixedの実践例

position: fixed;は、特定の要素を常に表示したい場合に使用します。

例えば、以下のようにナビゲーションバーを常に画面上部に表示することが可能です。

<style>
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 10px;
}
</style>

<div class="navbar">ナビゲーションバー</div>

この例では、.navbar要素はページをスクロールしても常に画面上部に固定されて表示されます。

stickyの実践例

position: sticky;は特定の範囲で要素をスクロールに追随させたいときに使用。

例えば、以下のように要素をスクロール範囲内で上部に”粘着”させることが可能です。

<style>
.container {
  height: 300px;
  overflow: auto;
}

.sticky {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  padding: 10px;
}
</style>

<div class="container">
  <div class="sticky">スティッキー要素</div>
  <p>ここにたくさんのテキスト...</p>
</div>

この例では、.sticky要素は、親である.container要素のスクロール範囲内で上部に”粘着”します。

アクセシビリティとパフォーマンスの考慮点

positionプロパティを使用する際のアクセシビリティとパフォーマンスに関連するいくつかの重要な注意点を見ていきましょう。

  • Positionに関連するアクセシビリティ問題
  • Positionに関連するパフォーマンス問題

Positionに関連するアクセシビリティ問題

要素の配置を調整するためにpositionプロパティを使用するときは、アクセシビリティを確保することが重要です。

なぜならスクリーンリーダーのような支援技術が、HTMLソースの順序を使用してコンテンツを読み上げるから。

具体的には、視覚的な表示がHTMLソース内の順序と一致するように注意する必要があります。

Positionに関連するパフォーマンス問題

positionプロパティを使う際は、パフォーマンスへの影響を考慮しましょう。

とくにfixedとstickyは、ブラウザが要素のレンダリング位置を頻繁に再計算しているからです。

そのため、これらのプロパティを大量に使用すると、Webページのパフォーマンスが低下する可能性があります。

まとめ

当記事では、CSSのpositionプロパティの基本概念と使用方法を学びました。

それぞれの値(staticrelativeabsolutefixedsticky)がどのような状況で使用され、どのように動作するか理解することは、効果的なWebデザインとレイアウト制御に不可欠です。

当記事で紹介した知識は基本的なものですが、さらに高度なレイアウトテクニックを学びたい場合は、FlexboxやCSS Gridなどの他のCSSレイアウトモジュールについて学ぶことをおすすめします。

使い方を理解し、適切に活用することで、さまざまなレイアウト課題に対応することができるようになるでしょう。

タイトルとURLをコピーしました