簡易ランディングページの作成5日目

9月5日（木）の日記です。

本日はひたすらレスポンシブ対応に向けてSASSのコードの見直しと修正を行いました。レスポンシブ化にもそれ程労力を費やさないレイアウトをあらかじめ考えていたのですが、やはり実際に適用させるとなると、そう簡単にはいかないみたいです。

スマホ画面に対しては各ブロックを上から下に順に並べていく感じで良かったのでそれ程難しくはなかったのですが、タブレットとなると一部は横並びのままの方が見栄えが良いので flexbox や float を使う事となります。全部 flexbox でやれば良いと思っていたはずが、一部は画像と文章が入れ子になっているので、そうなると従来通りの float で上手く対応するしかなかったりと、所々で行き詰まる事も...。

後は、SASSのコードの書き方や、極力 margin や padding の記入を少なくする工夫も必要だと感じます。
「とりあえずこの文字の上側を開けよう」とか「padding をがむしゃらに設定しちゃったけど、レイアウトも崩れてないし、まあ形にはなったからいいか」とかでは今後の自分の為にもならないので、回数をこなしつつも、コードの書き方やまとめ方も意識していければと。

最終的にスマホ・タブレット・PCの3タイプのレスポンシブ・ランディングページが完成しましたので、github.io という簡易サーバーに挙げました。宜しかったら見てやって下さい。

https://eewano.github.io/landing_page/index.html

サーバーを契約しなくてもUP出来るのはいいですねぇ。もっと早く知っておけば良かったです。