【CSS】座標固定のたった3つの方法を解説！

はじめに
●CSSでの座標固定の基本
●応用例とサンプルコード
まとめ

はじめに

この記事では、CSSで座標を固定する方法を初心者目線で徹底解説します。

サンプルコードも付いているので、一緒に学んでいきましょう。

あなたもこの記事を読み終わるころには、CSS座標固定の達人になっていることでしょう。

●CSSでの座標固定の基本

まずは、CSSで座標を固定する方法の基本について説明します。

座標固定には主に3つの方法があります。

それぞれ「position: static」、「position: relative」、「position: absolute」と「position: fixed」です。

これらを上手く使い分けることで、あなたのウェブページは見栄えが良くなります。

○position: static

position: staticは、要素の位置を指定しない方法です。

これは、デフォルトの状態で、要素は通常の文書フローに従って配置されます。

.static {
  position: static;
}

○position: relative

position: relativeは、要素を相対的に配置する方法です。

要素は、通常の文書フローに従って配置された後、指定された座標に移動します。

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

○position: absolute

position: absoluteは、要素を絶対的に配置する方法です。

要素は、最も近いpositionがstatic以外の祖先要素に対して、指定された座標に配置されます。

.absolute {
  position: absolute;
  top: 10px;
  left: 20px;
}

○position: fixed

position: fixedは、要素を固定位置に配置する方法です。

要素は、ブラウザウィンドウに対して指定された座標に配置され、スクロールしても位置が変わりません。

.fixed {
  position: fixed;
  top: 10px;
  left: 20px;
}

●応用例とサンプルコード

それでは、これらの座標固定方法を応用した例を見ていきましょう。

○サイドバーの固定

ウェブページでよく見かけるサイドバーを固定する場合、position: fixedを使います。

これにより、ページをスクロールしてもサイドバーが常に表示されます。

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #f5f5f5;
}

○モーダルウィンドウ

ポップアップ表示されるモーダルウィンドウを作成する際には、position: absoluteを使います。

これにより、モーダルウィンドウが親要素に対して中央に配置されるように設定できます。

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

○ツールチップ

ツールチップは、要素の上にマウスカーソルを合わせると表示される小さな情報ボックスです。

これを実現するためには、position: relativeとposition: absoluteを組み合わせて使います。

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:hover:after {
  content: "ツールチップの内容";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
}

これで、CSSで座標を固定する方法がわかったはずです。

さらに練習して、あなたのウェブページを見栄えの良いものにしていきましょう。