はじめに
HTMLポジショニングを完全に理解し、使いこなせるようになりたいと思っているあなた。
この記事を読めば、HTMLポジショニングの基本から応用まで、初心者でも簡単にマスターできます。
●HTMLポジショニングの基本
HTMLで要素の位置を調整する際、CSSのポジショニングが非常に重要です。
ポジショニングにはいくつかの種類があります。
○ポジショニングとは
ポジショニングとは、Webページ上で要素の位置を制御する方法です。
これにより、要素を任意の位置に配置したり、他の要素と重ねたりすることができます。
○ポジショニングの種類
ポジショニングには主に下記の5つの種類があります。
- Static(デフォルト)
- Relative(相対配置)
- Absolute(絶対配置)
- Fixed(固定配置)
- 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を使ったポジショニングの基本と応用が理解でき、実践できるようになります。
ぜひ、上記のサンプルコードを参考にして、自分だけのオリジナルなレイアウトやデザインを試してみてください。