- 公開日: 2020年10月3日
【CSS】positionを徹底解説!簡単Webレイアウト入門
この記事では、要素を好きな位置に固定・移動するプロパティ”position”について解説しています。
- 「positionってどんなときに使うの?」
- 「positionを使ったWebレイアウトを知りたい」
positionは使い勝手がとても良く、Webサイト制作には非常に重宝するでしょう。
今回の記事では、大きく分けて以下3つをご紹介します。
- positionの特徴と代表的な使い方4選
- top・bottom・left・rightの使い方
- positionを使った上級テクニック2選
実際にコーディングしたり数値をいじりながら、視覚的に学んでみてくださいね!
positionができること
positionはカンタンに言うと、要素を好きな位置に固定するプロパティです。
たとえば以下のように、スクロールしても上の部分が変わらないWebサイトを見たことがありませんか?
ヘッダー
セクション
セクション
フッター
※上下にスクロールできます
ブラウザ画面の一番上が基準位置となり、要素(=ヘッダー)がピッタリ固定されていますね。
記事後半では、好きな位置を基準に設定する方法もご紹介するので、ぜひWebレイアウトの参考にしてください!
【位置を指定】top・bottom・left・right
top・bottom・left・rightは、要素を基準の位置からどれくらい動かすか指定するプロパティで、positionとセットで使われることがほとんどです。
セレクタ {
top(bottom,left,right): 値(◯px,◯%,◯em);
}
[例]
div {
top: 10px;
left: -10px;
}
top・bottom・left・rightのポイントは以下4つです。
- top 基準位置からどれくらい下に動かすか
- bottom 基準位置からどれくらい上に動かすか
- left 基準位置からどれくらい右に動かすか
- right 基準位置からどれくらい左に動かすか
また、値をマイナスで指定すると動かす方向が逆転します。
- top(-10px) 基準位置より上に10px動く
- left(-30px) 基準位置より左に30px動く
ここでは「とりあえず基準位置から動かせるんだなー」と理解できていればOKです!
positionの特徴&使い方4選
ここからはpositionの特徴と具体的な使い方として、以下4つをご紹介します!
- static
- relative
- absolute
- fixed
一度で理解できなくても全然OK!
何度かコードを実行して視覚的に覚えるのが一番近道なので、あせらず取り組んでいきましょう!
1.【デフォルト】static
staticは、デフォルトで設定されているpositionの初期値です。
セレクタ {
position: static;
}
staticの特徴&使い方は以下4つです。
- staticと書かなくても、もとから要素はstaticになってる
- 要素は通常の位置通り
- topやleftなどを指定できない
- z-index(=要素の重なる順番を決めるプロパティ)を指定できない
staticはデフォルトなので、特別な理由がなければ書くことはないでしょう。
ただし、topやleft、z-indexを指定しても反応がないときは、static(=デフォルト)のままになっているケースが多いので気をつけてください。
2.【相対配置】relative
relativeは、要素が本来配置されるべき位置がそのまま基準となります。
セレクタ {
position: relative;
}
[例]
div {
position: relative;
top: 100px;
left: 100px;
}
relativeの特徴&使い方は以下4つです。
- topやleftなどが指定できる
- z-indexが指定できる
- 基準位置は”指定した要素が本来配置される場所”
- absoluteに対する基準位置になれる(※後ほど解説します)
relativeだけだと反応がなく、staticとの違いが分かりづらいですが、topやleftをセットで指定すると使い方が見えてくるはずです。
relativeを使うときは、”要素が自分自身を基準にする”と考えれば、感覚が掴みやすいでしょう!
■使用例
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
border-radius: 0.5em;
height: 150px;
width: 150px;
position: relative;
top: 50px;
left: 120px;
}
height: 200px;
border: dashed 3px #96c2fe;
background: #f4f4f4;
}
div
section
3.【絶対配置】absolute
absoluteは、relativeが指定されている”親要素”を基準にして、自分の位置を決定します。
セレクタ {
position: absolute;
}
[例]
(親)div {
position: relative;
}
(子)div {
position: absolute;
top: 10px;
left: 10px;
}
absoluteの特徴&使い方は以下3つです。
- 親要素(=基準位置)にrelativeを指定
- 子要素(=動かしたい要素)にabsoluteを指定
- 子要素にtopやleftなどを指定
absoluteの注意点ですが、親要素にrelativeを指定しなくても、見た目上問題なく動作することがあります。
ただ、思わぬ動きやレイアウト崩れに繋がりやすいので、”relativeとabsoluteはセットで使う”と覚えておいてください。
■使用例
border: 1px solid black;
border-radius: 0.5em;
height: 150px;
width: 150px;
position: relative;
}
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
width: 100%;
height: 100%;
position: absolute;
top: 50px;
left: 50px;
}
子要素
4.【ブラウザに固定】fixed
fixedはブラウザ画面を基準位置にして、要素を固定するときに使います。
セレクタ {
position: fixed;
}
[例]
div {
height: 80px;
position: fixed;
top: 0;
}
fixedの特徴&使い方は以下4つです。
- ブラウザ画面全体が基準
- スクロールしても同じ位置にあり続ける
- topやleftなどを指定できる
- z-indexを指定できる
記事冒頭で紹介したヘッダーもfixedで固定していますが、このように上下左右のいずれかに固定したいときは、”top:0”、"left:0"のように書きます。
■使用例
height: 150px;
width: 150px;
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
border-radius: 0.5em;
position: fixed;
top: 50px;
left: 130px;
}
height: 200px;
background: #f4f4f4;
border: dashed 3px #96c2fe;
}
fixed
section
section
※上下にスクロールできます
positionを使った上級テクニック2選
ここからは、positionを使った実践的なコーディングを2つご紹介します!
1.ヘッダーの固定とレイアウト
記事冒頭で紹介したヘッダー固定を、あらためて詳しく解説します!
ヘッダーはfixedを使って固定するのが一般的ですが、うまく効かなかったりレイアウトが崩れるときがあります。
そんなときは、以下をチェックしてみてください。
- ヘッダーの高さ(=height)の分だけ、ページ全体のレイアウトが上にズレるときがある
- 上記のようにレイアウトがズレたら、bodyかそれ以降の要素にmargin-topを指定
- fixedを指定した要素が横いっぱいに広がらないときは、width: 100%を指定
ただし、inline要素にはwidthが効かないので注意してください。
■使用例
<img src="search.png">
<a href="#">ログイン</a>
</header>
<img src="hello.png">
</section>
height: 80px;
width: 100%;
background: rgb(72,72,72);
position: fixed;
top: 0;
z-index: 10;
}
margin-left: 40px;
width: 80px;
height: 80px;
}
float: right;
margin-right: 40px;
color: white;
line-height: 80px;
}
width: 80%;
height: 500px;
margin: 0 auto;
}
width: 100%;
height: 100%;
}
height: 50px;
background: rgb(72,72,72);
color: white;
text-align: center;
}
要素ごとに重要度の高いプロパティをピックアップしたので、1つずつみていきましょう!
header
- height: 80px 高さ80px
- width: 100% 横幅を画面幅いっぱいに広げる
- fixed、top: 0 ブラウザ画面の上部に固定
- z-index ヘッダーの重なり順を指定
- float: right 要素を右寄せ
- line-height: 80px(=親要素の高さ) 文字の上下中央揃え
section
- margin: 0 auto 要素を中央揃え(※widthとセットで指定しないと効かない)
- width: 80% 横幅を親要素(=今回はbody)に対して80%で設定
footer
- height 高さ50px
- text-align: center 文字を中央揃え
上の例は”聖杯レイアウト”と呼ばれ、Webページではよく見られる定番のカタチなので、ぜひ覚えておいてください。
2.要素にラベルを貼る
擬似クラス”:before”を使うと、要素の直前に擬似的な要素を追加できます。
セレクタ:before {
content:"";
position: absolute;
}
[例]
div {
position: relative;
}
div:before {
content:"ラベル";
position: absolute;
top: -10px;
}
:beforeの特徴&使い方は以下4つです。
- content内の""には、挿入したい文字や記号を入れる
- content内の""は空でも良い
- セレクタにrelative、セレクタ:beforeにabsoluteを指定する
- :beforeと::beforeは同じ意味だが、::beforeにはまだ未対応のブラウザもあるので注意
■使用例
height: 150px;
width: 150px;
position: relative;
border: 1px solid black;
border-radius: 0.5em;
}
position: absolute;
content: "ラベル";
background: skyblue;
border-radius: 0.5em 0 0 0;
}
:beforeのborder-radiusは、色がはみ出さないよう左上だけ0.5em掛けて丸めています。
また、ラベルを好きな位置に動かしたいときは、:beforeにtopやleftなどを指定してみてください。
\一流デザイナーのスキルが身に付く/
まとめ
この記事では、以下を中心にpositionを紹介しました。
- positionの特徴と代表的な使い方4選
- top・bottom・left・rightの使い方
- positionを使った上級テクニック2選
positionを効果的に使えれば、Webサイト制作の基礎から応用まで、幅広く対応できるようになります。
コピペをどんどん活用しながら、焦らずじっくり取り組んでみてください!
- この記事を書いた人
- 佐藤恭平
人気記事
- 【2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス
- 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。受講生インタビュー
- 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】講師インタビュー
- 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+αPythonプログラミング書籍・参考書
- 【PHP入門徹底ガイド】初心者のための学習ロードマップPHPプログラミング入門
- コロナに負けるな!プログラミング&YouTubeで頑張る人が作るべきアプリPythonHTMLCSSお役立ち情報アプリ学習入門
- 【Twitter×Python】自分専用のエゴサーチボットを作る方法Python
- Webデザインから見たSEOWebデザイン入門Webデザインお役立ち情報
- 未経験からのWebデザイナー転職を有利にする資格4選Webデザインお役立ち情報転職