表示位置を変えたい！CSSでpositionの使い方【初心者向け】
初心者でも分かるようにCSSで書くpositionの使い方について解説。relative, absolute, fixedと混同しやすい値を詳しく説明しています。実際の表示位置がどうなるのか確認してみましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSで書くpositionの使い方について解説しています。
positionは複雑なCSSを書かなくてもよく使うので、初心者の方でも覚えておくと良いでしょう。最初は混同しやすいので、自分で表示位置を変えてみるコードを書いてみることを勧めます。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
ここではpositionプロパティの使い方を練習してみよう。
田島メンター！！positionは何に使うんですか～？
positionは要素の配置の基準位置を決めるプロパティだよ。普段何も設定していない場合に配置される場所を相対位置、逆に本来ある場所と関係なく画面内の好きなところに配置することを絶対位置というんだ。
自分の思い通りの場所に要素を配置をしたいときに必要になりそうですね。よろしくお願いします！
positionとは
positionは各要素の配置に関する基準を設定するプロパティです。その要素が本来ある位置を基準とする方法(相対位置)や、直接配置場所を設定して配置する方法(絶対位置)を選ぶことが出来ます。
positionの書き方
positionプロパティは以下のように記述します。
position: 値; 配置指定プロパティ(static以外の場合);
値の部分には以下の中からひとつを入力します。
static：配置方法を指定せず、場所も指定しません。(初期値)
relative：相対位置から配置を指定します。
absolute：絶対位置から配置を指定します。
fixed：絶対位置から配置を指定し、画面をスクロールしても固定されます。
相対位置では本来配置される場所を基準とし、そこから位置を決定します。絶対位置では親要素に指定されているpositionの値、それがない場合は画面の一番左上が基準位置となります。
初期値のstaticでは配置位置を指定するプロパティ(top,bottom,left,rightなど)は使用できません。
相対位置のrelativeで基準となる場所は、初期値であるstaticで配置される所になります。
positionの基本的な書き方になるよ。
初期値のstaticと、relativeはどう違うんですか？
staticとrelativeの違いは、その場所から更に位置を指定できるかどうかだね。staticではtopやbottomなどの位置指定ができず、relativeは指定ができるんだ。
なるほど、分かりました！
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
実際にpositionを書いてみよう
値：relativeの場合
positionの値にrelativeを入力した場合の例です。
(※cssとhtmlが同じディレクトリ内にあり、cssのファイル名が”sample.css”であるものとします)
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<img src=”photo1.png”>
<p class=”content1″>relativeの場合のテキスト位置</p>
</body>
</html>
css
p.content1 {position: relative; top: 0; }
画面ではこのように表示されます。画像の次の段落、元々テキストが配置される場所が基準となります。(相対位置)
値：absoluteの場合
positionの値にabsoluteを入力した場合の例です。
(※cssとhtmlが同じディレクトリ内にあり、cssのファイル名が”sample.css”であるものとします)
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<img src=”photo1.png”>
<p class=”content1″>absoluteの場合のテキスト位置</p>
</body>
</html>
css
p.content1 {position: absolute; top: 0; }
画面ではこのように表示されます。親要素がないため画面の一番左上が配置の基準となっています。(絶対位置)
値：fixedの場合
fixedを値に設定した場合はrelativeと同様に絶対位置として配置され、なおかつ画面をスクロールしてもその要素の場所は固定されます。
以上、CSSのpositionを実際に使いながら説明してきました。「relative」と「absolute」は最初のうちは理解が混同してしまったりしますが、自分で書いているうちに慣れるでしょう。
とてもよく利用するのでぜひ覚えておきましょう。
それぞれの値と、どのように基準位置が決まるかを見てみたよ。
fixedの場合は画面をスクロールしても要素がずっとついてくるんですね。何だか不思議な感じです。
fixedは常に表示させたいメニューバーなどにも使うことができるね。各値の特徴と表示位置をよく理解しておこう。
色々活用してみたいです。ありがとうございました！
TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
