CSSのpositionプロパティを使って要素を自在に整列する方法
CSSでは、positionプロパティとtop・right・bottom・leftなどのオフセットプロパティを組み合わせることで、要素を思い通りの位置に整列させることができます。
positionプロパティで使える主な値
- static — 初期値。通常の文書フローに従って配置され、オフセットプロパティは無効になります。
- relative — 要素の本来あるべき位置を基準に、相対的にずらして配置します。
- absolute — positionが指定された直近の親要素を基準に、絶対的な位置へ配置します。
- fixed — ブラウザのビューポート(表示領域)を基準に固定され、スクロールしても動きません。
それでは、実際のコード例を見ながら、positionによる要素の整列方法を確認していきましょう。
例1:relativeとabsoluteで要素を配置する
<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Position</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.backSeats div{
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
background-color: #dc3545;
}
.rightAbsolute{
position: absolute;
right: 0px;
top: 80px;
}
.backLeftSeat{
background-color: #dc3545;
max-height: 100px;
height: 70px;
margin: 20px;
width: 300px;
display: inline-block;
position: relative;
resize: vertical;
overflow: auto;
border: 4px solid #000;
}
.withPosition{
position: absolute;
top: 50%;
left: 20px;
right: 20px;
color: white;
padding: 20px;
transform: translateY(-50%);
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backSeats">
<div class="rightAbsolute">Premium Absolute Positioned Seat</div>
</div>
</div>
</body>
</html>
このコードのポイントは次の通りです。
- 親要素
.backLeftSeatにposition: relative;を指定し、基準となるコンテナを作っています。 - 子要素
.withPositionにはposition: absolute;を指定し、さらにtransform: translateY(-50%)を組み合わせることで、親要素の中で上下方向の中央揃えを実現しています。 .rightAbsoluteはright: 0px;とtop: 80px;の指定により、画面右側に絶対配置されます。
実行結果
上記のコードをブラウザで表示すると、以下のような出力になります。
例2:relative・absolute・fixedの違いを比較する
続いて、3つの配置方法の挙動の違いを確認できるサンプルです。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*relative to parent d1*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">In HBase, tables are split into regions and are served by the region servers. Regions are vertically divided by column families into “Stores”. Stores are saved as files in HDFS. HBase has three major components: the client library, a master server, and region servers. Region servers can be added or removed as per requirement.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>
この例では、各positionの値が何を基準に配置されるかがよく分かります。
- #d1(relative) — 通常の文書フロー内にあり、基準コンテナとして機能します。
- #d2(absolute) —
bottom: 10px;のコメントにあるように、親要素#d1の下端を基準に配置されます。 - #d3(fixed) — コメントの通りビューポートを基準としており、ページをスクロールしても常に同じ位置に表示され続けます。
実行結果
上記のコードをブラウザで表示すると、以下のような出力になります。
まとめ
positionプロパティを使いこなすことで、中央揃えや画面端への固定表示など、通常のレイアウトでは難しい配置も柔軟に実現できます。特に「relativeな親要素 + absoluteな子要素」の組み合わせは、要素の整列やオーバーレイ表示で非常によく使われるテクニックなので、ぜひマスターしておきましょう。
-
CSSのz-indexプロパティを使って要素をレイヤー状に重ねる方法
CSSのz-indexプロパティを使用すると、開発者は複数の要素を互いに重ねて表示できます。z-indexには正の値も負の値も指定可能です。 z-indexの基本ルール 注意：重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 それでは、z-indexプロパティの具体的な使用例を見ていきましょう。 例1：背景画像とボックスシャドウの重ね合わせ 以下の例では、段落要素に対して背景画像・パディング・ボックスシャドウを設定し、要素がどのように重なって表示されるかを確認できます。 <!DOCTYPE html> <
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da