40代高卒者がIT転職に成功するためのデザインスキル【position】

こんにちは、フローです。

今回は私が1番ハマった、CSSのpositionについて書いていきたいと思います。

このposition要素は、WEB制作をやっていたら絶対に出てくる要素のひとつです。

是非覚えて使えるようになりましょう。

1 CSSのpositionとは
2 fixedの例
- 2.1 HTML
- 2.2 CSS
3 まとめ

CSSのpositionとは

positionプロパティは、要素の配置方法を制御するために使用されます。

positionプロパティには主に4つの値があり、

それぞれ異なる要素の配置方法を提供します。

static（デフォルト）

要素は通常の文書フローに従って配置されます。

top, right, bottom, leftプロパティは無視されます。

relative

要素は通常の文書フローに従って配置されますが、

top, right, bottom, leftプロパティを使って

相対的に移動することができます。

要素の元の位置は保持され、他の要素に影響を与えません。

absolute

要素は、最も近い非staticな祖先要素

（positionがrelative, absolute, fixed, stickyのいずれか）

に対して相対的に配置されます。

要素は通常の文書フローから外れ、他の要素に影響を与えません。

top, right, bottom, leftプロパティを使用して位置を指定できます。

fixed

要素はビューポート（ブラウザの表示領域）

に対して固定され、スクロールに関係なくその位置に保持されます。

通常の文書フローから外れ、他の要素に影響を与えません。

top, right, bottom, leftプロパティを使用して位置を指定できます。

sticky（一部のブラウザではサポートされていません）

要素は、スクロールに応じて相対的または固定的に配置されます。

特定の閾値に達すると、要素が固定されたように振る舞います。

top, right, bottom, leftプロパティを使用して、要素が固定される基準を指定できます。

fixedの例

fixedはCSSのpositionプロパティの値の1つで、

よく使われる要素のひとつです。

要素をビューポート（ブラウザの表示領域）に対して

固定的に配置するために使用されます。

fixedが適用された要素は、画面のスクロールに関係なく、

指定された位置に保持されます。

これにより、ナビゲーションバーやボタンなど、

常に表示されるべき要素を設置するのに適しています。

fixedは、通常の文書フローから外れます。

そのため、他の要素には影響を与えず、

重なりやズレが発生する可能性があります。

この問題を解決するためには、

z-indexプロパティを使って要素の重なり順を調整することができます。

fixed要素の位置は、

top、right、bottom、leftプロパティを使って指定します。

これらのプロパティは、ビューポートの対応する辺からの距離を示します。

HTML、CSSそれぞれの例を見ていきましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Elements Sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <h1>固定ヘッダー</h1>
  </header>
  
  <main class="content">
    <p>ここにコンテンツが入ります。スクロールしてもヘッダー、フッター、ボタンが固定されていることを確認してください。</p>
    <!-- その他のコンテンツ -->
    <div class="additional-space"></div>
  </main>

  <footer class="footer">
    <p>固定フッター</p>
  </footer>

  <div class="back-to-top">
    ↑
  </div>
</body>
</html>

CSS

/* 固定ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #333;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1 {
  color: #fff;
  margin: 0;
  font-size: 24px;
}

/* 固定フッター */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: #333;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer p {
  color: #fff;
  margin: 0;
  font-size: 14px;
}

/* 右下に固定されたボタン */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #f00;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

/* コンテンツのスタイル */
.content {
  margin-top: 80px;
  margin-bottom: 60px;
}

/* 追加の余白 */
.additional-space {
  height: 2000px;
}

この例では、

index.htmlファイル内の<main>タグ内に新たに

を追加しています。

これに対応するCSSスタイルである

.additional-spaceは、高さを2000pxに設定し、

十分な余白を提供しています。

これにより、ページをスクロールすることができるようになり、

固定されたヘッダー、フッター、および右下のボタンが

正しく機能していることが確認できます。

このように余白を追加することで、

ユーザーはページをスクロールしてコンテンツを閲覧しながら、

常に固定された要素にアクセスできるようになります。

この方法は、ナビゲーションや重要な機能を常に利用可能にするために、

ウェブデザインで広く使われています。

まとめ

以上が、CSSのpositionの使い方の一例です。

本当によく使う要素なので、是非使ってみて慣れて覚えてください。

次回も他の例を書いていきたいと思います。

レッツチャレンジ！

カテゴリー