CSSで要素を浮かせる方法を徹底解説!

CSSで浮かせる方法を徹底解説!初心者でもわかる使い方と対処法、応用例も紹介CSS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webページのデザインでは、特定の要素を目立たせるために、浮かせる技術がよく使われます。

この技術はCSSを利用して簡単に実現することができます。

本記事では、CSSで要素を浮かせる方法を初心者の方にも分かりやすくご紹介いたします。

●CSSで要素を浮かせる方法とは?

要素を浮かせる際には、positionプロパティを変更することで実現します。

このpositionプロパティにはstaticrelativeabsolutefixedstickyの5つの値が存在します。

この中で、relativeabsolutefixedstickyを活用することで、要素を浮かせることができます。

○relativeを使った要素の浮かせ方

relativeを使うと、要素が現在の位置を起点として相対的に移動することができます。

次のコードは、relativeを使って、要素を下に20px、右に20px移動させる例です。

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

このコードを実行すると、要素が下に20px、右に20px移動します。

○absoluteを使った要素の浮かせ方

absoluteを使うと、要素が親要素を基準として、位置を指定することができます。

次のコードは、absoluteを使って、親要素からの距離を指定して要素を移動させる例です。

.parent {
  position: relative;
}
.box {
  position: absolute;
  top: 20px;
  left: 20px;
}

このコードを実行すると、親要素から20px下に、20px右に要素が移動します。

○fixedを使った要素の浮かせ方

fixedを使うと、要素が画面上の固定位置に表示されます。

スクロールしても画面上の位置が変わらないため、ヘッダーやフッターなどの固定要素の作成によく使われます。

次のコードは、fixedを使って、画面右下に要素を表示させる例です。

.box {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

このコードを実行すると、画面右下に要素が表示されます。

○stickyを使った要素の浮かせ方

stickyを使うと、要素が一定の範囲内で固定されます。

要素が指定された範囲を超えると、通常のrelativeに切り替わります。

次のコードは、stickyを使って、要素をヘッダーに固定する例です。

.header {
  position: sticky;
  top: 0;
}

このコードを実行すると、ヘッダーが上部に固定され、スクロールしても画面上部に表示されます。

●要素の浮かせ方に関する問題と対処法

要素を浮かせることで、他の要素と重なることがあります。

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

z-indexプロパティは、数字が大きいほど上に表示されます。

次のコードは、z-indexプロパティを使って、要素の重なり順を調整する例です。

.box1 {
  z-index: 1;
}
.box2 {
  z-index: 2;
}

このコードを実行すると、要素2が要素1の上に表示されます。

●要素の浮かせ方の応用例

要素を浮かせることで、様々なデザイン効果を実現することができます。

要素を浮かせたアコーディオンメニューの例を紹介します。

<style>
  .accordion {
    position: relative;
    margin-bottom: 20px;
    background-color: #eee;
    overflow: hidden;
    transition: height 0.3s ease;
  }
  .accordion-header {
    position: relative;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    background-color: #ccc;
  }
  .accordion-header:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: normal;
  }
  .accordion-header.active:after {
    content: "-";
  }
  .accordion-content {
    position: relative;
    padding: 10px;
    background-color: white;
  }
  .accordion-header.active + .accordion-content {
    max-height: 500px;
  }
</style>
<div class="accordion">
  <div class="accordion-header">メニュー1</div>
  <div class="accordion-content">コンテンツ1</div>
</div>
<div class="accordion">
  <div class="accordion-header">メニュー2</div>
  <div class="accordion-content">コンテンツ2</div>
</div>
<div class="accordion">
  <div class="accordion-header">メニュー3</div>
  <div class="accordion-content">コンテンツ3</div>
</div>

このコードを実行すると、メニューをクリックするとコンテンツが表示されるアコーディオンメニューが表示されます。

メニューをクリックすると、該当するコンテンツがスライドダウンして表示されるようになっています。

まとめ

本記事では、CSSを使った要素の浮かせ方について解説しました。

Webページのデザインにおいて、CSSのpositionプロパティを使った要素の浮かせ方は非常に有効な手段です。

本記事を参考に、オリジナルのデザインを試してみてください。