Webmediaデザイン・コーディングセキュリティバックエンドCMSプロデュース・ディレクションWeb便利ツールpositionプロパティの正しい使用方法を図解で詳しく紹介!デザイン・コーディングpositionプロパティの正しい使用方法を図解で詳しく紹介!2019/12/05ShareTweetCSSのpositionプロパティは要素の位置を移動できるということは知っていても、使いこなせていない人も多いのではないでしょうか。positionプロパティを理解すれば、Webサイトを作る上で重要な要素の移動が簡単にできるようになります。positionプロパティの機能を正しく活用して、分かりやすいWebサイト制作を目指しましょう。今回は、positionプロパティの値の種類や特徴、それぞれの注意点などを紹介します。古いWebサイトにさようなら。次世代技術と最新デザインでユーザーを獲得。https://www.itra.co.jp/index.htmlデザインからシステムやセキュリティまで、ワンストップでサポートできるからこそ、官公庁や大企業から選ばれ続けてきました。見た目の良いWebサイトを作るだけではなく、最先端の技術力とデザイン力を持って、クライアントの課題を解決できるWebサイトをご提案します。子要素にabsoluteを指定した際の動き方まとめpositionプロパティの基本positionプロパティとは?positionプロパティは、要素の位置を決める方法を指定することができるプロパティです。relativeやabsolute、fixedなどの値から位置を動かす基準を選択して、要素の位置を変えたり、要素を他の要素の上に重ねたりすることができます。動かす要素の位置は、top、right、bottom、leftプロパティで値を指定します。top、right、bottom、leftpositionプロパティで要素をどのくらいの位置に動かすのかを指定するために、positionプロパティとセットで使用されるのがtop、right、bottom、leftです。以下のように基準となる点からどれくらい移動するのかは、以下のように位置を指定します。上から100px、左から300px移動するには、以下のように記述します。300px;}また、下から100px、右から200px移動するには、以下のように記述します。100px;}positionの値の種類それではここから、positionプロパティの値としてよく使われる3つの値の動き方を詳しく紹介していきます。relativerelativeとはrelativeの役割は基本的に現在の位置を基準として、指定された数値の分要素を移動させる際に使用されます。実際にrelativeはどのような動きをするのか、以下の図を例に説明します。黒い枠がウィンドウの幅として、box1とbox2をそれぞれ作りました。今回は簡略化するために、大きさや余白に関するCSSの記述は省いています。200px;}上記のように、box2の現在の位置の端を基準として、上から100px、左から200px移動してbox1と重ねた場合、下の図のようになります。このように、要素にrelativeをかけることで、要素の現在の位置を基準として移動させることができます。absoluteabsoluteとはabsoluteは、基本的にウィンドウを基準として指定された数値の分だけ移動するために使用されます。親要素にrelativeやfixedなどがかかっている場合は、親要素を基準としてabsoluteをかけた子要素を移動させることができます。実際にabsoluteはどのような動きをするのか、以下の図を例に説明します。200px;}上記のようにbox2を、ウィンドウの端を起点として、上から100px、左から200px移動してbox1と重ねた場合、下の図のようになります。このように、要素にabsoluteをかけると、ウィンドウを基準として移動します。positionプロパティの値をrelativeにするか、absoluteにするかで要素の移動の起点が変わります。fixedfixedfixedは、要素を指定の位置に固定させるために使用されます。0px」と記述すると最上部に固定されます。fixedの使用例fixedを指定することで、ウィンドウ左端を基準とした上下左右に要素を移動し、固定させることができます。スクロールしても、fixedを指定した要素が消えることはなく、常に画面内の指定した位置に残り続けます。今回例として挙げるグローバルナビゲーションに使用するだけでなく、「トップへ戻る」ボタンの位置設定にも使用されます。positionプロパティのfixedを指定している例を、WebMediaのトップページを使って説明します。上の画像はWebMediaのトップページ画面です。ページトップには、案内リンクと呼ばれるグローバルナビゲーションが設置されています。このグローバルナビゲーション部分にも、fixedが指定されています。このように、画面の下にスクロールしても、ページトップにはグローバルナビゲーションが残っています。【コラム】z-indexプロパティで重なりの順序を指定スクロールした際に、fixedを指定した要素の上に他の要素が重なってしまうことがあります。これは、各要素の重なりの順序を指定する「z-indexプロパティ」を使用することで解決できます。z-indexプロパティは、指定したい要素の重なりの順序を整数で指定します。0が基準で、値が大きくなればなるほど、他の要素より上の最前面にすることができます。子要素にabsoluteを指定した際の動き方ここまで、relative、absolute、fixedの基本的な動き方を説明してきました。このままだと起点が「ウィンドウ」か「現在の位置」しかないため、位置を決めるプロパティの値が大きくなってしまう可能性があり、コード的に言えば少し強引なコーディングになってしまいます。起点を移動させたい場所に近ければ近いほど、プロパティの値も小さくなり、分かりやすいコーディングになります。そこで今回は移動させたい要素を、その親要素を起点として位置を移動させる方法をお伝えします。方法を簡潔にまとめると、移動させたい要素にpositionのabsoluteを、起点にしたい親要素に対しpositionのrelative、absolute、fixedのいずれかをかけることで親要素を起点にした要素の移動が可能になります。それでは、以下の図を例に紹介していきます。移動させたい要素にpositionのabsoluteをかけ、親要素にはpositionプロパティを使用していない場合、移動させたい要素はウィンドウを基準として移動します。こちらは最初に出てきたabsoluteの基本的な動き方でしたね。200px;}このように子要素を、上から100px、左から200px移動する場合、子要素の移動の基準となるのは、ウィンドウの左端です。親要素にはpositionプロパティが何もついていないので、子要素の移動の基準にはなりません。親要素が基準になる場合では、親要素にpositionプロパティのrelativeを指定してみましょう。するとpositionのabsoluteをかけた移動させたい要素は、relativeをかけた親要素を起点として、移動させることができます。200px;}このように子要素を、親要素を起点として上から100px、左から200px移動させることができます。親要素の中の特定の位置に子要素を重ねたいのに移動の基準がウィンドウの左端になってしまう、という経験をしたことのある方もいるのではないでしょうか。子要素にabsoluteを指定する際は、親要素にpositionプロパティが指定されているかどうかの確認を忘れないようにしてください。まとめ今回は、positionプロパティの値の種類や使用方法について紹介しました。positionプロパティを活用すれば、各要素を自由に重ねたり移動したりすることができます。ある画像の上に説明文を加える際などに活用してみてください。floatやflexプロパティで指定できる部分はそれらを使用し、positionプロパティを多用しすぎないようにしましょう。それぞれにプロパティの長所と短所を理解し、場合に合わせて適切なプロパティが選べるようになれば、Webサイトを制作する上で使える技術の幅が広がるでしょう。WebMediaでは、今回紹介したpositionプロパティのほかにも、HTML・CSSの基本知識やWebサイトを作る上で欠かせない情報をお届けしています。他の記事もご覧ください。Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか?WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。人気の記事1AdobeのFlash終了に向けた正しい撤収方法と代替案2GoogleのURL短縮サービスが3月で終了。カスタムサーチ」が3月末で終了。