CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの位置に関するステップバイステップガイド

CSS positionプロパティは、HTMLページ上の要素の位置を変更します。 top、right、left、およびbottomプロパティは、ボックスの端に対して要素が配置される場所を定義します。位置CSSプロパティには、静的、固定、相対、スティッキー、絶対の5つの値があります。

仕様に基づいて要素を適切な場所に配置することは、優れたWebデザインの重要な部分です。

そこでCSSのpositionプロパティが登場します。positionプロパティには、要素をWebページに配置する方法を定義するために使用できる5つの値があります。

このチュートリアルでは、例を使用して、positionプロパティを使用してWebページに要素を配置する方法について説明します。このチュートリアルを読むと、位置プロパティを使用してCSSのWebページに要素を配置するエキスパートになります。

CSSの位置

positionプロパティを使用すると、Webページ上の要素の位置を定義できます。 positionプロパティの構文は次のとおりです。

position: positionType;

positionプロパティが役立つ状況はいくつかあります。たとえば、ページの下部に固定されたナビゲーションバーをデザインすることもできます。

Webページ上の要素の位置を設定するために使用できる5つの値があります：

  • 静的
  • 修正済み
  • 相対的
  • 粘着性
  • 絶対

上記の5つの値のいずれかを使用して、要素の配置方法を指定できます。 top、bottom、left、およびrightプロパティを使用して、ページ上の要素の位置をさらに定義できます。この記事の例では、これがどのように機能するかについて説明します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

CSS位置の値

位置プロパティの潜在的な値のそれぞれを使用する方法を探求し始めることができます。 positionプロパティで使用できる各値の例を見ていきましょう。

静的位置

HTML要素は、デフォルトで静的として配置されます。これは、要素が上、下、左、および右のCSSプロパティの影響を受けないことを意味します。コードで特に指定されていない限り、ブラウザは要素を静的な位置に自動的にレンダリングします。

たとえば、テキストを含むボックスを設計しているとします。このボックスの内容をデフォルトの位置を使用して配置する場合は、次のコードを使用できます：

<html>

<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	position: static;
	border: 2px solid lightblue;
}

CSSの位置に関するステップバイステップガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

ページ上に静的に配置されるボックスを作成しました。つまり、ボックスは特定の方法で配置されていません。むしろ、その位置はブラウザのデフォルトに基づいています。私たちのボックスには、幅2pxの水色の実線の境界線があります。この境界線により、ボックスが見やすくなります。

固定位置

固定値は、Webページの特定の場所に要素を配置します。

固定値を使用すると、固定されている要素は常に同じ場所にとどまります。ユーザーがWebページを下にスクロールしても、要素は固定されたままになります。これは、要素が通常のWebページビューから削除されるためです。固定値プロパティを使用して要素を配置するには、top、right、bottom、およびleftプロパティを使用する必要があります。

ボックスを作成して、Webページの右下隅に固定します。次のコードを使用してこれを行うことができます：

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	width: 200px;
	border: 2px solid lightblue;
	position: fixed;
	bottom: 0;
	right: 0;
}

CSSの位置に関するステップバイステップガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

この例では、固定位置の値を使用して、Webページの特定の位置に固定されたボックスを作成しました。下：0および右：0のプロパティは、ボックスをWebページの右下隅に配置します。

ボックスの幅は200pxにするように指定しました。ボックスには、2pxの水色の実線の境界線が必要です。これらのスタイルにより、ボックスが見やすくなります。

上の画像でわかるように、ボックスはWebページの右下隅に配置されています。ユーザーが下にスクロールすると、ボックスは画面上の位置を保持します。これは、ユーザーがスクロールしても、画面の右下にあるボックスが引き続き表示されることを意味します。

相対位置

相対値は、要素をデフォルトの位置を基準にして配置します。

top、bottom、left、またはrightプロパティに加えて、相対値が使用されます。これらの4つのプロパティは、要素がデフォルトの位置からどのようにオフセットされるかを指定します。比較的配置されたボックスによって作成されたスペースは、別の要素で埋められません。

たとえば、50ピクセルの左境界線を基準にして要素を配置する場合は、leftプロパティの値を指定します。このようなボックスを作成するために使用するコードは次のとおりです。

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
position: relative;
left: 50px;
	border: 2px solid lightblue;
}

CSSの位置に関するステップバイステップガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

この例では、相対的な位置にあるボックスを定義しました。 leftプロパティを使用して、ボックスを左に50pxオフセットしました。ご覧のとおり、ページの先頭とボックスの先頭の間には50ピクセルのギャップがあります。これは、位置：相対および左：50pxのプロパティを使用して作成しました。

ボックスの左側に作成されたスペースは、他の要素で埋められません。

スティッキーポジション

スティッキー位置の値は、訪問者がしきい値を超えるまで要素を相対的に配置します。そうすると、要素の位置が固定されます。

スティッキーポジションは、基本的に相対ポジションと固定ポジションの組み合わせです。スティッキーエレメ​​ントがロードされると、比較的配置されます。ユーザーがページ上の特定のポイントを超えて下にスクロールした後、要素は固定位置にバインドされたままになります。

ドキュメントの流れを維持したい場合は、スティッキーポジションを使用すると便利です。訪問者がその要素を見失うことがないように、要素を特定の位置に固定することができます。

スティッキー位置は通常、ユーザーがページを下にスクロールしたときに画面の上部に貼り付くナビゲーションバーで使用されます。

ページの上部にボックスを表示する必要があります。このボックスはテキストの後に表示され、ユーザーが画像まで下にスクロールすると上部に固定されます。このタスクを実行するには、次のコードを使用できます。

<html>

<p>Lorem ipsum dolor sit amet, … </p>
<div>
	<p class="inner">This is a positioned box.</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>

<style>

.inner {
	position: sticky;
	top: 0;
	border: 2px solid lightblue;
}

CSSの位置に関するステップバイステップガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

この画像では、テキストの最初の段落の後にボックスが表示されていることがわかります。これは、ユーザーがまだ下にスクロールしてボックスに出会っていないためです。これは、ユーザーがボックスを超えて下にスクロールしたときに発生することです：

CSSの位置に関するステップバイステップガイド

ページの上部に、Lorem ipsum …の段落があります。 標準テキスト。 This is a positioned boxというテキストを含むボックスを修正しました この段落の下。さらに、ユーザーが宣言した位置のボックスまで下にスクロールすると、ボックスは画面の上部にバインドされます。ユーザーがスクロールし続けると、ボックスは画面の上部に表示されたままになります。

ボックスは、テキストの2つの段落の間の初期位置に戻ります。これは、ユーザーがボックスの上をスクロールしたときにのみ発生します。

絶対位置

絶対値は、すでに配置されている別の要素を基準にして要素を配置します。

絶対プロパティは、すでに配置されている別の要素を基準にして要素を配置します。たとえば、絶対位置の要素は、テキストの段落を含むボックス内のテキストである場合があります。このボックスは、相対位置または固定位置にすることができます。

別のボックスの左下隅に表示するボックスを設計しています。これらのボックスは、次のコードを使用して作成できます。

<html>

<div class="outer">
	<p>This is the outer box.</p>
	<p class="inner">This is a positioned box.</p>
</div>

<style>

.outer {
	position: relative;
	border: 2px solid lightblue;
	width: 300px;
	height: 300px;
}

.inner {
	position: absolute;
	left: 0;
	bottom: 0;
	border: 2px solid pink;
}

CSSの位置に関するステップバイステップガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

HTMLファイルでは、2つのボックスを定義します。

タグを使用して最初のボックスを宣言し、それにクラス external を割り当てます。 。これは、ボックスに外部に関連付けられたCSSスタイルが含まれることを意味します クラス。

タグを使用して2番目のボックスを宣言し、クラス innerを割り当てます。 。

CSSファイルで、外側のボックスを次のように指定します。

  • Webページ上の他の要素に対して相対的な位置に配置します。
  • 幅2pxの水色の境界線があります。
  • 幅300ピクセル、高さ300ピクセルにする。

内側のボックスは次のように指定します：

  • 絶対に配置してください。
  • 外箱の左下に配置します（左：0、下：0を使用）。
  • 幅2pxのピンクの無地の境界線があります。

この例では、ピンクのボックス（inner）を配置しました ）outerの左下 箱。一方、fixedキーワードを使用する場合、ピンク色のボックスはWebページの下部に配置されます。



結論

CSS positionプロパティは、Webページ上の要素の位置を定義します。 top、right、bottom、およびleftプロパティは、Webページの特定の場所に要素を配置します。これで、プロのようにpositionプロパティを使用してCSSで要素の配置を開始する準備が整いました。


  1. CSSの要素タイプセレクター

    CSS要素タイプセレクターは、タイプのすべての要素を選択するために使用されます。 CSS要素タイプセレクターの構文は次のとおりです 構文 element {    /*declarations*/ } 例 次の例は、CSS要素タイプセレクターを示しています <!DOCTYPE html> <html> <head> <style> li {    list-style: none;    margin: 5px;    border-bottom-style: do

  2. CSSポジショニング要素

    positionプロパティは、要素の配置に使用されます。つまり、以下はポジショニング要素です- 静的 −要素ボックスは、通常のドキュメントフローの一部として、前の要素と前の要素の後に配置されます。 相対 −要素のボックスは、通常の流れの一部として配置されてから、ある程度の距離だけオフセットされます。 絶対 −要素のボックスは、それを含むブロックに関連して配置され、ドキュメントの通常のフローから完全に削除されます。 修正済み −要素のボックスは絶対的に配置され、位置について説明されているすべての動作が絶対的です。 以下は、CSSを使用して要素を配置するためのコードで