Progate（プロゲート）やドットインストールで HTML & CSS の勉強をして、その次に Udemy でもLP（ランディングページ）コーディングの講座を受けてみました。
その次に何をしようか悩んでいたのですが、せっかくだから、LP のコーディングをしようと思いました。
しかし、0から作るのは難易度が高いかなと思い、模写コーディングから始めてみたので、その内容について紹介していければと思います！
LP模写コーディングをする際に参考にしたページ
LP の模写コーディングをするにあたり、下記のサイトを参考にしました。
このページを、Chrome の「検証」機能を使って、どのような構造になっているのかを確認してみると、割と簡単な構造で、模写しやすそうだなと思ったので、この LP を選びました。
LP模写コーディングをしてみて難しかったところ
初めて1からコーディングしたので、コーディングに7時間ほどかかりました…
以下が、LP 模写コーディングを行う際に苦労した箇所です。
- header 部分の背景画像
- ナビゲーション
- セクション部分での背景画像の固定
- iframe の属性指定
header 部分の背景画像
ヘッダー中央に記載されている文言は、「画像」で用意されていたので、その画像をそのまま使用。
中央に寄せたかったので、text-align で center を指定し、top の位置を調整しました。
背景画像に関しては、background と background-size プロパティを用いて、反映させることができました。
<style>
.bg_image01{
background: url(img/bg_image01.jpg) no-repeat center;
background-size: cover;
}
</style>ナビゲーション
ナビゲーション部分のコーディングに一番時間がかかりました。
最初は、CSS のフレームワークである Bootstrap を使って、ナビゲーション部分をコーディングしようとしましたが、最初のLP模写コーディングということもあり、HTML ＆ CSS だけでコーディングしました。
HTML の方は nav タグを作って、その中に ul タグと li タグを入れるという構造にしたのですが、問題はCSSでした…
float の解除
float を解除するための疑似要素を追加する必要があったのですが、なかなか float を解除できませんでした。
そこで、Chrome の「検証」を開いてみると、float を解除するために以下の記述がされていました。
nav ul:after {
content: "";
clear: both;
display: block;
}まず、疑似要素に必須の content を指定し、その次に clear プロパティに both を指定することによって、全ての要素に対しての回り込みを解除し、最後にデフォルトでインライン要素となっているのをブロック要素にしているということですね。
ナビゲーションの固定
その次にやっかいだったのは、スクロール時にグローバルナビゲーションがトップに固定されるコードの記述です。
一番上にナビゲーションがある場合のコードは書くことはできたのですが、今回のナビゲーションは、上から離れた位置にあり、スクロールして、その部分が一番上にくると、固定されるというものでした。
この部分のコーディング方法は、全く分からなかったので、ググってみると、以下のような記述で解決できることが分かりました。
nav#gNavi {
position: -webkit-sticky; /* safariのためにwebkitを追加 */
position: sticky; /* スクロールに応じて要素を固定 */
top: 0;
}stickyという値すら知らなかったので良い勉強になりました。
セクション部分での背景画像の固定
スクロール時に、背景画像が固定されるようにするため、以下のようにコードを書きました。
.bg_image02 {
background: #666 url(img/bg_image02.jpg) no-repeat center fixed;
background-size: cover;
}iframe の属性指定
iframe タグ内の属性で frameborder＝”0” にして境界線を消し、allowfullscreen 属性で、全画面モードにすることを許可できるということは知りませんでした。
初心者がランディングページ（LP）模写コーディングに初挑戦！｜まとめ
今回は、1からコードを書いて LP 模写コーディングを行いましたが、なかなか難しいですね。
今後、LP 模写コーディングを行う際は、もう少しコーディングにかかる時間を短縮できるよう、サイトの構成をしっかり考えた上で挑もうと思います。
コメント