初心者がランディングページ(LP)模写コーディングに初挑戦!

クラウドソーシングのポートフォリオを作成するためにLP制作に初挑戦! プログラミング

この記事では、

progate、ドットインストールでHTML&CSSの勉強をして、その次にUdemyでもサイトコーディングの講座を受けてみた。さて、その次に何をしたらいいのか?

と思っている方に向けて書いています。

 

 

僕自身の直近の目標は、クラウドソーシングの「LP制作」案件を獲得することです。クラウドソーシングで案件をとるためには、プロフィールを充実させ、ポートフォリオを用意しておく必要があります。

 

実際の成果物があった方が信頼されやすいからですね。

 

代表的なクラウドソーシングとしては、クラウドワークスなどがあります。ということで今回、「クラウドソーシングの参考URLを利用してランディングページ(LP)模写」をしてみました!

 

模写コーディングをする際に参考にしたページ

参考にしたのは、下記のサイトです。

https://www.pro-s.co.jp/seminar/seo/

 

このページをGooglechromeの「検証」を使ってどのような構造になっているのかをみてみると、HTML&CSSの基礎を勉強をした方であれば結構、簡単な構造になっていることがわかると思います。

 

HTML&CSSを詳しく学ぶなら以下の書籍がおすすめでして、わからない箇所があったときにこの教科書を参考にするという感じです。

 

 

どのようなタグを使っているのかが分かったところでゼロからコードを書きました。(ちなみにテキストエディタはAtomを使っています)

 

模写コーディングで大変だったところ

初めて1からコーディングしたので予想以上に時間がかかりましたね。たぶん合計で7時間くらい(笑)。

 

手順としては、

  1. 構造がどうなっているか考える
  2. 一旦自分でコードを書いてみてその通りになるか試す
  3. 思い通りにコーディング出来なかったら、「検証」を開いて確認

という感じです。

 

苦労した所を箇条書きでまとめてみました。

  • header部分の背景画像
  • ナビゲーション
  • セクション部分での背景画像の固定
  • iframeの属性指定

 

header部分の背景画像

LP(1)のheader画像

 

真ん中にある文字は、画像で用意されていたのでその画像をそのまま使用。中央に寄せたかったのでtext-alignでcenterを指定し、topの位置を調整しました。

 

そこまではよかったのですが、CSSで背景にある画像を設定しようとしてみても反映されなかったので、HTMLで以下のようにstyleタグで記述したところ反映されました。

 

<style>
      .bg_image01{
        background: url(img/bg_image01.jpg) no-repeat center;
        background-size: cover;
      }
 </style>

理由は、まだわかっていません(泣)。

 

ナビゲーション

LP(1)のナビゲーション

このナビゲーション部分が一番時間がかかりましたね…笑

 

最初は、CSSのフレームワークであるBootstrapを使ってナビゲーション部分を作ろうとしましたが、最初のLPページ制作ということもあり、HTML&CSSだけでコードを書きました。

 

HTMLの方はnavタグを作って、その中にulタグとliタグを作るという簡単な構造で、秒で終わりましたが、問題はCSSでした…

 

floatの解除

floatを解除するための疑似要素を追加するということなんですが、最初ぱっとみたときに何をしていいか分からずにfloatを解除できていなかったんです。

 

「検証」を開くとfloatを解除するために以下の記述がされていました。この記述をみたときに、そういえばそうだったなあと思い出しました。

 

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

 

まず疑似要素に必須のcontentを書いて、その次にclear:both;で全ての要素に対して回り込みを解除し、最後にデフォルトでインライン要素となっているのでブロック要素にしているということですね。

 

ナビゲーションの固定

で、その次にやっかいだったのは、ページをスクロールした時にグローバルナビゲーションがトップに固定されるコードの記述です。

 

一番上にナビゲーションがある場合のコードは書くことはできたんですが、今回のナビゲーションは、上からまあまあ離れた位置にあり、スクロールしてその部分が一番上にくると、固定されるというものでした。

 

この部分のコードは全く分からなかったので、ググると以下のような記述で解決すること分かりました。

 

nav#gNavi {
  position: -webkit-sticky; /* safariのためにwebkitを追加 */
  position: sticky; /* スクロールに応じて要素を固定 */
  top: 0;
}

 

stickyという値すら知らなかったので良い勉強になりましたね。

 

セクション部分での背景画像の固定

LP(01)の背景画像

 

この部分をスクロールしたときに、画像が固定されるようにするために以下のようにコードを書きました。

 

.bg_image02 {
  background: #666 url(img/bg_image02.jpg) no-repeat center fixed;
  background-size: cover;
}

 

ここは、まあそこまで苦労せずに書くことができました。ただ、backgroud-sizeでcoverを指定することを忘れてましたね(笑)。

 

iframeの属性指定

LP(01)の地図

iframeタグ内の属性でframeborder=”0”にして境界線を消し、allowfullscreenで全画面モードにすることを許可するということは知りませんでした。

 

iframe自体、youtubeなど動画の埋め込みもできるので今後使えるようにしっかり復習しときます。

 

おわりに

今回は、PC用だけ作りました。本当はレスポンシブ対応させる必要があるのですが…笑。1つのサイトをコーディングするのに手一杯でした。

 

今回は、ゼロの状態からコードを書いてLPを作りましたけど、やっぱりゼロからの状態だとけっこう時間がかかっちゃいますね。

 

次回からはもっと時間を短縮できるよう、サイトの構成をしっかり考えた上で挑もうと思います。

 

次回はこちら

ポートフォリオ作成のためのランディングページ(LP)模写コーディング②
この記事ではクラウドソーシングのポートフォリオ作成に向けてLPページ模写2つ目を完成させたので、その作成に当たって大変だったところや今後気をつけるべきポイントについて書いています。クラウドソーシングの「ランディングページ(LP)制作」を受注してみたいけど、ポートフォリオが完成してないからどうしよう...と思っている人がこの記事を見てポートフォリオ作成の参考になれればと思っています。

コメント