読み込み中...

HTMLポジショニングを完全ガイド！5つの使い方とサンプルコード

HTMLポジショニングの基本を学ぶ HTML
2023.04.05
この記事は約9分で読めます。

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

HTMLポジショニングを完全に理解し、使いこなせるようになりたいと思っているあなた。

この記事を読めば、HTMLポジショニングの基本から応用まで、初心者でも簡単にマスターできます。

●HTMLポジショニングの基本

HTMLで要素の位置を調整する際、CSSのポジショニングが非常に重要です。

ポジショニングにはいくつかの種類があります。

○ポジショニングとは

ポジショニングとは、Webページ上で要素の位置を制御する方法です。

これにより、要素を任意の位置に配置したり、他の要素と重ねたりすることができます。

○ポジショニングの種類

ポジショニングには主に下記の5つの種類があります。

  1. Static（デフォルト）
  2. Relative（相対配置）
  3. Absolute（絶対配置）
  4. Fixed（固定配置）
  5. Sticky（粘着配置）

●HTMLポジショニングの使い方とサンプルコード

それぞれのポジショニングの使い方とサンプルコードを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    border: 1px solid black;
  }
</style>
</head>
<body>
  <div>Static positioning (default)</div>
</body>
</html>

○Relative

Relativeは、要素を相対的に配置します。

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

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    position: relative;
    left: 30px;
    top: 10px;
    border: 1px solid black;
  }
</style>
</head>
<body>
  <div>Relative positioning</div>
</body>
</html>

○Absolute

Absoluteは、親要素の位置を基準にして絶対的に配置します。

親要素に対して相対配置されている要素がなければ、ブラウザウィンドウに対して絶対配置されます。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    border: 1px solid black;
  }
  .box {
    position: absolute;
    left: 20px;
    top: 15px;
    border: 1px solid red;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Absolute positioning</div>
  </div>
</body>
</html>

○Fixed

Fixedは、ブラウザウィンドウを基準にして固定的に配置します。

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

<!DOCTYPE html>
<html>
<head>
<style>
  .fixed {
    position: fixed;
    right: 20px;
    bottom: 10px;
    border: 1px solid blue;
  }
</style>
</head>
<body>
  <div class="fixed">Fixed positioning</div>
</body>
</html>

○Sticky

Stickyは、要素が指定された範囲内で粘着的に配置されます。

スクロールに応じて、要素が固定されたり、通常の文書フローに従ったりします。

<!DOCTYPE html>
<html>
<head>
<style>
  .sticky {
    position: sticky;
    top: 10px;
    border: 1px solid green;
  }
</style>
</head>
<body>
  <div class="sticky">Sticky positioning</div>
</body>
</html>

●HTMLポジショニングの応用例とサンプルコード

次に、ポジショニングを応用した例をいくつか紹介します。

○レイアウト作成

絶対配置を利用して、ヘッダー、サイドバー、コンテンツ、フッターの4つの要素からなるレイアウトを作成します。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
  }
  .header, .sidebar, .content, .footer {
    position: absolute;
    border: 1px solid black;
  }
  .header {
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
  .sidebar {
    top: 60px;
    left: 0;
    bottom: 0;
    width: 200px;
  }
  .content {
    top: 60px;
    left: 210px;
    bottom: 0;
    right: 0;
  }
  .footer {
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

○画像の重ね表示

絶対配置を用いて、複数の画像を重ねて表示します。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
  }
  .image1, .image2 {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
</head>
<body>
  <div class="container">
    <img class="image1" src="image1.jpg" alt="Image 1">
    <img class="image2" src="image2.jpg" alt="Image 2">
  </div>
</body>
</html>

○固定ヘッダー・フッター

Fixedポジショニングを使って、スクロールしても表示され続けるヘッダーとフッターを作成します。

<!DOCTYPE html>
<html>
<head>
<style>
  .header, .footer {
    position: fixed;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #333;
    color: white;
    text-align: center;
  }
  .header {
    top: 0;
  }
  .footer {
    bottom: 0;
  }
  .content {
    margin-top: 60px;
    margin-bottom: 60px;
  }
</style>
</head>
<body>
  <div class="header">Header</div>
  <div class="content">
    <p>Content...</p>
    <!-- 省略 -->
  </div>
  <div class="footer">Footer</div>
</body>
</html>

○スクロール時の要素の表示・非表示

Stickyポジショニングを利用して、要素が指定された位置に到達したときに固定されるナビゲーションバーを作成します。

<!DOCTYPE html>
<html>
<head>
<style>
  .nav {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }
  .content {
    margin-top: 10px;
  }
</style>
</head>
<body>
  <div class="nav">Navigation Bar</div>
  <div class="content">
    <p>Content...</p>
    <!-- 省略 -->
  </div>
</body>
</html>

まとめ

この記事を読めば、HTMLとCSSを使ったポジショニングの基本と応用が理解でき、実践できるようになります。

ぜひ、上記のサンプルコードを参考にして、自分だけのオリジナルなレイアウトやデザインを試してみてください。