【第3回勉強会】よくあるレイアウトのコーディング方法について
※このnoteを書いた人：コーダー部せいすけ（岩本）
コーディングはスマホファーストが効率的
画面幅が狭ければ狭くなるほどデザインがシンプルになる場合が多くシンプルなものを基準として上書きしていったほうが無駄がなく、コーディングしやすい。
PCファーストに比べCSSの上書きが少なく済む場合が多い
参考になった文献：https://zenn.dev/tak_dcxi/articles/690caf6e9c4e26
【個人的な感想】
この辺に関しては個人的には文面では中々頭に入ってこなかったので実際に両方やってみると実感できるなと思いました。
実際に制作案件を受注した際に、PCのデザインしか支給されないもしくはPCが先に支給されて、後からSPのデザインが支給されるみたいなことも結構あったので両方経験した上でスマホファーストの方がコーディングしやすいなと感じてます。
ヘッダー内要素やナビゲーションの横並び
・横並びにする要素の高さがバラバラ、なおかつ中央揃えなどのデザインであればflexで実装すれば要素の配置など柔軟に対応が可能
・横並びにする要素の高さが均一や1行のテキストで改行の可能性がなければinlineもしくはinline-blockでの実装も可能
上下左右の中央揃え
親要素の高さが変わるか変わらないかで実装方法を検討する
【親要素の高さが固定】
・親要素にpadding-topもしくは子要素にmargin-top等で上部の余白を指定
（CSSが複雑にならずシンプルに実装できる）
【親要素の高さが可変】
・方法は複数あり詳細は下記サイトを参照
【個人的な感想】
上記の内容もですがデザインカンプ上ではわからないことを予測して事前にデザイナーやディレクターに確認をしておくと余計な修正や認識違いを防げるなと改めて感じました。こういう細かいヒアリングは教えてもらったり指摘されないと気づかない点なのでとても勉強になりました….
ネガティブマージンについて
・要素と要素を重ねたい時
・親要素からはみ出したい時
etc…
【使用例】
ツイッターのホーム画面のアイコンとサムネイルの重なり部分
【個人的な感想】
私自身案件をお受けする中で、結構使用しているなという印象で重なりが多いデザインとかだとposition使いまくるとカオスになるので、ネガティブと併用したりした覚えがあります。
要素と要素の区切り線（ナビゲーションとかによく見られるやつ）
【主な実装方法は2種類】
実装−１borderで実装（ナビのアイテムと区切り線の高さが同じやテキストが1行の時など）
ナビゲーションのアイテム（li要素）にborderを指定して、擬似クラス（:nthや:first-childなど）でデザインに応じて調整する。この実装方法だとborderを指定した要素に線の長さが依存してしまうため、テキストが改行したりする可能性がある際は指定する場所や実装方法に注意する。
実装−２擬似要素で実装（実装−１のパターン以外の時）
ナビゲーションのアイテムに擬似要素を指定して実装。
斜めの区切り線や中途半端な長さの区切り線を実装する時などに使用すると便利。
今回の勉強会を終えて個人的に感じたことのまとめ
・デザインを見た時にテキストの改行や別のコンテンツが追加された時などにレイアウトが崩れないかなどを予測して実装方法を考える（必要に応じてデザイナー・ディレクターにヒアリングや確認をする）
・新しく出てきた方法で実装するのも悪くはないが、それに固執せず昔からある実装方法の方がシンプルに実装できるパターンもあるので複数の引き出しを持っておいて柔軟に対応できるようにしたい。
この記事が気に入ったらサポートをしてみませんか？