HTML・CSS・BootstrapといったWeb制作に必要なスキルを一通り学習したので、既存サイトの模写に挑戦しようかな…。
こんにちはTsuneです。
時間を見つけては、独学でプログラミング学習をしてます。
かっこいいサイトを作りたいです。
さて先日、初めてサイト模写たるものをやってみました。
HTML CSS Bootstrapを使って、サイト模写をしてみました。
Progateやネットで調べたりしながらなので、かなり時間がかかりました。
<課題・反省点>
時間的効率をたかめる
ヘッダーのリストをレスポンシブ化
ちゃんとご飯を食べる
どんなことをやったのかをまとめつつ、今後の課題にも触れてみたいと思います。
サイト模写手順⑴：完成形を紙にあらかじめ書いてみる
どういう構成にするか、クラス名を何にするか、レイアウトはどうするのかを一度、書き起こしてみましょう。
漫画のネームみたいな感じでこれから作っていくもののイメージを掴んでいきます。
細かく決まっているものがあれば、それもどんどん書いていきましょう。
デザインも決まっていたら記述していきます。
ここで重要なのは、「サイトの構造（フレームワーク＝骨組み）をしっかり掴むこと」です。
大体のサイトはヘッダーがあって、メインがあってフッターがあります。
あとは、入れ子構造をしっかりと掴んで書いていくと良いと思います。
下に、私が書いた物を貼っておきます。
実際、書くのにかかった時間は、２分もかからなかったと思います。
かなり簡単で簡素な感じになってしまいましたが、細かければ細かいほど後々、制作していくのにイイと思います。
ちなみに、今回は某大手民泊サイトのTOPページを模写しました。
サイトの構成といたしましては、上部にヘッダー（ロゴや問い合わせ等のリスト）
その下に素敵な写真を背景として、行き先エリア・宿泊日といった情報を入力して問い合わせフォームがあります。
さらに下にスクロールしていくと宿泊先や新着情報を紹介している項目といった具合に出来上がっています。
詳しくは、こちら(Airbnbのサイト)をご覧ください。
とりあえず今回制作したものは下記です。
以上を制作いたしました。
サイト模写手順⑵：Bootstrapを使う準備
さて、それでは、制作に入っていきます。
まずはBootstrapを使うため、Bootstrapのサイトに移動し、「StarterTemplate」をHTMLファイルに貼り付けます。
詳しくは、こちらのサイトを参考にすると分かりやすいです。
今回はBootstrapのグリッドシステムや、フォームを利用して製作するため、まずはそれらを使えるように準備をします。
やり方は多々あるようですが、ここでは簡単なCDNを貼り付けて行う方法を使います。
サイト模写手順⑶：HTMLを記述（とりあえずデザイン・レイアウトは後回し）
先ほど書いたネームに沿って、構成していきます。
divの入れ子構造とかも意識しながら作っていきます。
とりあえずは、デザイン・レイアウトは考えずに、HTMLでどんどん書いていきます。
重要なことは、「Bootstrapのグリッドシステム」を考えながらコーディングをすることです。
「container 」「row 」「column」といった基本的な部分を考えながら、書いていきましょう。
レスポンシブへの対応も考えながらコーディングしていきます。
サイト模写手順⑷：デザイン・レイアウトをコーディング【便利な３つの機能】
HTMLで大方の枠組みや構成が出来上がったら、デザインやレイアウトをコーディングしていきます。
ここでデザインやレイアウトをコーディングする時に使った便利なもの３選をご紹介します。
それぞれざっくりと紹介します。
その①「GoogleCrome」
「GoogleCrome」のディベロッパーツールはレイアウトをするのに非常に便利で、スムーズにコーディングが出来ます。
公式HP：Google Chrome（https://www.google.com/intl/ja/chrome/）
どこまでがdivの範囲か、margin border paddingがどういう設定になっているのかなどが視覚的に分かるので、とてもわかりやすいです。
その②「 Lorem Picsum（https://picsum.photos/）」
Lorem Picsumは、リンクを貼っておけばランダムで色んな画像を表示してくれます。
サイト制作において、イメージを掴むためにも画像が入るところに何かしらの画像を入れておきたいですよね。
でも「適当な画像見つけてくるのも面倒くさいなー」って時に使えます。
画像を探す時間を省けます。
しかも結構オシャレな画像が出てきますので、いい感じです♪
▼「Lorem Picsum」の詳しい使い方が知りたい方はコチラ！
Lorem Picsum【画像選びにお困りの方は必見！】
その③「Bootstrap-datepicker」
ある程度完成に近づいてきたところで、少し難関に差し掛かりました。
テキスト形式の入力フォーム(今回は宿泊場所、チェックイン、チェックアウト、ゲストの人数)などはスムーズにBootstrap の機能を使って出来たのですが、カレンダーから日付を指定して入力するというフォームがなかなかの難関でした。
解決策としては、Bootstrap-datepickerを使いました。
この機能は、フォームをクリックするとJavaScriptが、起動しカレンダーが表示されるというものです。
使い方などを紹介している色々なサイトを見ながら組み込んでいきました。
できた時は結構感動しました。
今まで、できなかったことができるようになると気持ちいいものですね。
Bootstrap-datepickerの使い方などは、また別の機会にまとめたいと思います。
サイト模写手順⑸：レスポンシブ対応する
最後にレスポンシブへの対応も。
スマホやタブレットで閲覧した時に、入力フォームのレイアウトを変更したり、トップ画像の高さを縮めたりしました。
これは、Twitterの動画にはあがってないのですが、後日追加しました。
あとはメディアクエリも使ってレスポンシブにしました。
プログラミング初心者がサイト模写にチャレンジした感想
ある程度のサイト模写はできましたが、細かいところまで作り込んでいくとなると、かなりの日数が必要だなと感じました。
作業時間としては約6時間くらいでした。
大事なことは、「一刻も早くコーディングをしたいという衝動を抑えて、設計図やクラス名、スタイルなどを書き記して、整理すること」です。
頭では何となくイメージ出来てても、なかなか上手く進みません。
やりたいことや表現したい内容を、あらかじめ確認してからコーディングへと進みましょう！
あとは、貪欲に妥協せずにあらかじめ作ると決めたものに近づけていくことです。
高度な技術で今の自分には実装できないから違うもので代替しようという考えは無くしましょう。
今のスキルではできないものが色々と調べてできるようになる事がサイト模写では非常に重要です。
今回は、本当に大雑把なものしか出来なかったので、次回はもう少し細かく作り込んでいきたいと思います。
コメント