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: ;

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

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

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

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

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

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

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

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

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