CSSには、positionという要素の位置を決めるタグがあります。
positionタグを使うことで、ユーザーが使いやすく、見やすいサイトができます。
しかし、初心者にはこのpositionタグの使い方でつまずく方が多くいます。
難しいと思われがちなpositionタグの使い方をこの記事では、プログラミング学習初心者に向けて、動画と図、サンプルコードを用いてわかりやすく説明していきます。
初心者の人でも、positionタグを使いこなすことで、レイアウトの崩れない素敵なサイトを作ることができるので、正しい使い方を学んでいきましょう！
CSSのpositionとは
まずはじめに、CSS上のpositionとは、どのようなことができるのか説明します。
positionをCSSで使うことで要素の位置を決めたり、要素の位置を固定することができます。
要素の位置指定をしっかり行うことがレイアウトの崩れないサイトを作ることになります。
また、要素を一定の位置に固定することが、ユーザーにとって使いやすいサイトになることもあります。
positionを使った位置指定の種類
positionを使って行える要素の位置指定の種類は全部で３つあります。
この３つの位置指定の方法は、positionを使って行われます。
１つずつサンプルコードと一緒に使い方を解説していきます。
CSSのpositionの使い方
要素を固定【fixed】
positionには、要素を固定できるfixedという値があります。
position: fixed;fixedには、「固定する」という意味があり、要素を一定の位置に固定させたい時に使います。
そのため、fixedを使うことでページを動かしてもその要素は同じ場所にあり続けます。
ここでは、position: fixed; が使われている例をDMM WEBCAMPのホームページを使って説明します。
サイトの上部分に注目してください。
DMM WEBCAMPと書かれているバーが常に上部に表示されているのが確認できますか？
このように、ページをスクロールさせても常に同じ場所に要素を固定させる時にposition: fixed; を使います。
この例の場合、ユーザーが知りたいであろう情報をすぐに表示できるよう、常に見やすい一番上に固定されており、ページを動かしても位置が変わらないという性質を活かしてユーザに使いやすいサイトにしています。
position: fixed; は、ホームページなどのメニュー部分を構成するhead部分に使われることが多いです。
fixedの仕組みはこのようになっています。
セレクタ{
position: fixed;
}これで画面をスクロールしても要素は画面から動くことはありません。
相対的な位置指定【relative】
positionには、相対的な位置を指定できるrelativeという値があります。
相対的な位置指定とは、ある場所を基準にして要素の配置をするということです。
CSSに書き込むコードは以下で、relativeという値の使い方には２種類あるので説明していきます。
position: relative;要素の位置を変更する
HTML上に要素を描き混むと、基本的には左上に配置されます。
しかし、position: relative; を使うことで、要素の位置を細かい数字を用いて自由に変えることができます。
position: relative; は以下のように書きます。
セレクタ {
position: relative;
top: 数値;
left: 数値;
}
セレクタには、position: relative; を使って配置させたい要素をいれましょう。
要素の基本の配置は左上になっているため、左上を基準にしてtopとleftの値で要素を配置する場所を数値で決めます。
position: relative; を使った例が以下です。
基準の左上からtopとleftの値を使って要素の配置をします。
セレクタ {
position: relative;
top: 10px;
left: 20px;
}左上から10px、左から20pxのところに要素が配置できました。
absoluteの親要素になる
もう１つのrelativeの使い方として、relativeで固定された要素は、absoluteの基準になることができます。
詳しくは以下の見出し内で説明します。
絶対的な位置指定【absolute】
absoluteという値をpositionで使うことで、絶対に置かれる要素の位置を指定することができます。
具体的には、relativeを使った要素を基準に配置でき、要素を重ねることもできます。
１つずつ説明していきます。
relativeの子要素になる
relativeの説明でも少し触れたように、absoluteはrelativeを基準にして要素の配置ができます。
子要素にはabsoluteが使われており、親要素にはrelativeを使って要素の位置が使われています。
子要素であるabsoluteの位置は、relativeの要素の左上を基準にtopとleftの値で配置ができます。
以下のサンプルコードで上記のような要素の配置が可能です。
親要素 {
position: relative;
}
子要素 {
position: absolute;
top: 10px;
left: 10px;
}要素を重ねられる
absoluteのもう１つの特徴として、要素同士を重ねることができます。
基本的にHTMLで要素は重ねることはできま線画、画像同士など要素を重ねたい場合などにはposition: absolute; を使いましょう。
まとめ
いかがでしたか？
positionには様々な配置の方法があり、プログラミング初心者には少し複雑な部分だと思います。
ここでは、positonについてわかりやすく解説しました。
基本的なpositionの使い方を知っているだけでも、要素の配置が自由になり、様々な表現が可能になります。
HTMLやCSSを使っていくには、とても大切なタグなので基本を抑え、レイアウトの整った綺麗なサイトを作りましょう１
2月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP
DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98％！短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！
「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。
無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。
