CSSプロパティ｜ position ポジション（top・bottom・left・right）

position: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「position」についてのご説明です。

ホームページ制作・作成において、position（ポジション）は、ホームページを構成するボックス（要素）の配置方法（基準位置）を指定します。

position ボックスの配置方法（基準位置）を指定

positionは、ホームページに配置するボックス（要素）の配置方法（基準位置）を指定。相対位置 / 絶対位置を指定します。ポジション。

positionによる表示位置の指定には、top、bottom、left、rightを併用（基準位置からの距離を指定）。

static

配置方法無指定（初期値）
top、bottom、left、rightは適用されない。

relative

相対位置への配置
staticを指定時に表示される位置が基準位置

absolute

絶対位置への配置

親ボックスにposition　static以外

親ボックスの左上が基準位置

親ボックスにposition　static以外の値が指定されていない

ウィンドウ全体の左上が基準位置

fixed

絶対位置への配置
スクロール時でも位置が固定される

要素の配置ルールを決定する中核的なプロパティ

CSSの「position」プロパティは、ホームページ（ウェブサイト）を構成するボックス（要素）を、本来の並び順から切り離して自由な位置に配置するための非常に重要なプロパティです。単独で使われることは少なく、基本的には「top」「bottom」「left」「right」といったプロパティと組み合わせて、基準となる位置からの距離を指定します。

より専門的には、以下の4つの主要な値（設定）を使い分けることで、複雑なレイアウトを実現します。

• static（初期値）：通常のHTMLの記述順に従って上から下へ配置されます。この状態ではtopやleftの数値は無効です。
• relative（相対配置）：本来配置されるはずだった「元の位置」を基準点として、そこからどれだけずらすかを指定します。
• absolute（絶対配置）：「position: relative;」などが指定された最も近い親要素の左上を基準点として、自由な位置に配置します。もし該当する親要素がない場合は、ページ全体の左上が基準となります。
• fixed（固定配置）：ブラウザの画面（ウィンドウ）そのものを基準にして位置を固定します。画面をスクロールしても常に同じ場所に留まり続けます。

特に、親要素に「relative」を指定し、その中に配置した子要素に「absolute」を指定することで、特定の枠内でのみ自由に要素を動かすテクニック（バナー画像の上に「NEW」というラベルを重ねる際など）は、ホームページ制作において頻繁に使用される必須の設計手法です。

追従ボタンや固定ヘッダーがもたらす集客への効果と注意点

Webマーケティングやユーザビリティ（使い勝手）の観点から見ると、positionプロパティ（特に「fixed」）は非常に強力な武器になります。例えば、ユーザーがページの下部までスクロールしても常に画面上部に表示され続ける「追従ヘッダー」や、画面の右下に常に表示される「お問い合わせボタン」などは、この「position: fixed;」によって実装されています。

ユーザーが情報を読んでいる最中いつでも、迷うことなく他のページへ移動したり、お問い合わせアクションを起こしたりできる状態を作ることは、サイトの回遊率やコンバージョン率（成約率）を向上させるために非常に効果的です。

ただし、スマートフォンのような画面の狭いデバイスで固定要素を多用しすぎると、本来読ませたい記事や商品のメインコンテンツが隠れてしまい、ユーザーに強いストレスを与えてしまいます。画面の占有率を計算し、閲覧の邪魔にならない適切なサイズと配置を設計することが、集客力と信頼性の高いホームページを作るための重要な鍵となります。

以下のシミュレーターで、position の値や親要素の設定が、実際の要素の配置にどのような影響を与えるかを操作して確認してみてください。

position: ;

ホームページ制作・Webデザインの1ポイント

ポジションは、要素の位置を指定する時に使用するため、Webデザインにとって重要な項目です。しかしながら、PC表示の場合はポジションの利用は便利であるものの、モバイル端末向けにピクセル単位での位置指定は、制作方法としては向いていない場合があります。

top

top: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「top」についてのご説明です。

ホームページ制作・作成において、top（トップ）は、ボックス（要素）の上からの配置位置（距離）を指定します。このCSSは他のCSSと合わせて使用するプロパティです。

top 上からの配置位置（距離）を指定

topは、ホームページ内にボックス（要素）を配置する場合の、上からの配置位置（基準位置の上端から配置するボックスの上端までの距離）を指定します。トップ。

表示位置の指定には、positionで配置方法（基準位置）を指定し、
positionの値がstatic以外の時にtopの指定が可能です。

例）

position:absolute;top:20px;

top : auto

自動調整（初期値）

上からの配置位置を自動調整します。

top : 数値

単位はpx・em・exなど

上からの配置位置を数値と単位で指定します。

top : %

基準となる親ボックスの幅・高さに対する割合を%値で指定

上からの配置位置をパーセント値で指定します。

追従ヘッダーの構築とユーザー体験の向上

CSSのtopプロパティは単なる配置の調整だけでなく、ホームページ（ウェブサイト）の使い勝手を大きく左右する重要な役割を担っています。事業用のサイトにおいて、ユーザーがページをスクロールしても常に見えている「追従ヘッダー（グローバルナビゲーション）」を実装する場面で、このプロパティが頻繁に活用されます。

より専門的には、「position: sticky;」という指定と「top: 0;」を組み合わせることで、画面の上端にピタッと張り付くメニューを簡単に構築できます。これにより、ユーザーはページ内のどこを読んでいても迷うことなく他のページへ移動できるようになります。快適な操作性は回遊率の向上や直帰率の低下に直結するため、集客やWebマーケティングの観点からも非常に効果的な設計手法です。

positionプロパティとの連携とレイアウトの基準点

topプロパティを運用する際、絶対に見落としてはいけないポイントがレイアウトの「基準点」に対する考え方です。topプロパティ単体で数値を指定しても、意図した場所に要素が移動してくれないというトラブルは、ホームページ制作の現場で非常によく起こります。

これは、topプロパティが単独では機能せず、必ずpositionプロパティ（absolute、relative、fixedなど）とセットで使う仕様になっているためです。特に「position: absolute;」を使って要素を配置する場合、親要素に対して「position: relative;」を指定しておかないと、画面全体（ブラウザのウィンドウ）の上端が基準になってしまい、デザインが大きく崩れてしまいます。

例えば、商品画像の上に「おすすめ」といった小さなバナーを重ねて配置するような、事業の成約率を高めるデザインを作る際には、この親要素と子要素の関係を正確に設定しておくことが重要です。正しいCSS設計によってレイアウト崩れを防ぎ、どのようなデバイスでも安定して閲覧できるホームページを維持することが、長期的な信頼の獲得に繋がります。

top: ;

ホームページ制作・Webデザインの1ポイント

topはホームページのWebデザインのレイアウトに関する項目ですが、基準となる親要素との相対関係で決定するため、きちんとした設定の手順に従う必要があります。うまく機能しない場合は、関連CSSとの関係、親子関係を確認すると解決することができることがよくあります。ホームページ制作時に設定を間違えると変な余白が出たりするケースがあるため、注意が必要です。

bottom

bottom: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「bottom」についてのご説明です。

ホームページ制作・作成において、bottom（ボトム）は、ボックス（要素）の下からの配置位置（距離）を指定します。

bottom 下からの配置位置（距離）を指定

bottomは、ボックスを配置する場合の、下からの配置位置（基準位置の下端から
配置するボックスの下端までの距離）を指定します。ボトム。

表示位置の指定には、positionで配置方法（基準位置）を指定し、
positionの値がstatic以外の時にbottomの指定が可能。

例）

position:absolute;bottom:20px;

bottom : auto

自動調整（初期値）

bottom: ;

bottom : 数値

単位はpx・em・exなど

bottom: px ; bottom:  em;

bottom : %

基準となる親ボックスの幅・高さに対する割合を%値で指定

bottom: %;

bottomプロパティの応用と実践的なレイアウト配置

CSSのbottomプロパティは、positionプロパティで指定した基準位置から、対象要素の下端までの配置位置を設定します。ホームページ制作の現場において、このプロパティを正しくコントロールすることは、ユーザーの利便性を高める特殊なパーツ配置や、視覚的な効果を施すために重要となります。

追従型パーツ（固定フッター・トップへ戻るボタン）の実装

ホームページ（ウェブサイト）をスクロールしても常に画面の最下部に表示させておきたいパーツの実装には、「position: fixed;」と「bottom」の組み合わせが用いられます。たとえば、スマートフォンの画面下部に常駐させるお問い合わせボタンや、ページの右下に配置する「トップへ戻る」ボタンなどがこれに該当します。画面サイズやスクロール状況に影響されず、ユーザーがいつでも次のアクションを起こせる動線を確保できるため、事業のコンバージョン率（問い合わせや成約の獲得率）を向上させる施策として大変有効です。

要素の重ね合わせとホバーエフェクトへの応用

より専門的には、画像の上にテキストを重ねて配置する際にもbottomプロパティがよく使用されます。親要素に「position: relative;」、配置するテキストに「position: absolute; bottom: 0;」を指定することで、画像の最下部にぴったりと重ねて見出しやキャプションを表示できます。また、ホームページに動きを持たせる手法として、マウスカーソルを合わせた（ホバーした）際に、bottomの数値を変化させてテキストを画面下部からスッと浮き上がらせるようなアニメーション演出を加えることも可能です。視覚的な楽しさを提供し、ユーザーの滞在時間を延ばす効果が期待できるかもしれません。

bottom: ;

ホームページ制作・Webデザインの1ポイント

このボトムも、レイアウトに関するCSSプロパティですが、基準となるポジションを明確にしてから設定する必要があります。ポジションが未設定のまま指定しても有効にはならないため注意が必要です。

left

left: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「left」についてのご説明です。

ホームページ制作・作成において、left（レフト）はホームページのボックス（要素）の左からの配置位置（距離）を指定します。ブロック要素の絶対的・相対的な位置指定になります。

left 左からの配置位置（距離）を指定

ホームページ制作において、leftを使用することで、ボックスを配置する場合の、左からの配置位置（基準位置の左端から配置するボックスの左端までの距離）を指定します。

表示位置の指定には、positionで配置方法（基準位置）を指定し、positionの値がstatic以外の時にleftの指定が可能です。

例）

position:relative;left:20px;

ホームページのレイアウトに関する設定になりますので、スマートフォン表示用に合わせてメディアクエリで無効化などをしておかないとレイアウト崩れの原因になることもあります。

left : auto

自動調整（初期値）

left : 数値

単位はpx・em・exなど

left : %

基準となる親ボックスの幅・高さに対する割合を%値で指定

位置制御と要素の重ね合わせにおけるleftプロパティの高度な運用

ホームページ（ウェブサイト）のレイアウト設計において、要素の配置を通常の表示フローから独立させて自由にコントロールしたい場面があります。基準位置からの左側の距離を指定する「left」プロパティは、追従型のナビゲーションメニューやポップアップウィンドウ、デザイン性の高い装飾要素の配置において欠かせない設定です。より専門的には、positionプロパティ（基準位置の設定）との相関関係や、要素の重ね合わせ順序（z-index）を意識した堅牢な構築手法が求められます。

positionプロパティ（基準位置）による挙動の違い

leftプロパティは、対象となる要素の「position」の値がstatic（初期値）以外の時に初めて効果を発揮します。この組み合わせによる挙動の変化を正しく理解しておくことが重要です。

・position: relative;（相対位置指定）
要素が本来表示されるべき通常の配置位置を基準とし、そこからどれだけ左側に距離を空けるかを指定します。

・position: absolute;（絶対位置指定）
親要素や先祖要素の中で、static以外のpositionが指定されている最も近い要素（一般的には position: relative; を指定した親コンテナ）の左端を基準とし、そこからの絶対的な距離を決定します。

・position: fixed;（固定位置指定）
親要素の配置に関わらず、ブラウザの画面全体の左端（ビューポート）を基準として位置を完全に固定します。画面をスクロールしても常に左側に残り続けるサイドバーや、画面左下・右下に配置する「お問い合わせはこちら」といったフローティングボタンを構築する際の基本となるプロパティです。

要素の中央揃えとマルチデバイスにおける注意点

絶対位置指定（absolute）を使って、要素を画面やコンテナの完全に中央に配置したい（中央揃え）という局面でも、leftプロパティは工夫して用いられます。

よく使われる高度なテクニックとして、「left: 50%;」を指定して要素の左端を全体の中心線まで移動させた上で、CSSの変形プロパティである「transform: translateX(-50%);」を組み合わせる手法があります。これにより、要素自身の横幅が動的に変化する場合でも、常にミリ単位で正確な中央配置をキープできるようになります。

ただし、こうした絶対的な位置制御を行う際には、スマートフォンなどの画面幅が異なるマルチデバイス環境への配慮を怠ってはいけません。パソコンの大画面モニターに合わせた数値（px単位など）をそのまま適用し続けてしまうと、スマートフォンの狭い画面では要素が画面の左側や右側にはみ出してしまい、閲覧すらできなくなる大きなレイアウト崩れ（バグ）を引き起こす可能性があります。

このようなトラブルを防ぐため、メディアクエリ（Media Queries）を活用して、スマートフォン表示時には「left: auto;」を指定して位置の固定を解除（リセット）し、通常の縦並びフローに戻すプログラミングを施します。あらゆる閲覧環境を想定し、ユーザーが快適に情報を取得できる構造を保つことが、事業用ホームページの信頼性を高め、Web集客の成果を持続させるための基盤となります。

left: ;

ホームページ制作・Webデザインの1ポイント

leftなどレイアウトに関する設定は、絶対的な位置設定と親要素との相対的な位置設定といった様々なパターンがあります。指定要素に設定するだけではCSSが効かない場合、親要素の設定が未設定である場合もよくありますのでチェックしてみましょう。

また、ホームページのレイアウトに関する指定は、モバイルデバイスなど閲覧環境によってはレイアウト崩れの原因になりやすいため注意が必要です。

right

right: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「right」についてのご説明です。

ホームページ制作・作成において、right（ライト）は、要素の右からの配置位置（距離）を指定します。

right 右からの配置位置（距離）を指定

rightは、ボックスを配置する場合の、右からの配置位置（基準位置の右端から
配置するボックスの右端までの距離）を指定します。ライト。

表示位置の指定には、positionで配置方法（基準位置）を指定し、
positionの値がstatic以外の時にrightの指定が可能となります。

例）

position:relative;right:20px;

right : auto

自動調整（初期値）

right : 数値

単位はpx・em・exなど

right : %

基準となる親ボックスの幅・高さに対する割合を%値で指定

right: ;

positionによる表示位置の指定の際、top、bottom、left、rightを併用します。

画面右側の配置制御とpositionプロパティとの連携

CSSの「right」プロパティは、ホームページ（ウェブサイト）上で特定の要素を配置する際、基準となる位置から「右側をどれだけ移動させるか（または右端からどれだけ内側にずらすか）」を指定するためのものです。事業用のサイトにおいて、特定のバナーやアイコンを意図した場所に正確に配置するために頻繁に使用されます。

より専門的には、このプロパティを運用する上で絶対に覚えておかなければならないルールがあります。それは、「right」単独で数値を指定しても画面上では全く機能しないという点です。このプロパティは、必ず「position」プロパティ（absolute、relative、fixed、stickyのいずれか）とセットで使用する必要があります。

例えば、商品画像の上に「期間限定」といった小さなラベルを重ねて右上に配置したい場合、画像の親要素に「position: relative;」を指定し、ラベルに対して「position: absolute; right: 0;」を指定することで、レイアウトを崩すことなく右端へピタッと揃えることができます。

追従ボタンのUI設計とスマートフォンでの集客効果

現代のホームページ制作において、この「right」プロパティが最も活躍するのは、画面をスクロールしても常に右下に追従してくる「お問い合わせボタン」や「チャット画面を開くアイコン」、「ページトップへ戻るボタン」などを実装する場面です。

Webマーケティングやユーザビリティ（使い勝手）の観点から見ると、スマートフォンの画面において「右下」という位置は、多くのユーザーが親指で最もタップしやすいゴールデンゾーンです。ここに「position: fixed; right: 20px; bottom: 20px;」といった指定を用いてコンバージョン（成約）に繋がるボタンを配置しておくことで、ユーザーはいつでも迷わず事業者にアクションを起こすことができ、結果としてお問い合わせ率の向上が期待できます。

ただし、注意点もあります。ボタンのサイズを大きくしすぎたり、画面の左右両方に過剰な追従要素を配置したりすると、スマートフォンで閲覧した際に肝心のメインコンテンツ（記事や商品情報）が隠れてしまいます。ユーザーが情報を読む邪魔をしてしまっては本末転倒であるため、閲覧ストレスを与えない適切な余白（rightやbottomの数値）を計算して設計することが、集客に強いホームページを育成する基本となります。

ホームページ制作・Webデザインの1ポイント

rightはホームページの要素の配置に関するレイアウト系の項目ですが、ページの絶対位置や親要素との相対位置での指定になりますので、使用する際は注意が必要です。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ