【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】
この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。
こんばんは、プログラミング初心者の氷犬です。
前回の記事はこちら⇒【プログラミング学習記録③】WordPressの基礎はドットインストールで
この記事では、「ランディングページ模写でのHTML/CSSのコーディング練習」について書いています。
こんな人におすすめ
- ProgateなどでHTML/CSSの基本は勉強した
- その次に何をしたらいいかわからない
- ランディングページって何？模写のやり方は？
HTML/CSSの基本学習が終わったら早速コードを書こう
この記事の内容は、「ProgateやドットインストールでHTML/CSS/jQueryなどの学習が終わった」程度の初心者を想定しています。
Progateやドットインストールでは画面の案内や動画の内容に合わせてコードを書くだけでした。
特にProgateなんかはすごく簡単で、スライドも見返せるし、ヒントも見ながらコードが書けます。
やるべきことが指示される
ヒントも見ることができる
しかし、実際のコーディング作業では細かく指示してくれる人はいません。自分で考えながらコードを書いていく必要があります。
いわば、今までのコーディング作業は練習中の練習でした。
次にゼロからコードを書く練習をしなければなりません。
そこで、おすすめなのが「ランディングページの模写」です。
ランディングページの模写って何？どうやるの？
ランディングページって？
ランディングページ（通称LP）とは、検索やSNSからユーザーが流入した時に最初に見るページのことです。
転じて、「ユーザーが最初に訪れるであろうページ」のこともランディングページと呼びます。要するにトップページや広告ページのこと。
サイトの代表的な１枚のページのことをランディングページ(LP)と呼びます。
まあ、トップページのことだと思ってもらってかまいません。
Webサイト構築は、１枚１枚のページを作って合わせる作業なので、まずは１枚のページを作れるようになるところから始まります。
自分でローカル環境を用意し、テキストエディタを使って「index.html」や「style.css」のコードを書いていきます。
実際にランディングページを模写してみた（５時間）
今回参考にしたページはこちら
今回参考にしたページはこちらです。
以前、Twitterでイラストレーター・エンジニア・デザイナーのちづみさんが「このページいいよ！」とツイートされていたので、早速使わせてもらいました！
⭐稼ぐにつなげるコーティング学習法
progate終わってもサイトを0から作ってみるのは結構難しいので、おすすめは
1️⃣シンプルなサイトを探す
2️⃣クロームの「検証」で開く
3️⃣0からマネして書くこれでかなり実務と繋げられるはず????
我思う練習に適したサイト????https://t.co/uoMB5ZZj5h pic.twitter.com/v2KROG8NJd
— ちづみ@コードも書くイラスト屋 (@098ra0209) 2018年5月24日
ちづみさんはイラストを活かしたエンジニア関連の発信が激ウマなので、必ずフォローしておきましょう⇒ちづみ@コードも書くイラスト屋
作ったページはこちら
PAS-POL様のサイトを参考にして作ったページはこちら（画像です）
本当の意味でゼロからコードを書きました。
はじめての模写なので完璧には行きませんでしたが、まあそこそこできたかなと思います。
所要時間は全部でだいたい５時間くらい。
jQueryなしのHTML/CSSコーディングですが、結構かかってしまいましたね。
まあ、はじめてなのでゼロから作れただけ良しとしましょう。
作った要素と良かった点・反省点
ここからは参考にしたページと軽く比較しつつ、実際に作ったページを見返して反省していきます。
１：ヘッダーロゴ・メニュー
左のロゴと、右のメニュー。
左のロゴは実際には画像なのですが、まあurl読み込むだけなのでいいかと思い、そのままh1タグで記述しました。
全部aタグでリンクにしていて、マウスを載せると少しだけ薄くなります。opacityで実現。
まあ、そんなに難しくはなかったのですが、floatさせると要素が浮いてしまって、次のブロックが下に回ってしまう点が厄介でしたね。
あと、裏の画像は本来スライドショーです。
今回ははじめての模写ということもあり、jQueryは使わず、画像１枚で仕上げました。
どうやらWordpressのプラグインで実現してるみたいなので、そのあたりは後で勉強すればいいかなと。
２：簡単なコンセプトの文章
ウィンドウの幅を狭めて録ったので文字が折り返しになりました笑
「こんなん秒で出来るわ」と思っていたのですが、実は意外と難しかったです。
ちょっと画像で説明します↓
中央揃えと左揃えが両方ある
この揃えが中央か左か、が結構厄介でした。
単純にtext-align:centerでやると、文章まで中央に揃ってしまいます。
なので、別にブロック要素を作って、その中にpタグの文章は入れてやると。
「あれ、ブロックの中央揃えってどうやるんだっけ？」と思い、margin:0 autoを調べ直すとか、そういう意味でいい勉強になりました(T_T)笑
３：プロダクト一覧をグリッドで分割・ボタン
画像は勝手ながらダウンロードして練習させていただきましたm(_ _)m
ポイントをまた画像で説明します↓
このボタンはBootstrapに実装されているのをそのまま使いました。
aタグ+CSSで作ってもよかったんですけど、「Bootstrapの練習をしておこう」と思い。
まあ、クラス指定するだけなんで簡単なんですけどね。
一応、反転するようにしておきました↓
あとはBootstrapでプロダクト一覧の分割。
floatタグで分割すると、要素の回り込みとかがエグいことになるので、こういう要素を並べるのはBootstrapでやると楽ですね。
Bootstrapならレスポンシブ対応（スマホ）もしてますからね。
４：記事一覧（Wordpress特有のやつ）
WordPressではおなじみ、「画像」＋「タイトル」＋「デスクリプション（説明）」のやつですね。
これが一番難しかった…
あとから見れば大したことないんですけど、なぜか画像の下に文字が行ってしまうという…
多分、そのうちまた同じことで悩むので、こういうレイアウトはよく勉強しておいたほうがいいですね。
どうやら文字の横幅が長すぎて２段目に行ってしまう（？）らしいです。
このサイズ調整はHTML/CSSコーディングで初心者がつまずくとこなのかなーと思ったり。
WordPressではよく使われるレイアウトですが、実際に自分でコーディングすると学びが多いですよ。辛かったけど。
５：SNSシェアボタン
aタグで作るだけ。
個人的にボタンは作っていて楽しいですね！
これもマウスを乗せると反転するようになっています。簡単。
６：フッターナビ（メニュー）
シンプルなフッターメニューです。
ごく簡単なHTML/CSSで作れるのでわざわざ調べずとも作れるようになっておくといいですね！
７：Copyright
ひとつ問題点があって、この右のCopyrightの高さは無理やりmargin-topで調整しているんですよね。
line-heightなどで調整できればよかったんですが、どうもうまくいかないので無理やり調整しました。
レスポンシブ対応させる時に頭抱えそうですが、とりあえず作るのが大事と自分に言い聞かせました。
技術の都合上できなかったこと・しなかったこと
画像のボカし・ラウンド処理
ページトップのスライドショーでは左下と右下をボカして、ラウンドさせているんですが、jQueryなしではできそうにありませんでした。
まあ、画像加工して無理やりやるのも違うし、とりあえず作ればいいかなと。
ページトップに戻るボタン
ページトップに戻るボタン。
本来ならposition:absoluteとか使ってポジション調整の練習をすべきなのですが、疲れてたので省略してしまいました(-_-;)
次見かけたら挑戦します。
レスポンシブ対応（タブレット・スマホ対応）
「一番大事なところだろ！やれよ！」って感じですが、パソコン用だけ作って疲れ切ってしまいました…(T_T)
あともうひとつの理由として、レスポンシブ対応させることまで想定してレイアウト組めてないんですよね。
ムダなくコーディングできればよかったんですけど、初めてということもあり、結構グチャグチャなコードとなっております…(-_-;)
反省点としては、事前によくホームページのレイアウトを想像できていなかったことですね。
一応ノートに下書きはしましたが、その通りにコードが組めませんでした。反省。
とりあえず手を動かして覚えよう！
今回ゼロからコードを書いたのですが、わからないことばかりで本当に脳が疲れました。
まあ、泣き言言ってられないですし、楽しいことには楽しいのでがんばります！
次はjQueryかWordpressについて書こうかなと思います。
WordPressについて書きました⇒【Webサイト制作を学ぶなら『WordPressの教科書２』で！【プログラミング学習記録⑤】】
関連記事：
【未経験から】プログラミングの独学方法の手順まとめ【実践済み】
