前回の投稿から3週間も経過してしまい、ふと気づくと夏野菜が恋しい季節になってまいりました。
この3週間はレスポンシブ対応したWEBページ作成の実務案件に取り組んでおり、
Qiitaの存在はてっきり忘れていました。

初めての実務案件でしたので、要求されるスピード感にはついていけず反省です。
お世辞にも私は美的感覚に鋭敏とは言えないので、
レイアウトの間違いにすぐに気づくことが出来ず時間がかかってしまいました。
今回はその問題をよりスムーズに解決した方法をまとめていきます。

レイアウトのずれを解決した方法

マクロなズレ

デザインに即して一つ一つのmarginやpaddingを設定したつもりが、どうもおかしくなっていることがありました。
そんな時に活躍したのがPerfectPixelです。

▼参考画像

例として貼ってみたのですが、分かりにくくなったかもしれないですね笑

chromeの拡張機能なのですが、画像を透過してWEBページを表示させます。
また透過率が可変なので、見るポイントによって見比べやすくすることが出来ます。
それまで目視でしかページを見比べていなかったですが、はっきりとどこがずれているかを認識することが出来ました。
そしてデベロッパーツールを用いることで、スムーズに位置調整が行えました。

ミクロなズレ

パン屑などのアイコンを表示させるときには、before・after要素を用いて表現をしていました。
しかし、細かなアイコンは数ピクセルの違いがとても大きく影響し、レイアウトが崩れてしまうことが多くありました。

まず初めはpタグとbefore要素を用い、考えていました。
ちなみにコードの概略は以下の通りです。

<p>
</p>

p {
  position :relatie;
}
p:before{
    position: absolute;
    display:block;
    top: 2px;
    left: 1px;
}

だがこれではpタグをposition:absoluteとして使いたいときに、困ってしまいました。
他のセレクタに依存することがなく、動かすことが出来ればいいなと悩んでいました。

そこで上の方に助けていただいたのですが、
その解決策が予想以上にシンプル！

擬似要素をspanにかけて、以下の記述を加えるだけです。
また動かすピクセル数はお好みで。

<p>
　<span></span>
</p>

:before{
    position: relative;
    top: 2px;
    left: 1px;
}

positionは

• static
• relative
• absolute
• fixed

の４つがありますが、
relativeはstaticの上位互換のようなものです。

static・relativeはともに、配置方法を指定しませんが
relativeは初期状態のstaticからピクセルを指定して動かすことが出来るのです。
relativeはstaticを基準としているので、位置を変えてもほかに危害を加えません。
独立して動いてくれるのですね。

またこれのいいところは他の要素にも使えることです。
多用すると、どれがどんだけ動いているかが把握しずらくなるので
ほどほどにしなければなりませんが。

ちなみにspanを使ったのはspanとbeforeがインライン要素なので位置調節が楽になるからです。

まとめ

レイアウトをデザインに出来るだけ正確に合わせる方法をまとめました。
同じ配置をするにしても様々な手法があるので、その都度修正を加えることを考慮しながら取り組んでいきたい。

今週の悟り

レイアウトとは人間が感覚的に良し悪しを決めている部分ではあるのだが、
そこには１つの理があるようです。
そこには知らない間に人をひきつける何かがあるようです。
私はまだまだその域には達しておらず、多くの人とずれているのかなとも思います。
だが、この社会で生きる以上は寄り添っていかねば。