CSSのposition:absolute;とは?要素を思いのままに配置する方法

こんにちは!ライターのナナミです。CSS書いてますかー!

WEBサイトのデザインは自由自在、でも単純に実装できないものとかもありますよね。

例えば画像の上に「NEW」ってアイコンを出したり…
他の要素と重ねて配置してみたり…

今回は、そんなレイアウトを実現できるposition:absolute;についてまとめました!

この記事では

  • position:absolute;とは何か
  • position:absolute;を使ったレイアウト例
  • 使う場合の注意点

を紹介していきます。

position:absolute;を理解すれば、WEBサイトのレイアウトは自由自在! しっかり覚えていきましょう。

position:absolute;とは

positionは、指定した要素の配置方法を決められるプロパティです。

その中で指定できる値はいくつかあり、その中の一つがabsoluteです。absoluteは絶対配置を指定する値です。

絶対配置とは、数学の絶対値と同じです。今いる場所にかかわらず、原点からどれだけ離れた距離に配置されているのかを示します。つまり起点からどれだけ離れているかを指定できるようになります。

absolute1

デフォルトの起点はページ全体です。つまり、そのページの一番上から一番下、一番左から一番右までを基準にします。

absolute2

ここからどれだけ離れているかを指定することで、位置を決めることができます。ボックスを並べるよりも自由に配置できるので、レイアウトの幅が広がるのは明白ですね。

absoluteの指定方法

指定方法はとても簡単、自由に配置したい要素にposition:absolute;を指定するだけです。

absolute3

HTML

CSS

位置の指定方法

position:absolute;をつけただけでは、具体的な位置の指定はできていません。

位置の指定は、topbottomleftrightで行ないます。

top要素が起点の上からどれだけ離れているかを示します
bottom要素が起点の下からどれだけ離れているかを示します
left要素が起点の左からどれだけ離れているかを示します
right要素が起点の右からどれだけ離れているかを示します

例えば、画面の右上から50px離して配置する場合は…

absolute4

HTML

CSS

このように指定します。

bottomやleftも同じように指定することで、自由な位置に要素を配置できます。

各プロパティのリファレンスはこちら
left:http://www.htmq.com/style/left.shtml
right:http://www.htmq.com/style/right.shtml
top:http://www.htmq.com/style/top.shtml
bottom:http://www.htmq.com/style/bottom.shtml

他のpositionの値

positionはabsoluteの他に、下記のような指定をすることができます。

relative相対配置になる値です。
現在配置される位置からどれだけ離れているかを指定して配置します。
つまり、本来配置される場所を起点として配置することができるようになります。
fixed画面の絶対配置になる値です。
ページではなく画面に表示されている領域を起点として配置できるようになります。
staticpositionを指定していない時と同じ、普通に配置するようになります

positionのリファレンスはこちら
http://www.htmq.com/style/position.shtml

absoluteの起点を指定する

absoluteの起点は、何も指定していなければページ全体になります。しかし、親要素に指定を加えることで、親要素を起点にすることができます。

親要素にrelativeかfixedをつけよう

absoluteを指定する要素の親要素にrelativeかfixedをつけることで、親要素を起点に配置することができます。

absolute6

HTML

CSS

サムネイルにアイコンをつけたりするときは、こちらの方がわかりやすいですね。

relativeとabsoluteはセットで使おう

absoluteはレイアウトを自由にできますが、その分レイアウトの崩れを招きやすい諸刃のプロパティです。特にデフォルトではページ全体を起点にしてるので、パソコンの画面サイズによってはとんでもない場所に配置されてしまう危険もあります。

absolute5

しかし、起点を決めておけば怖がることはありません。使う時は親要素にrelativeをつけるなど、起点をきちんと指定するようにしましょう。

position:absolute;を使ったレイアウト例

absoluteを使えるようになると、本当に色々なレイアウトが実現できるようになります。例をいくつか紹介しますので、参考にしてみてください。

画像の上にキャプションをのせる

ex1

HTML

CSS

画像部分にrelativeをつけて起点にし、配置しました。画像の下に文字があるよりもスッキリおしゃれな感じになりますね。

上下左右中央揃えでロゴを真ん中に配置

ex2

HTML

CSS

メインビジュアルとかで、背景を指定しつつロゴを真ん中に配置したい時ってありますよね。

そんな時はこの方法、いい感じに真ん中に配置されていますね。

このように位置調整のプロパティを0で指定し、margin: auto;を指定すると、親要素の中央に配置されます。この時、absoluteにする要素には幅と高さを指定する必要があるので、注意してくださいね。

枠をデザインする

ex3

HTML

CSS

ちょっとおしゃれな枠なんかも、absoluteを使うといい感じにできちゃいます。

詳細はぜひこちらの記事をご覧ください。

【超簡単】もう悩まない!CSSのみで二重線をつける方法
更新日 : 2019年7月30日

position:absolute;を使う時の注意点

とても便利なabsoluteですが、使い方にはちょっとコツがいります。ポイントを抑えておけば難しいことではないので、しっかり理解しておきましょう。

起点がどこになるのかを意識しよう

absoluteを使う上で一番気をつけなければならないのは、どこを起点にどのくらいの位置に配置しているのかです。

ここを意識していないと、要素があらぬ所に配置されてしまったり、WEBサイトの崩れの原因になってしまったりしてしまいます。

  • この親要素にrelativeをつけているからここが起点だ
  • 親要素にはrelativeが付いていない、でも先祖要素にrelativeが付いているからここが起点か

というように、どこが起点となっているかは意識して実装するようにしましょう。

「使うべきところなのか」を考えよう

absoluteは自由に配置ができて確かに便利です。でもそのレイアウト、本当にabsoluteを使うべきところでしょうか?

例えば、PC版では写真、文字の順で並んでいたのを、スマホ版では上下を入れ替えたい場合。位置の調整ならば、確かにabsoluteを使って実装することは可能です。

attention1

しかしこの実装では、スマホの画面幅が小さくなった時…

attention2

文字と写真が被ってしまいましたね。

このように、便利だからといってabsoluteを多用してしまうと、レイアウトが崩れる大きな原因となってしまいます。プロパティは適材適所、absoluteはabsoluteが向いているレイアウトの時に使うようにしましょう。

CSSだけでは高条件の案件獲得が難しい

画像:Shutterstock

WEBサイトの見栄えを整えるCSSですが、CSSだけでは好条件の案件を獲得することが難しいのが現状です。

CSSと合わせてJavaScriptやPHPといったプログラミング言語も学ぶことで、更にできる事が広がりあなたの市場価値を高めることができます。

CSSだけの案件はまだ少ない

もちろんCSSを学ぶことで出来ることは広がりますが、仕事獲得という面で考えるとCSSだけでは厳しい面もあります。なぜなら案件自体は多いのですが、3〜5万ほどの低単価帯が多いのです。

しかし、先ほどお伝えしたJavaScriptPHPなども扱えるとなると、仕事獲得のしやすさや単価もグッと上がります。

だからこそ今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。

でもどの言語を学べばいいんだろう……。

いざプログラミング言語を選ぶとなるとこのような悩みが出てきますよね。そこで作りたいものから必要なプログラミング言語や簡易的な学習プランが分かるプログラミング診断アプリを用意しました。

あなたの作りたいものにあった学習プランと必要なスキルが分かります。ぜひご利用ください。

挫折せずにスキルを身につけたいなら

CSSに合わせて他のプログラミング言語を身に付けることをオススメしましたが、

ここから他にも学ぶのは大変だし挫折しそう……。

と思ってしまう方もいることでしょう。確かにCSSの習得だけでも学ぶべきことは多く大変です。そこに加えて他の言語を身に付けると考えると、難しく感じてしまいますよね。

そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?

弊社では、あなたの目的に合わせて専用のオーダーメイドカリキュラムを作成し、現役エンジニアの講師が専属であなたの学習をサポートします。そのため、つまづくことなく学習をすすめることができますよ。

いきなり入会する必要はありません。まずは無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。

下記ボタンより予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。

無料体験を予約する

まとめ

いかがでしたか?

ちょっとクセのある指定方法ですが、使いこなせるとWEBサイトのクオリティがぐんと上がります。ぜひ色々試して、素敵なサイトを作ってください!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説