プログラミングの勉強

模写コーディングのすすめ

この記事は、プログラミング初心者がHTML/CSS/JavaScript/PHP/WordPressを勉強して、実際に案件を受注するまでの軌跡・過程を情報発信していきます。

0.模写コーディングの効用

模写コーディングを行うことを通じて、実際に色々なスキルが身についていきますが、
模写コーディングの効用を一つだけ挙げて下さいと言われたら、下記の一点につきるかと思います。

コーディング案件を実際に受注して、
ある程度対応できる実践的な力が培われる。

書籍学習やProgate, ドットインストールのオンライン教材やチュートリアルなどの受け身学習、インプットをいくら何度も繰り返したところで、受注した案件を完成することができる実践的なスキルは身につきません。

しかし模写コーディングを行うことによって、LPサイト、コーポレートサイトのコーディング案件を実際に受注して、完成物として納品するのに必要なスキルが模写コーディングを取り組むことである程度身につきます。

一番最初の模写コーディングはけっこう大変ですが、自分の頭で考え、自分の手を動かすことによって得られるものが沢山あります。以下実際に模写コーディングをしてみて、感じたことを簡単に思いつく範囲で何点か挙げてみました。

・全体を俯瞰してサイトの大枠の構造を組むことができるようになる。

・模写コーディングを取り組むことで実際に自分が分からない箇所、
詰まってしまう箇所が明確になる。

模写コーディングを行うことで「自分が分からない箇所、詰まってしまう箇所が明確になる」というのはとても大切です。分からない場所が明確になってしまえば、それを調べるか或いは詳しい人に聞くかして、その部分を解決することができるようになるからです。

もし自分でも自分が分からない場所が分からなければ、自分で調べることも出来ませんし、
誰か詳しい人に質問もする事も出来ません。それなので、分からない、詰まってしまう事が駄目な事なのではなく、まずは分からない箇所を明確にしましょう。

そして最初は書籍、インターネットなどを使って解決方法を自分なりに調べて、実際にコードをいじってみる。

もしそれでも分からなければ、コーディングやプログラミングに詳しい人に「分からない場所」「参考にしたサイト」「実際にどのコードをいじってみたのか」などを伝えて、質問をしてみましょう。

知人や友人に詳しい人がコーディングやプログラミングに詳しい人がいない場合は、
最近では便利なサービスがありまして、下記のMENTAというサービスが価格もリーズナブルでメンターの方の対応も基本的に丁寧で親切なので、とてもオススメです!

・ 分からなくて、詰まってしまった部分も自分で検索し、
試行錯誤しながら解決・実装することができるようになる。

試行錯誤しながらも、独力で解決しようとするプロセスがとても大切だと思います。
エラー、問題が何時間も取り組んでも解決できない時はとても苦しいですし、悶々とするのですが、この試行錯誤のプロセスを経ることによって、「検索力」「問題解決能力」「自走できる力」が確実に養われます。

・自分である程度は実際のサイトをコーディングできるという自信

これが模写コーディングを通して得ることが出来る一番の収穫かもしれません。
ある程度実際のサイトを自分で作ることが出来るという経験と自信があれば、
コーディング案件に積極的に営業をしていくことができます。

そして実際の案件を受注してお金を頂きながら、経験、スキルを積み上げていくことが出来るという一石二鳥の好循環の流れに入ることが可能です。

以上のように模写コーディングは実際のコーディング案件を受注して納品する上で必要な最低限のスキルが培われていくことはもちろん、「検索力」「問題解決能力」「自走できる力」そして「自信」を得ることが出来ますので、模写コーディングは非常におすすめです!

実際にわたしも幾つかのサイトを模写コーディングをしてから、
コーポレートサイトのコーディング案件を最初に受注して、分からない場所は自分で調べながら納品することが出来ました!

それでは早速実際に模写コーディングの手順をみていきましょう。
下記模写コーディングの簡単な流れになります。

1. 模写コーディング手順

①模写サイトを選ぶ
②大枠のレイアウトを紙に書き出す。
③コーディング
④見直し・答え合わせ

① 模写サイトを選ぶ

2つの条件で選ぶとよいかと思います。

・自分が好きで、興味があるサイト

自分がとても好きで、興味があるサイトは自分の中で作りたいという意欲が湧いてきますし、モティベーションを持続させやすいです。

・現在自分が持っているスキルの難易度にあわせる。

ランディングサイト、コーポレートサイトにもピンからキリまでの難易度があるので、
自分にとって簡単すぎず、難しすぎないサイトを選びましょう。

簡単すぎず、難しすぎないレベルとは、
これまで作ったことがない要素が含まれているが、
自分の頭で考えつつ、調べたり検索したりすれば
試行錯誤しながらも実装できるレベル感。

今回わたしはローカライゼーションとHTMLファイルのWordPress化もしたいと思っているので、自分が好きで興味の持てるWordPressで制作された下記のサイトを選びました。

https://kfa.org/

※こちら掲載許可を頂いております。

② 大枠のレイアウトを紙に書き出す。

簡単なモックアップツールを使ってもいいですが、
個人的には紙と鉛筆・ボールペーンでレイアウトを書き出していくのがオススメです。

第三者に見せる必要のあるデザインのモックアップではないですし、コーディングを行う前に全体を俯瞰してサイトの大枠の構造をどのようにレイアウトしていくのか自分の頭の中で整理するために手軽に書き出すことができればいいので。

ちなみに下記がわたしがレイアウトをざっくと書き出したものになります。
いま自分で見ても、ちゃんと見ないと解読できない感じですが(笑)

先程書いたように他人に見せるものではないので、サイトの構造の大枠レイアウトをすることで、自分の頭の中が整理できれば良しです。

「ヘッダー」「ナビゲーションメニュー」「メインビジュアル」「2カラムセクション」「4カラムセクション」「フッター」などある程度このレイアウトの時点で決めてしまうと後が楽です。

次にいよいよコーディングをしていきます。
先程紙に書き出したものを見ながら、htmlのマークアップをしていきます。

大まかな手順を説明しているブログ記事はインターネット上に見つかるのですが、
実際のコードを載せながら、模写コーティングを説明している記事がわたしが探した限りあまりないような感じだったので、備忘録も兼ねて実際のコードと共に説明していこうと思います。

③コーディング

今回わたしはBootstrap4のフレームワークを使って、コーディングをしていこうと考えているのでまずその下準備からしていきます。

2. Bootstarp 4 boilerplate(ベーステンプレート)をダウンロードしてスターターテンプレートのセットアップ
https://startbootstrap.com/previews/bare/

この辺りはBootstrap4のフレームワークに関することなので、
あまり詳しく触れませんが、下記参考サイトとして挙げておきます。

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ

https://coliss.com/articles/build-websites/operation/work/bootstrap-4-new-templates-and-components.html

は英語のサイトなので、そしてviewportの設定、

bootstrap4、fontawesomeの読込を行い、
カスタムcssの読込など最低限の設定を内で行う。

そして次に

の直前にjQuery、JavaScriptなどの読込設定を行っていく。

次にサイト全体を俯瞰してサイトの基本的な構造をマークアップしていきます。
headerがあって、headerの中にnavigation-bar、左側にブランド・タイトルロゴのnavbar-brandがあって、navigation-menuはliタグを使って横揃えで実現できそうだな等当たりをつけていきます。

その下にカルーセルのスライド式のメインビジュアルがあって、
ビデオ動画のセクションは2カラムで左側カラムと右側カラムが7:3くらいになって、
次のセクションはbootstrap4だとcol-3を4つ置いてあげれば出来るでしょう。

まずは大枠のheader、section, footerタグを使って、
合計6個のブロック要素を用意しました。

6個のブロック要素をつくった後は、まずheaderの中をマークアップしていきます。
ナビゲショーンメニューの部分からマークアップ


上記のようなサイトタイトルとナビゲショーンメニューのパターンのウェブサイトは
とても多いと思うのですが、スマホ表示の時に下記のように三本線のトグル
になるやつですね。


この場合Bootstrap4で用意されている下記のnavigation-barのコンポーネントを
利用すると非常に時間を短縮してマークアップすることができます。

詳しいBootstrap4のナビゲーションバー(Navbar)に関しての参考サイトは下記
https://cccabinet.jpn.org/bootstrap4/components/navbar

ナビゲーションメニューの各nav-itemの右にある縦線はborder-rightにて実装。
最後のnav-itemは縦線がないので、 li.nav-item:last-child { border-right: 0px; }
を設定。

次にカルーセル メインビジュアルのスライダーの実装ですが、
このコンポーネントもBootstrap4にあるので、そこから実装していきます。

またサイトで使用されている画像を取得しましょう。
Google Chrome拡張機能である「Image Downloader」を使うと簡単です。


「select all」にチェックを入れると、サイトで使われている画像をワンクリックで
全てダウンロードすることができます。

直前の要素でfixed-topを使って、固定ナビゲーションメニューにしているので
その次の要素であるmain-visualに下記を設定して、
ナビゲーションバー分の高さ92pxをmargin-topを使って余白をとる。
※この部分意外と嵌りやすい部分なので、注意。

margin-topの設定をcssで行わないと、下記のようにメインビジュアルがナビゲーションメニューの高さ92px分上に食い込んでしまっているように表示されてしまいます。

※この部分意外と嵌りやすい部分なので、注意。


下記がカルーセル・スライダーの参考サイト
https://startbootstrap.com/snippets/full-slider/

こちらにあるbootstarp 4のfull-slider templateを使い、
カスタマイズしていく。そのコードは以下になります。

769pxまでの時に表示されるスライダー画像と、769px以下の時に表示されるスライダー画像を違うものに表示させたいので、以下のサイト(英語にはなりますが、良記事。)を参考にしながら、下記のコードを使いました。

How to Create a Full Width Bootstrap 4 Responsive Carousel
https://bootstrapcreative.com/create-full-width-bootstrap-4-responsive-carousel/

Full Width Carousel with Responsive Images
https://bootstrapcreative.com/pattern/full-width-carousel-responsive-images/

そしてこのままだと、下記の carousel-indicators がライン、線状なのでCSSの設定で
これを丸の状態にしていきます。

下記参考にしたサイト

Bootstrapで画像スライダーを簡単に作る
https://taroken.org/bootstrap-slider-carousel/http://taroken.mixh.jp/demo/bootstrap-slider/

デモ
http://taroken.mixh.jp/demo/bootstrap-slider/


下のcssの設定をほどこして、見栄えを整えます。

次のセクションのvideo-featureに移っていきます。

これが最適なコードなのかどうか分かりませんが、上記のようにマークアップしてみました。(これはこの記事に表示されているコード全部に言えることです。)
ただ大きな表示崩れなどはありません。

このiframeタグが意外と嵌りやすい部分です。
注意点が記されている参考サイトを以下に載せておきます。

iframe要素のレスポンシブWebデザイン対応
https://www.tam-tam.co.jp/tipsnote/html_css/post5074.html

[CSS]iframe 要素をレスポンシブ対応させる方法
https://www.webantena.net/css/iframe-responsive-web-design/

上記記事を参考にしながら、下記のようにcssを設定してみました。
おそらくもっとスマートなマークアップの仕方があるかも知れません。

これはこの記事に表示させた私のコードすべて言えることなのですが、
コーディング、マークアップのご経験の豊富な奇特な方がいらっしゃって、
こんな感じのコーディングの方がいいのではと万が一ご指摘、アドバイスなど
頂けますと大変有難く思います!

ではその下のセクションのfeature-itemsを次にコーディングしていきます。

PC表示時に4カラム、
ipadなどのタブレット表示時に2カラムが、そしてスマホ表示では1カラムというように表示させてたいので、Bootstrap4で用意されている col-lg-3col-md-6 をまず使います。
これでPC表示時に4カラム、タブレット表示時は2カラム×2、スマホ表示時に1カラムに切り替わってくれます。

今回はfontawesomeを使ったアイコンと「見出しテキスト」と「普通のテキスト」を横に並べて表示させたいので、横並びさせたい子要素である2つの <div> の親要素である <div class="col-lg-3 col-md-6 feature-item">にこれもBootstrap4で用意されている
d-flex というクラス名を右記のように <div class="col-lg-3 col-md-6 d-flex feature-item"> 追加して、2つの子要素を横並びにしてあげます。

Bootstrap4のブレークポイントについては下記を参考にしてください。

こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS
https://qiita.com/tonkotsuboy_com/items/7c01460b59c3ca5ee047

Bootstrap4で用意されているFlexbox系のクラス名については
下記が詳しいので、参考にしてください。

Bootstrap4でFlexboxを使いこなすためのクラス名一覧
https://cotodama.co/bootstrap4_flexbox/

Fontawesomeの使い方は下記を参考

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome

上記のように感じで表示されるので、これを同じ要領であと3回繰り返します。
実際のコードは下記のようになるかと思います。

次のセクションに移りましょう。
次のセクションはカラムが2つあります。
そしてその2つのカラム、左のカラムは3カラム、右のカラムは1カラム
という入れ子状(ネスト)のグリット構造になっています。
それなので、まず2つのカラムからマークアップしていきましょう。

Bootstrap4の入れ子状(ネスト)のレイアウトに関しては下記URLリンクを
参考に。

【Bootstrap4】グリッドレイアウト基本 ~入れ子(ネスト)~
https://niwaka-web.com/bs4_grid/

こちらも分かりやすいです。
Bootstrapで遊ぶ4(グリッドシステムのネスト)
https://shachicode.hatenablog.com/entry/2018/06/30/161353

上記のようにマークアップしました。
基本的には「左カラム」「右カラム」をつくり、
「左カラム」はブラウザが768px以下になったら、1カラムに。
「右カラム」はブラウザが768px以下になったら、非表示になるように設定します。

「右カラム」の非表示はメディアクエリーを使って、下記のようにCSSで設定してあげます。PC表示時に設定していた「左カラム」のボーダーも非表示になるように設定します。

次に左カラムの中に移っていきましょう。

次の部分の構造はPC表示は3カラム


ipadのようなタブレット表示は
上段1カラム
下段2カラム

そしてスマホ表示は1カラム

なのでBootstrap4だと、
col-md-4(PC表示部分のカラム設定)→ 3カラム
col-sm-6(タブレット表示時のカラム設定) → 2カラム

タブレット表示 上段 1カラムの部分が、
col-md-4 (PC表示部分のカラム設定)→ 3カラム
col-sm-12 (タブレット表示時のカラム設定) → 1カラム

実際のコードは下記のようにマークアップしました。

次は右カラム部分のマークアップ
下記のようにマークアップしました。

下記のように左カラムは同じように2度繰り返したいので、
下のようにコーディングしました。

これでfooter フッターの手前のセクションまで出来ました!
セクション main-contens部分のコードを載せておきます。

次にFooter フッター部分をマークアップしていきましょう。


Footer フッター部分の基本的な構造は3カラム(タブレット以下の表示は1カラム)
なので、 <div class="col-md-4> を指定してあげて、下記のようにマークアップしてあげれば出来そうです。基本的な構造はこれでOKでしょう。

中身は「見出し heading」と「文章 Paragraph」そして「form」があるので、
下記のようにコーディングしてみました。

formの部分ですが、Bootstrap4に用意されているform-groupというclassを使って、
マークアップしていきます。下記のようにマークアップしてみました。


Googleの「reCAPTCHA」部分は下記を参考にして実装しました。

Googleの「reCAPTCHA」を5分で実装する
https://liapoc.com/recaptcha.html

次にcopyright コピーライト部分に移ります。

コピーライトの文章・テキストが一行なので line-height を使い、
下記のようにcssをマークアップしました。

縦方向の中央寄せについては下記を参考にしました。

今回はcopyright コピーライトの文章・テキストが一行だったので、
line-height を使うことが出来ましたが、一行ではない時は違う方法で
縦方向の中央寄せをします。

テキストの縦方向の中央揃えについて
https://qiita.com/Shinji-m/items/69a392685699f3ba95fb

CSSで上下左右に中央寄せする方法、全部まとめ
http://www-creators.com/archives/391

【CSS】要素を上下や左右に中央寄せする簡単な方法
https://kuzlog.com/2017/01/11/228/

次に下記のクリックすると「スクロールでページトップへ戻ってくれるボタン」
を実装しましょう。

下記のサイトを参考にしながらカスタマイズしていきます。

jQuery:スクロールで表示されるページトップの実装方法
2. フェードで出現 #2
https://www.nxworld.net/tips/page-top-appears-scroll.html

一定量スクロールすると表示する「ページトップ」ボタンの実装方法
https://www.plusdesign.co.jp/blog/?p=4044

スクロールでページトップへ戻るボタンを表示させる方法まとめ!
https://giga-log.com/homepage/pagetop-button/

上向きの矢印はfontawesomeアイコンを使用します。

下記の参考サイトよく使うFontawesomeのアイコンがまとめられています。

よく使うFontAwesomeの日本語まとめ作ってみたよ。
コード検索とかに手こずったりするので参考にしてみてね
https://website-homepage.com/web-design/tips/font-awesome-japanese/

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome

実際のコードは下記のようにhtmlをマークアップして、

cssは下記のようにしました。

※最終的には親要素の四角のボックスをhoverさせた時に
子要素のfontawesome上向き矢印の色を変更する必要があったので、
子要素にも親要素と同じ高さと幅50pxを設定し、下記のような処理をして一件落着!
ハイライトで示している部分が肝となっている部分。

line-height か vertical align=middle
どちらか一方だけでは駄目で、両方ともに設定してあげる必要がある。