【🔰初心者向け】CSS入門：positionを総まとめ！absoluteやfixedの使い方は？

ウェブページのレイアウトを制御する上で、positionプロパティは非常に重要な役割を果たします。このプロパティを使うことで、要素の配置を自由にコントロールすることができます。この記事では、初心者向けにpositionの基本的な使い方から、absoluteやfixedなどの応用テクニックまでを解説します。

目次 open close

1. positionプロパティとは？
2. relativeの使い方
3. absoluteの使い方
4. fixedの使い方
5. stickyの使い方
6. まとめ

1. positionプロパティとは？

positionプロパティは、要素の位置を指定するために使います。positionには、static、relative、absolute、fixed、stickyの5つの値があります。

主要な`position`の値

static: デフォルトの位置に配置されます。特に指定しない場合、この値が適用されます。
relative: 元の位置を基準に移動します。要素の配置は通常のフローに従いますが、top、right、bottom、leftで相対的に移動させることができます。
absolute: 親要素を基準に、要素を自由に配置できます。positionが設定されている最も近い親要素が基準になります。
fixed: ビューポート（画面）を基準に、要素を固定します。スクロールしても位置が変わりません。
sticky: 要素がスクロール位置に応じて固定され、一定の位置までスクロールすると動かなくなります。

2. relativeの使い方

relativeは、要素を通常の位置から相対的に移動させることができるプロパティです。

使用例

div {
    position: relative;
    top: 20px;
    left: 10px;
}

この例では、div要素が通常の位置から下に20ピクセル、左に10ピクセル移動します。

3. absoluteの使い方

absoluteは、指定した位置に要素を絶対的に配置します。基準となるのは、positionプロパティが設定されている最も近い親要素です。

使用例

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

この例では、div要素が基準となる親要素の左上から、50ピクセル下、100ピクセル右に配置されます。

4. fixedの使い方

fixedは、ビューポート（画面）に対して要素を固定するプロパティです。スクロールしても、要素の位置は変わりません。

使用例

div {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100px;
    background-color: yellow;
}

この例では、div要素が画面の右上に固定され、スクロールしてもその位置に留まります。

5. stickyの使い方

stickyは、要素がスクロールに応じて動き、一定の位置で固定されるプロパティです。ある位置に達すると、fixedのように動かなくなります。

使用例

div {
    position: sticky;
    top: 0;
    background-color: lightblue;
}

この例では、div要素がスクロールに従って動きますが、スクロール位置が0ピクセルになると画面の上部に固定されます。

6. まとめ

CSSのpositionプロパティを使いこなすことで、ウェブページのレイアウトを柔軟にコントロールできます。relative、absolute、fixed、stickyを適切に使い分けることで、デザインの自由度が大幅に向上します。基本をしっかり押さえて、実際のデザインに活かしてみてください。

Webサイトを作れるようになりたいけど、どこから始めていいかわからない…
そんなあなたにピッタリの1冊がこちら！

『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』

今回は、初心者から中級者まで幅広く支持されている本書の魅力を、実際のレビューを交えてご紹介します！

この本1冊で学べること

『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』は、Web制作に必要な知識を体系的に学べる入門書です。

HTMLとCSSの基本がゼロからわかる！

・タグの意味や使い方
・スタイルシートの基本構文
・テキストや画像のレイアウト方法など

手を動かして覚える構成

サンプルコードのダウンロードも可能！
実際にコードを打ち込んで、体感しながら学習できます。

対象読者はこんな人！

Web制作を始めたいけど何から手を付ければいいか分からない方
HTML・CSSを基礎からじっくり学びたい方
デザイン性の高いWebサイトを作りたい方
実務で役立つ最新技術まで身につけたい方

実際のレビューも高評価！

「昔ちょっと触ったことがあるけど、ちゃんと学び直したい人にもおすすめ」
「入門書としては完成度が高く、実用性も十分」
「手を動かしながら学べるから理解が深まる」

読みやすく、実践的な構成で、**「読むだけじゃなく、作って学ぶ」**が叶う1冊です。

この本のここがスゴイ！

入門書なのに内容が薄くない！ → JavaScriptの基本や便利なプラグイン紹介まで
デザイン面のセンスも抜群！ → 見やすく、レイアウトの勉強にもなる
「読む → 実践 → 定着」の流れが自然にできる構成

Webデザイン学習をこれから始めるならこの1冊！

Web制作のスキルは、今や副業・転職・フリーランスへの第一歩としても大注目！
『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』は、確実なスタートを切るための最強バイブルです。

まとめ

項目	内容
タイトル	1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
対象	初心者〜中級者向け
特徴	HTML・CSSの基礎〜最新技術まで網羅
評価	実践的・デザイン性も高い・再学習にも最適

これからWebデザインを始めたいあなたに、心からおすすめできる1冊です。