こんにちは、@amiamiといいます。
前職ではUIデザイナーのようなことをやっていてコードを書いたことがなく
いきなり、初めてLPの実装をすることになりました！
（できたLPはこちらです！ https://lp.re-shine.jp/orderer/)
その際に割と引っかかってしまった点を書いておきます。
社会人●年目の新人プログラマーですが、皆さんと一緒に頑張っていきたいです。
1. いきなりCSSを書き始めない
webページは構造が大事。
どの要素をどうまとめるかをイメージしながらHTMLのみ書いていきます。
CSSのクラス名もつけていきましょう。
（完璧につける必要はないです。ざっくり内容と構造に合わせてつけていきましょう）
デザインの不明点もこの段階できっちり洗い出しておきます（できてなかった）
例えば、下のエリアのコーディングについて
当初、矢印部分だけが画像だったのですが、表部分も含めた画像に変えてもらいました。
あとは、レスポンシブで画面が変化した際、要素が固定になるのか、伸びるのかはきっちり確認しておく必要があります。
2. 全部一気に仕上げようとしない
当たり前でしたね。
section要素ごとに対応しましょう。
一つずつ完成させることでモチベーションにも繋がります。
bodyや別sectionのスタイルを継承していたりするのをきっちりカバーできるメリットもあります（できてなかったので焦った）
テキストのみや1枚画像などの、要素が少ないところから始めるといいでしょう。
3. 都度確認しながら進める
いつ、どこで変な記述をしたか気付くためにエディタに確認用のプラグインは必須です。
VScodeでHTMLとSCSSを書いていたのでこの二つは本当に便利でした。
Live Server : https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Sass Compiler : https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
使い方は公式やこの辺りを参考にしてください。
4. position:absolute;を使いすぎない
position:absolute;は親要素に対しての位置を自由に指定できるので
置きたい要素をきっちり決めることができます。
レスポンシブデザインだと画面サイズが変わってしまうので
多用してしまうと、修正が大変になります。
ですので、使いどころを決めて使用するのがいいと思います。
div::afterなどの擬似要素や、画像の上にアイコンを重ねたりといった場面です。
駆け出しエンジニア的には、position:absolute;を指定するときは
必ず親要素にposition:relative;を指定することを忘れないようにしましょう。
変なところに要素が表示されてしまいますので…
5. 安直にheight指定はしない
heightでエリアのサイズを決めてしまうと
子要素の大きさによっては子要素がはみ出してしまうことがあります。
背景色などは下のようにpaddingでエリアを作ると
画像が背景からはみ出さないようにして色指定することができます。
div {
background-color: #f8f8f8;
padding-top: 100px;
padding-bottom: 113px;
}
6. PC版が組み上がってからレスポンシブに取り掛かる
PC版が一通り作成終わって、デザイン通りになっていることを確認したら
SP版を作り始めます。
SP版はiPhoneの 375pxを基準に作っていきました。
利用するスマートフォンによって文字サイズや画像サイズなどの見た目が変わってしまわないように
SP版のデザインはvwで実装することで利用するスマートフォンによらず同じ見た目にすることができます。
このサイトで紹介されているようなSASSの@mixinで関数を作ってしまうと
デザインデータのpx値をそのまま関数に入れればいいので楽に実装できます。
終わりに
大体このような感じのことを気をつけていけば、（私のように）つまずかずにLPが作れると思います。
LPを作り慣れている方なら当たり前のようなことばかりですが、少しでも参考になれば。
↧