絶対配置を使ってみたけど上手くいかない…
コツを掴めばきっと出来る！
Studioで装飾パーツを好きな場所に配置したくて「絶対位置」を使ってみたものの、思った場所に置けなかったり、パソコンでは綺麗に見えていたのにスマートフォンで見ると位置がずれていた、なんて経験はありませんか。
絶対位置は自由なデザインをする上で欠かせない機能ですが、その自由さが使うのを難しくしている設定でもあります。
本記事では、Studioの絶対位置の使い方と思い通りに配置するためのコツを解説します。
絶対位置は流れの外に出る配置
まず、絶対位置がどんな配置なのかを、あらためて押さえておきましょう。
Studioでは何も設定しなければ他の要素と一緒に、上から下へ、左から右へ、といったように自然な流れで配置される相対位置になっています。
これに対して絶対位置は、要素をその流れから外れて、自由な場所に置ける配置です。
整列のルールを無視して任意の場所に基準からの距離を指定して配置できるので、装飾パーツなどの自由な表現ができます。
流れから外れる、というのが重要で、流れの外にあるからこそ自由、だけどレスポンシブでの扱いに注意が必要という話になってきます。
同種の「固定」という設定もあり、こちらはスクロールしても画面に留まり続ける配置なのですが、今回はそちらは扱わず「絶対位置」に絞って解説していきます。
両者の違いや配置については、別の記事で詳しく解説しているので、そちらもぜひご覧ください。
思った場所に置けない原因は基準
絶対位置が上手くいかない、思った場所に置けないといった悩みのほとんどは、「何を基準に配置しているか」という点に原因があります。
絶対位置に設定した要素は一番近くにある親ボックスを基準にして位置が決まります。
ところが、基準になる親をきちんと用意していないと、要素は思わぬ場所を基準にしてしまい「なぜこんなところに？」という配置になってしまうわけです。
なので、絶対位置を設定するときは親と子のセットで考えるようにしましょう。
親を基準にして、上から10px、右から15pxという具合に、考え方の土台ができることで上手くいく様になると思います。
逆に、絶対位置が上手くいかず変な場所に配置される時は「何を基準に配置しているか」を考えると原因を特定することが出来るようになります。
レスポンシブで位置がズレるのはなぜ？
絶対位置で自分の理想の位置に置いたとしても、PCからスマホなど画面サイズが変わると位置がズレてしまうという壁にぶつかってしまった人は多いと思います。
これも基準が原因で、「左から30px」というように絶対位置で指定した数値で位置を決めるとその要素はPCでもスマホでも「左から30px」の位置に居続けます。
一方で親の幅が％で指定されていると、画面幅に合わせて伸縮するので、基準となる親要素が縮んだのに子要素だけ元の位置に取り残されて、結果的にズレるというわけです。
この問題の対策は基準となる方向をキチンと選んでおくことです。
右上に配置したいパーツなら「右と上」、左下に配置したいパーツなら「左と下」をキチンと選ぶ。単純な方法ですが、これを意識しておけば画像のサイズが変わっても角に張り付いてくれるようになります。
絶対位置だからできるデザイン例
最後に、実際に絶対位置が活きる具体的なデザインを紹介しておきます。
そのまま真似するもよし、応用して新たな表現に挑戦するもよしです。
画像のバッジやラベル
一つ目は画像に「NEW」「SALE」といったバッジを載せる使い方。
画像を親にして、バッジを絶対配置で設定します。
左上を基準にそのまま間隔を設定したり、ブロックを少し回転させてマイナスの値を設定すれば斜めのラベルを作ることも可能です。
比較的簡単で定番のテクニックです。
画像の重ね置き
二つ目は、画像同士の重ね置きです。
２枚の画像を少し重ねて配置したり、画像に図形や文字を重ねたり、装飾的なデザインで使えるテクニックです。
画像の親ブロックを作り基準にして、重ねる画像や文字などのパーツを絶対配置で設定します。
簡単そうに見えてちょっとややこしいですが、こういった装飾パーツがあるとサイトのクオリティを上げられるので、出来るようになっておきたいテクニックです。
背面の装飾の丸
三つ目は、カードの背面に丸などの図形を敷いて、あしらいにする使い方です。
カードの角から色付きの丸を少しはみ出させて配置すると、シンプルな見た目にさりげない色みや動きを添えられます。
カードを親にして、丸のボックスを絶対配置で設定します。角からはみ出させたいので、基準からマイナスの値で設定しています。
カードにはもちろんテキストを追加することも可能で、その場合は重ね順をテキストよりも前面に配置されるように設定するのがポイントです。
まとめ
繰り返しにはなりますが、絶対位置で大事なのは「何を基準に配置しているか」ということです。
基準となる親を用意して、基準となる方向から指定すれば、自分が思っている通りの場所に配置できるようになります。
ぜひ、今回の記事を参考にして絶対配置を自由自在に使いこなしてみてください。
- 絶対位置は要素を流れの外に出し、自由な場所に配置できる設定
- 思った場所に置けないのは基準を意識できていないのが原因
- 画面サイズでずれるのは基準の方向が間違っている場合が多い
- 絶対位置は画像を重ねたりバッジを追加したり、装飾で活躍する設定
