2019年4月20日この記事は、プログラミング初心者がHTML/CSS/JavaScript/PHP/WordPressを勉強して、実際に案件を受注するまでの軌跡・過程を情報発信していきます。模写コーディングの効用を一つだけ挙げて下さいと言われたら、下記の一点につきるかと思います。コーディング案件を実際に受注して、ある程度対応できる実践的な力が培われる。ドットインストールのオンライン教材やチュートリアルなどの受け身学習、インプットをいくら何度も繰り返したところで、受注した案件を完成することができる実践的なスキルは身につきません。模写コーディングを行うことによって、LPサイト、コーポレートサイトのコーディング案件を実際に受注して、完成物として納品するのに必要なスキルが模写コーディングを取り組むことである程度身につきます。最初の模写コーディングはけっこう大変ですが、自分の頭で考え、自分の手を動かすことによって得られるものが沢山あります。以下実際に模写コーディングをしてみて、感じたことを簡単に思いつく範囲で何点か挙げてみました。・全体を俯瞰してサイトの大枠の構造を組むことができるようになる。詰まってしまう箇所が明確になる。模写コーディングを行うことで「自分が分からない箇所、詰まってしまう箇所が明確になる」というのはとても大切です。分からない場所が明確になってしまえば、それを調べるか或いは詳しい人に聞くかして、その部分を解決することができるようになるからです。誰か詳しい人に質問もする事も出来ません。それなので、分からない、詰まってしまう事が駄目な事なのではなく、まずは分からない箇所を明確にしましょう。最初は書籍、インターネットなどを使って解決方法を自分なりに調べて、実際にコードをいじってみる。それでも分からなければ、コーディングやプログラミングに詳しい人に「分からない場所」「参考にしたサイト」「実際にどのコードをいじってみたのか」などを伝えて、質問をしてみましょう。試行錯誤しながら解決・実装することができるようになる。試行錯誤しながらも、独力で解決しようとするプロセスがとても大切だと思います。できる力」が確実に養われます。・自分である程度は実際のサイトをコーディングできるという自信これが模写コーディングを通して得ることが出来る一番の収穫かもしれません。ある程度実際のサイトを自分で作ることが出来るという経験と自信があれば、コーディング案件に積極的に営業をしていくことができます。実際の案件を受注してお金を頂きながら、経験、スキルを積み上げていくことが出来るという一石二鳥の好循環の流れに入ることが可能です。できる力」そして「自信」を得ることが出来ますので、模写コーディングは非常におすすめです!実際にわたしも幾つかのサイトを模写コーディングをしてから、コーポレートサイトのコーディング案件を最初に受注して、分からない場所は自分で調べながら納品することが出来ました!それでは早速実際に模写コーディングの手順をみていきましょう。下記模写コーディングの簡単な流れになります。模写コーディング手順1模写サイトを選ぶ2大枠のレイアウトを紙に書き出す。模写サイトを選ぶ2つの条件で選ぶとよいかと思います。・自分が好きで、興味があるサイト自分がとても好きで、興味があるサイトは自分の中で作りたいという意欲が湧いてきますし、モティベーションを持続させやすいです。・現在自分が持っているスキルの難易度にあわせる。自分にとって簡単すぎず、難しすぎないサイトを選びましょう。自分の頭で考えつつ、調べたり検索したりすれば試行錯誤しながらも実装できるレベル感。今回わたしはローカライゼーションとHTMLファイルのWordPress化もしたいと思っているので、自分が好きで興味の持てるWordPressで制作された下記のサイトを選びました。https://kfa.org/※こちら掲載許可を頂いております。大枠のレイアウトを紙に書き出す。個人的には紙と鉛筆・ボールペーンでレイアウトを書き出していくのがオススメです。第三者に見せる必要のあるデザインのモックアップではないですし、コーディングを行う前に全体を俯瞰してサイトの大枠の構造をどのようにレイアウトしていくのか自分の頭の中で整理するために手軽に書き出すことができればいいので。ちなみに下記がわたしがレイアウトをざっくと書き出したものになります。いま自分で見ても、ちゃんと見ないと解読できない感じですが(笑)先程書いたように他人に見せるものではないので、サイトの構造の大枠レイアウトをすることで、自分の頭の中が整理できれば良しです。「ヘッダー」「ナビゲーションメニュー」「メインビジュアル」「2カラムセクション」「4カラムセクション」「フッター」などある程度このレイアウトの時点で決めてしまうと後が楽です。次にいよいよコーディングをしていきます。先程紙に書き出したものを見ながら、htmlのマークアップをしていきます。実際のコードを載せながら、模写コーティングを説明している記事がわたしが探した限りあまりないような感じだったので、備忘録も兼ねて実際のコードと共に説明していこうと思います。3コーディング今回わたしはBootstrap4のフレームワークを使って、コーディングをしていこうと考えているのでまずその下準備からしていきます。boilerplate(ベーステンプレート)をダウンロードしてスターターテンプレートのセットアップhttps://startbootstrap.com/previews/bare/この辺りはBootstrap4のフレームワークに関することなので、あまり詳しく触れませんが、下記参考サイトとして挙げておきます。shrink-to-fit=no">bootstrap4、fontawesomeの読込を行い、カスタムcssの読込など最低限の設定を内で行う。href="css/style.css">そして次に</body>1</body>の直前にjQuery、JavaScriptなどの読込設定を行っていく。src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></body></html>次にサイト全体を俯瞰してサイトの基本的な構造をマークアップしていきます。headerがあって、headerの中にnavigation-bar、左側にブランド・タイトルロゴのnavbar-brandがあって、navigation-menuはliタグを使って横揃えで実現できそうだな等当たりをつけていきます。次のセクションはbootstrap4だとcol-3を4つ置いてあげれば出来るでしょう。合計6個のブロック要素を用意しました。class="main-contents"></section><footer></footer>6個のブロック要素をつくった後は、まずheaderの中をマークアップしていきます。ナビゲショーンメニューの部分からマークアップ上記のようなサイトタイトルとナビゲショーンメニューのパターンのウェブサイトはとても多いと思うのですが、スマホ表示の時に下記のように三本線のトグルになるやつですね。この場合Bootstrap4で用意されている下記のnavigation-barのコンポーネントを利用すると非常に時間を短縮してマークアップすることができます。href="#">DONATE</a></li></ul></div></nav></header>詳しいBootstrap4のナビゲーションバー(Navbar)に関しての参考サイトは下記https://cccabinet.jpn.org/bootstrap4/components/navbarナビゲーションメニューの各nav-itemの右にある縦線はborder-rightにて実装。メインビジュアルのスライダーの実装ですが、このコンポーネントもBootstrap4にあるので、そこから実装していきます。サイトで使用されている画像を取得しましょう。Downloader」を使うと簡単です。all」にチェックを入れると、サイトで使われている画像をワンクリックで全てダウンロードすることができます。fixed-top">直前の要素でfixed-topを使って、固定ナビゲーションメニューにしているのでその次の要素であるmain-visualに下記を設定して、ナビゲーションバー分の高さ92pxをmargin-topを使って余白をとる。※この部分意外と嵌りやすい部分なので、注意。92px;}margin-topの設定をcssで行わないと、下記のようにメインビジュアルがナビゲーションメニューの高さ92px分上に食い込んでしまっているように表示されてしまいます。※この部分意外と嵌りやすい部分なので、注意。templateを使い、カスタマイズしていく。そのコードは以下になります。class="sr-only">Next</span></a></div></header>769pxまでの時に表示されるスライダー画像と、769px以下の時に表示されるスライダー画像を違うものに表示させたいので、以下のサイト(英語にはなりますが、良記事。)を参考にしながら、下記のコードを使いました。ライン、線状なのでCSSの設定でこれを丸の状態にしていきます。下記参考にしたサイトBootstrapで画像スライダーを簡単に作るhttps://taroken.org/bootstrap-slider-carousel/http://taroken.mixh.jp/demo/bootstrap-slider/デモhttp://taroken.mixh.jp/demo/bootstrap-slider/下のcssの設定をほどこして、見栄えを整えます。0.8;}次のセクションのvideo-featureに移っていきます。77</p></div></div></section>これが最適なコードなのかどうか分かりませんが、上記のようにマークアップしてみました。(これはこの記事に表示されているコード全部に言えることです。)ただ大きな表示崩れなどはありません。このiframeタグが意外と嵌りやすい部分です。注意点が記されている参考サイトを以下に載せておきます。要素をレスポンシブ対応させる方法https://www.webantena.net/css/iframe-responsive-web-design/上記記事を参考にしながら、下記のようにcssを設定してみました。スマートなマークアップの仕方があるかも知れません。!important;}ではその下のセクションのfeature-itemsを次にコーディングしていきます。これでPC表示時に4カラム、タブレット表示時は2カラム×2、スマホ表示時に1カラムに切り替わってくれます。追加して、2つの子要素を横並びにしてあげます。Bootstrap4のブレークポイントについては下記を参考にしてください。4のレスポンシブWebデザインとそのCSShttps://qiita.com/tonkotsuboy_com/items/7c01460b59c3ca5ee047Bootstrap4で用意されているFlexbox系のクラス名については下記が詳しいので、参考にしてください。href="#">More...</a></P></div></div>上記のように感じで表示されるので、これを同じ要領であと3回繰り返します。実際のコードは下記のようになるかと思います。href="#">More...</a></P></div></div></div></div></section>次のセクションに移りましょう。次のセクションはカラムが2つあります。その2つのカラム、左のカラムは3カラム、右のカラムは1カラムという入れ子状(ネスト)のグリット構造になっています。それなので、まず2つのカラムからマークアップしていきましょう。Bootstrap4の入れ子状(ネスト)のレイアウトに関しては下記URLリンクを参考に。~入れ子(ネスト)~https://niwaka-web.com/bs4_grid/こちらも分かりやすいです。right-col">右カラム</div></div></div></section>上記のようにマークアップしました。「左カラム」はブラウザが768px以下になったら、1カラムに。「右カラム」はブラウザが768px以下になったら、非表示になるように設定します。「右カラム」の非表示はメディアクエリーを使って、下記のようにCSSで設定してあげます。PC表示時に設定していた「左カラム」のボーダーも非表示になるように設定します。none;}}次に左カラムの中に移っていきましょう。1カラム実際のコードは下記のようにマークアップしました。></a></p></div></div></div></div></div></section>次は右カラム部分のマークアップ下記のようにマークアップしました。下のようにコーディングしました。main-contens部分のコードを載せておきます。フッター部分をマークアップしていきましょう。指定してあげて、下記のようにマークアップしてあげれば出来そうです。基本的な構造はこれでOKでしょう。下記のようにコーディングしてみました。AMERICA</p></div></div></footer>formの部分ですが、Bootstrap4に用意されているform-groupというclassを使って、マークアップしていきます。下記のようにマークアップしてみました。icon-small"></i>&nbsp;&nbsp;ContactUs</button></div></div></div></div></footer>Googleの「reCAPTCHA」部分は下記を参考にして実装しました。コピーライト部分に移ります。下記のようにcssをマークアップしました。0px;}縦方向の中央寄せについては下記を参考にしました。使うことが出来ましたが、一行ではない時は違う方法で縦方向の中央寄せをします。テキストの縦方向の中央揃えについてhttps://qiita.com/Shinji-m/items/69a392685699f3ba95fbCSSで上下左右に中央寄せする方法、全部まとめhttp://www-creators.com/archives/391【CSS】要素を上下や左右に中央寄せする簡単な方法https://kuzlog.com/2017/01/11/228/次に下記のクリックすると「スクロールでページトップへ戻ってくれるボタン」を実装しましょう。下記のサイトを参考にしながらカスタマイズしていきます。#2https://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の日本語まとめ作ってみたよ。icon-size-02"></i></a></p>cssは下記のようにしました。子要素にも親要素と同じ高さと幅50pxを設定し、下記のような処理をして一件落着!ハイライトで示している部分が肝となっている部分。align=“middle”どちらか一方だけでは駄目で、両方ともに設定してあげる必要がある。究極は軽トラキャンパー・モバイルハウスと共に移動しながら、多拠点生活を実現するべくWEB関連スキルと情報発信力を身につけるべく勉強中!ちなみに軽トラモバイルハウスは今年の夏に作りましたwWordPressを使って制作したチベット・ネパール曼荼羅専門ショップというお店を約4年前から主にオンライベースで企画・運営しております。ネパールという国から曼荼羅(マンダラ)という仏画、スピリチュアルアートを仕入れて、販売しております。英語が少しできまして、翻訳もしております。直近のお仕事としてはネパールにてベストセラーの全380ページの英語書籍を日本語に翻訳しました。ライフ・ハック情報を発信していきます。30代後半から始めるプログラミングとノマド。