背景
- 案件数獲得のために広告LPを作成することになった。そこでコーディングを担当した
- LPコーディングで意識すべきことを備忘録として残すためこの記事を書くことに。
- 将来ポートフォリオサイトを作成する予定がある人の役にたちたい。
事前準備
◆ CSS設計完全ガイドを深く読み込んでおく
無秩序にクラス名をつけてしまうと，数日経った後にCSSを見返す時に困るし，
どのクラスがどこに属しているのかを明確に把握できなくなる。
命名規則はBEMが個人的にオススメ。基本的に以下の規則を守っておけば迷うことはないはず…！
(セクション)--(セクション部品名)--（各パーツ名）
◆ CSSで迷子にならないようにSASSをマスターしておく
SASSはスタイルシートのネストができるので，
何がどのクラスに含まれるのかを構造的に把握することが可能である。
おまけにコードの量も3割程削減できるので，CSSよりも生産性がグンとアップする。
◆ リセットCSSは必須
意外にも見落とされがち。
ブラウザによって異なるデフォルトのCSSを打ち消し、ブラウザ間の表示のズレを未然に防ぐことができる。
こんな感じで自作のCSSファイルとリセットCSSファイルを併用すればOK。
<head>
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/style.css">
</head>
◆ BootStrapに頼りすぎない
HTML,CSSをある程度学習すると「BootStrap便利やん！」と思うことが多い。
一見効率的に見えるが、思わぬところでpaddingが活性化しレイアウトのズレが発生することがある。
なので極力BootStrapを避けflex-boxを使うのが望ましい。
LPコーディング頻出パターン
チェックボックスをタップしたとき、ボタンのdisable属性を切り替える
ボタンを押すと特定の位置までスクロール
カルーセルスライダー
フレームアウトするとふんわりと表示される
これもLPでよくあるギミック。
https://natsukimemo.com/jquery-scroll-fadein
最終チェック
どの端末から閲覧しても綺麗に表示されるかをチェック
複数の検証端末を用意する。（iPad, iPhone, etc）
サーバーに作ったLPをアップロードし、公開したページのQRコードを発行する。
各検証端末をQRコードにかざし、LPの置かれているURLにアクセスする。
まとめ
この記事が誰かの役に立てばめちゃくちゃ嬉しいです。