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

CSSを使ってHTML要素を配置する方法｜positionプロパティの基本

CSSを使用すると、HTML要素をページ上の好きな場所に自由に配置できます。どのHTML要素でも、思い通りの位置に置くことが可能です。

配置方法としては、大きく分けて次の2種類があります。

  • 相対配置（relative）：要素の本来あるべき位置（自然な位置）を基準として、そこからずらして配置します。
  • 絶対配置（absolute）：親要素を基準として、その中での絶対的な位置に配置します。

相対配置（relative）の例

それでは、相対配置（position:relative）を使った具体的な例を見てみましょう。以下のコードでは、div要素を本来の位置から左に70px、上に1pxずらして表示しています。

<html>
    <head>
    </head>
    <body>
        <div style = "position:relative;left:70px;top:1px;background-color:blue;color: white;">
          This div has relative positioning.
        </div>
    </body>
</html>

このコードを実行すると、青い背景に白い文字で書かれたdiv要素が、通常の位置よりも少し右下にずれて表示されます。leftやtopの値を変更することで、移動量を自由に調整できます。

このように、CSSのpositionプロパティを活用すれば、レイアウトの自由度が大きく向上し、より柔軟なWebページデザインが実現できます。

  1. CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説

    CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "

  2. CSS Flexboxで要素をコンテナの下部に配置する方法

    Flexboxで要素を下部に配置する基本の考え方 CSS Flexbox(フレックスボックス)を使えば、positionなどの位置指定プロパティに頼らなくても、要素をコンテナの下部に簡単に配置できます。鍵となるのはmargin-top: auto;という指定です。 フレックスアイテムに自動マージン(autoマージン)を設定すると、コンテナ内の余った空きスペースがすべてそのマージンに吸収されます。その結果、要素は主軸方向の末端へ押し込まれます。flex-direction: column;の場合、これはコンテナの最下部を意味します。 構文 flexプロパティの基本的な構文は次のとおりです。 S