CSSでの位置指定の使い方と対処法！初心者向けの徹底解説とサンプルコード

はじめに
●CSSの位置指定とは？
●CSSの位置指定の種類
●CSSの位置指定の対処法
- ○1. 要素がはみ出す
- ○2. 要素の位置が崩れる
●CSSの位置指定の応用例
- ○1. タブ切り替え
- ○2. スクロール固定ヘッダー
まとめ

はじめに

Webサイトを作る際に、CSSを使ってデザインやレイアウトを調整することは欠かせません。その中でも、要素の位置を指定することはとても重要です。

しかし、初心者にとっては難しい概念かもしれません。

そこで本記事では、CSSの位置指定の使い方と対処法について、初心者でも分かりやすく徹底解説します。

●CSSの位置指定とは？

CSSの位置指定とは、要素が表示される位置を指定することです。

要素の位置は、HTMLの構造や、要素自体のプロパティ、他の要素との関係など、様々な要因によって決まります。

CSSの位置指定を使うことで、これらの要因を自分で調整することができます。

●CSSの位置指定の種類

CSSの位置指定には、次のような種類があります。

static（静的）
relative（相対的）
absolute（絶対的）
fixed（固定的）

それぞれの種類について、詳しく解説していきます。

○1. static（静的）

staticは、要素のデフォルトの表示方法です。

この場合、要素はHTMLの構造に従って、自然な位置に表示されます。CSSで位置を指定しなくても、自動的に表示されます。

○2. relative（相対的）

relativeは、要素をHTMLの構造に従って表示し、その位置からの相対的な位置を指定します。

この場合、要素は元々の位置から指定された位置だけずらすことができます。

<div style="position:relative; top:10px; left:20px;">
    <p>相対的にずらされたテキストです。</p>
</div>

上記のコードでは、div要素に対して、position:relative; top:10px; left:20px;のプロパティを指定しています。

これにより、div要素内のp要素が、相対的に位置がずらされます。

具体的には、上下に10ピクセル、左右に20ピクセルずらされます。

○3. absolute（絶対的）

absoluteは、要素をHTMLの構造から切り離し、親要素や他の要素との関係を無視して位置を指定します。

この場合、親要素や他の要素に影響されず、指定された位置に要素が表示されます。

<div style="position:relative;">
    <div style="position:absolute; top:10px; left:20px;">
        <p>絶対的に位置指定されたテキストです。</p>
    </div>
</div>

上記のコードでは、親要素のdiv要素に対してposition:relative;を指定し、その中にposition:absolute; top:10px; left:20px;のプロパティを指定したdiv要素を作成しています。

これにより、p要素が、親要素のdiv要素とは無関係に、左上から上下に10ピクセル、左右に20ピクセルの位置に表示されます。

○4. fixed（固定的）

fixedは、要素をブラウザウィンドウの表示領域に固定して位置を指定します。

この場合、スクロールしても要素の位置は変わりません。

<div style="position:fixed; top:10px; right:20px;">
    <p>固定的に位置指定されたテキストです。</p>
</div>

上記のコードでは、div要素に対して、position:fixed; top:10px; right:20px;のプロパティを指定しています。

これにより、div要素がブラウザウィンドウの右上から上下に10ピクセル、左から20ピクセルの位置に表示され、スクロールしても固定されたままです。

●CSSの位置指定の対処法

CSSの位置指定を使う際には、いくつかの問題が発生することがあります。

それらの問題に対処する方法を紹介します。

○1. 要素がはみ出す

要素の位置を指定する際、指定した範囲を超えてしまい、他の要素に重なってしまうことがあります。この場合、以下のような対処法があります。

・overflowプロパティを指定する　

overflowプロパティにhiddenやscrollを指定することで、要素がはみ出た部分を非表示にすることができます。

また、scrollを指定することで、スクロールバーを表示させることもできます。

・z-indexプロパティを指定する

z-indexプロパティを指定することで、要素の重なり順を指定することができます。

z-indexの値が大きい方が、手前に表示されます。

○2. 要素の位置が崩れる

要素の位置を指定する際、他の要素との関係を考慮しない場合、要素の位置が崩れることがあります。この場合、下記のような対処法があります。

・positionプロパティを相対的なものに変更する　

要素のpositionプロパティをrelativeに変更することで、HTMLの構造に従った位置に表示されるようになります。

・要素のサイズを調整する　

要素のサイズを調整することで、他の要素との関係を調整することができます。

paddingやmarginを指定することで、要素の間隔を調整することもできます。

●CSSの位置指定の応用例

CSSの位置指定には、様々な応用例があります。

いくつかの応用例を紹介していきます。

○1. タブ切り替え

タブ切り替えを実装する際には、positionプロパティを使って、タブの位置を調整することができます。

HTML

<div class="tab-wrapper">
  <div class="tab-menu">
    <a href="#tab1">タブ1</a>
    <a href="#tab2">タブ2</a>
    <a href="#tab3">タブ3</a>
  </div>
  <div class="tab-content" id="tab1">
    タブ1のコンテンツです。
  </div>
  <div class="tab-content" id="tab2">
    タブ2のコンテンツです。
  </div>
  <div class="tab-content" id="tab3">
    タブ3のコンテンツです。
  </div>
</div>

CSS

.tab-wrapper {
  position: relative;
  height: 200px;
}
.tab-menu {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
.tab-menu a {
  display: block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  margin-right: 10px;
}
.tab-menu a.active {
  background-color: #ccc;
}
.tab-content {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  display: none;
}
.tab-content.active {
  display: block;
}

このコードでは、タブメニューとタブの内容を分離して表示するためのCSSルールセットを提供しています。

.tab-wrapperクラスは、全体を囲むコンテナとして機能し、その中にタブメニューとタブコンテンツを収容します。

このコンテナにposition: relative;を設定することで、内部の要素を絶対位置で配置する基準点を作成しています。

.tab-menuクラスは、上部に固定されるタブメニューを表しています。

position: absolute;とtop: 0;、left: 0;の指定により、親要素である.tab-wrapperの左上隅に位置します。

また、display: flex;を使用して、その内部のaタグ（タブ）を水平に整列させています。

各タブリンクは、一定の余白と境界線を持ち、選択されているタブは背景色が変わるようにスタイルが設定されています。

タブコンテンツは、初めは非表示（display: none;）に設定されていますが、アクティブになると表示される（display: block;）ようになります。

タブコンテンツはタブメニューよりも下に表示されるよう、top: 40px;を指定して位置を調整しています。

○2. スクロール固定ヘッダー

スクロールしてもヘッダーが固定されるようにする場合、positionプロパティを使って、ヘッダーの位置を調整することができます。

HTML

<header class="header">
  <h1>ヘッダー</h1>
</header>
<div class="main-content">
  <p>メインコンテンツ</p>
</div>

CSS

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
}
.main-content {
  margin-top: 100px;
}

このコードでは、ヘッダーを常に画面の上部に固定するためのCSSルールセットを提供しています。

.headerクラスに対してposition: fixed;を設定することで、ヘッダーはスクロールしても常に同じ位置に表示されるようになります。

また、top: 0;とleft: 0;を指定することで、ヘッダーが画面の左上隅に配置されるように指示しています。

その下の.main-contentは、スクロール固定のヘッダーによって隠れないよう、上部に100pxのマージンを取っています。