2020年12月4日CSSのプロパティに、オブジェクトの位置を指定する「position」というものがあります。癖のある仕様となっておりますが、理解して操作できるようになるとデザイン制作の幅も広がり、制作スピードも上がってきますので、しっかりと学習しておきましょう。「relative」と「absolute」の違い「position:fixed;」まとめ「position」プロパティとは「position」プロパティはオブジェクトを配置する位置を決めるプロパティで、値には「static」「relative」「absolute」「fixed」の4種類を指定します。「position」プロパティの値選考で大事になるのは「基準点」になります。大まかに仕様の違いを表で記しておきます。ウィンドウまた、「position」プロパティを指定した際には、基準値に対する位置・移動距離の指定が必要になります。位置・移動距離は、「top」「left」「bottom」「right」プロパティにて指定します。各英単語の方向を基準に、反対方向に対しての移動距離を、数値pxや%にて指定します。「position」プロパティの値などに追加する形で記述するのではありませんので、ご注意ください。「position:static;」それでは、詳しく説明して参ります。「static」は日本語で「静的」という意味で、動きのない状態を指します。その意味合いの通り、「static」は「position」プロパティの初期値になりますので、変化をつけたい場合に利用する事はないでしょう。レスポンシブ仕様にて、スマホ表示時にはPC表示で有効の「position」を初期値に戻して解除したい場合などには有効に活用できるかと思います。「relative」とは、日本語で「相対的」という意味になります。相対的とは、何かと比較する形でありますので、基準値が必要になります。「relative」を使用するのに覚えておく大事な事は、「現状の位置」が基準点になるという事です。比較するのは「現状の位置」に対してです。relative;bottom:20px;">上へ20pxずらす</div></div>上へ20pxずらす実装例Afterでは、「position」プロパティを指定したうえで、「bottom」プロパティにて20px移動する、すなわち「bottom」とは逆の方向に20px移動させる事になりますので、現状の位置から上方向に20px食い込んで表示されています。「absolute」とは、日本語で「絶対的」という意味になります。「position」プロパティの場合の絶対的というニュアンスは、後に説明する「fixed」の方が意味合いが近いと思いますので、日本語での意味は忘れた方がいいかもしれません。「absolute」を理解するのに大事なのは、「親要素が基準点になる」という事です。「absolute」を使用した場合は、それを包む要素(親要素)に対して位置を指定する事になります。ひとつ前の要素タグが親要素の基準値になり、何も親要素がない場合は、全体を包むボディ要素が基準値になります。ボディ要素を意識して設計する場合は、基本的には後に説明する「fixed」を利用する事になりますので、「absolute」を使用する場合は親要素を意識しないとうまく操作できなくなります。「absolute」には必ず親要素が必要になるという事を覚えておきましょう。relative;」になります。「position:absolute;」ではありませんので、気をつけましょう。yellow;">上へ20pxずらす</div></div>上へ20pxずらす実装例Afterでは、「position」プロパティを指定したうえで、「top」プロパティにて-20px移動する、すなわち「top」とは逆の方向に-20px移動させる事になりますので、親要素(ピンクの背景)の左上の位置から上方向に20px食い込んで表示されています。あれ?なんでわざわざ-20pxというややこしい表現をしたのだろう?と思われた方は鋭いですね。この場合、「bottom」で指定してしまうと、親要素(ピンクの背景)の一番下からの移動になるので、移動距離も長くなり、わかりずらかったのでそうしました。「relative」と「absolute」の違い上記で説明している通り、「relative」は「現状の位置からの移動」、「absolute」は「親要素の位置からの移動」になり、以下のような差が出てきますので、きちんと挙動を理解した上で使っていく必要があります。yellow;">A</div></div>A「R」と書かれているものが「relative」指定、「A」と書かれているものが「absolute」指定のものになります。移動距離の指定値は変わってきますが、「relative」でも「absolute」でも同様の演出をする事が可能なのがわかります。このように指定する事で、オブジェクトの左肩にバッジのようなものを配置する事ができますね。実は問題があります!ウェブサイトにはレスポンシブ仕様というものがありますので、デバイスに応じてどんどん横幅の大きさ、時には縦の大きさすら変化していく事があります。それでは、試しに上で実装した「cyan」の横幅をレスポンスシブが効いているとして、80%→50%→30%と縮めていってみます。yellow;">A</div></div>AAA以上の例を見ればわかるように、レスポンシブ仕様の事を考えた時に、「absolute」の場合は基準点が変わらず、「relative」の場合は位置がずれて使いものにならない場合があります。デザインによってはなんの影響もなく実装できる事もあります。「relative」と「absolute」の基準点がどこであるのかをきちんと把握した上で使い分けていくようにしましょう。特徴2また、「relative」は「元の領域を確保したまま移動させる」、「absolute」は「元の領域を確保せず移動させる」という特徴もあります。以下は、今回の基準となる設定です。黄色のブロックを上で説明したように、バッジ風にアレンジします。cyan"></div></div>Aまず、今回は重なりの都合があり、今までの状態ではうまく実装できませんでしたので、「z-index」プロパティを追加使用しています。「position」プロパティに必須のものではありません。上の例を見て違いがわかりましたでしょうか?どちらの書き方でも同じように見せる事ができています。縦に並ぶオブジェクトですので、レスポンシブの影響も少ないと言えます。「relative」は「元の領域を確保したまま移動させる」との事でしたので、黄色のオブジェクトが移動しても、はっきりと背景のピンク色が見えますので、元の領域がある前提で、黄色ブロックだけが移動しているのがわかります。対して「absolute」は、「元の領域を確保せず移動させる」という事でしたので、背景のピンク色は完全に消滅してシアンの色が黄色ブロックに食い込む形になっております。これに関してはレスポンシブの「特徴1」の問題のように、どちらが良いという優劣はありません。時と場合により、自分が実装したい形になってる方を選べば良いでしょう。こちらの特徴もきちんと把握しておくようにしましょう。「fixed」は、日本語で「固定した」という意味になります。特定の場所に「ずっと固定し、表示し続ける」指示になります。「fixed」の基準位置は、最初から「ウィンドウ画面(見えているブラウザ画面のまま)」と決まっておりますので、基本的には基準となる親要素不要です。以下のようなコードを記載すると、上部にメニューバーなどをずっと固定しておくような事が可能になります。fixed;top:0px;">fixed</div>今回の場合は、「fixed」という文字が上部に固定される事になるのですが、表示するとサイトデザインがおかしくなってしまいますので、実装例での紹介は控えます。まとめいかがでしたでしょうか?サイトにリッチな演出をするのに役立つ「position」プロパティについて解説してきました。「fixed」も利用する事は多いですが、「relative」と「absolute」の違いについてはきちんと把握しておかないと思ったように実装できず困る事になりますので、その点各特徴をしっかりと把握するようにしておきましょう!ロゴデザイン作成方法の教科書。Cloud]2ロゴデザイン作成方法の教科書。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。スキルアップ講座ロゴデザイン作成方法の教科書。error]に遭遇した時の対処とデータ復元方法2021/4/12YouTubeTwitter運営者[通称]とも、[職業]グラフィック・Webデザイナー、[経歴]28歳の頃からデザイン業界に入り、6.5年間印刷会社のデザイナーとして働き、2018年5月より独立し、印刷・Web制作業を主体に営業を行っております。