模写 コーディング。 【効率的】コーディングを独学する方法【現役コーダーが教える】

模写コーディングのやり方とポイントを徹底解説!

模写 コーディング

サイトの模写コーディングとは? まず模写とは何かという事ですが、 実在するホームページを見た目通りに再現していく事です。 デザインはあり、デベロッパーツールなど使えばコードも見れますが、極力コードは見ないようにして書いていきます。 Progateは環境構築の必要がありませんが、模写はまず環境構築から始めなければいけないので、 Progateに比べてかなり実践的な勉強法となります。 模写の前に写経もおすすめ また模写と似たような物で写経と呼ばれる勉強法もあります。 写経は模写と違い、 本などに書いてあるコードを丸写しします。 模写はデザインを見て自分で考えながらコードを書いていくのに対して 写経は丸写しなのであまり意味がないようにも思えますが、Progateからいきなり模写は少々ハードルが高いかも知れないので、まずは写経をして テキストエディタを使ってコードを書くという事に慣れるのもアリかと思います。 自分が最初にWeb制作のために購入した本がこちらです。 リンク この本で3つのサイトを写経する事が出来ます(写経用の本という事ではありません) 1つ1つの意味を理解する必要はないので、1回目は全て丸写しして見本通りになればOK あとはもう少し理解したいと思ったら、もう一度分かる範囲で理解を進めながらもう一度写経してみるとだいぶ慣れてくると思います。 実務では使わないような事も多く書いてあるので、 全てを理解する必要は全くありません。 あくまでもコードを書く事に慣れ、実際に見本通りになることを実感するのが目的だと思いましょう。 模写におすすめのサイト それではいざ模写をやろうと思った時、今の自分がどのくらい出来るのかがまず分からないと思います。 自分も模写するサイト選びでだいぶ苦労しました。 その中でおすすめなのが以下のサイトです。 ColorPick Eyedropper(カラーコードを取得)• WhatFont(フォント情報を取得) デベロッパーツールは極力使わない デベロッパーツールを使えばコードを見る事が出来ますが、極力カンニングはしないで進めましょう。 ただしどうしても分からなかったら部分的に見ちゃいましょう。 自力で解決出来ればいいですが、最初のうちは見ないと分からない事が多いと思います。 出来ればレスポンシブも挑戦! 今時レスポンシブ対応になっていないサイトはほとんどないので、出来ればレスポンシブにも挑戦してみましょう。 実務では必須なので、最初の模写では少々難しいかも知れませんが必ず出来るようになっておきましょう。 ホバーアニメーションやjsは後回し ボタンにカーソルを乗せると色が変わったり、jsを使ったハンバーガーメニューなどは後回しでいいかと思います。 まずは「見た目だけ」再現出来るようになればOKです。 完成した後にやる事 一通り模写が完了したら、デベロッパーツール でコードをみてみましょう。 見た目が同じになってもコードはかなり違うと思います。 デベロッパーツールを使ってコードを見る事で「こういうやり方があるのか」と勉強にもなりますし、デベロッパーツール自体は模写中はあまり使わない方が好ましいですが、 実務ではめっちゃ使うのでここで慣れておくのもいいかと思います。 どのくらい模写をすればいいのか? 模写はコーディングスキルをアップさせるのにとても有効な手段ですが、どのくらいやればいいのか気になるところかと思います。 私は5〜6サイトだったかと思いますが、人によっては10サイト以上模写する人もいます。 模写卒業の目安は? 模写を卒業する目安としては、 iSaraのLPを模写出来るようになればOKです。 ここではレスポンシブ、ホバーアニメーション、js(ページトップボタン、アコーディオンメニュー)なども完成させましょう。 私はiSaraの模写は2回ギブアップして3回目でクリアしました。 ギブアップしたときは一旦勉強に戻ってまた挑戦みたいな感じです。 iSaraのLPは難易度的にはそれほど高くありませんが、 とにかくボリュームが多いです。 2回目のギブアップはボリュームの多さに疲れてしまったからでした。 ボリュームが多いので、Sassを使ってファイルを分割する事が出来ればコードが見やすくなります。 私もiSaraの模写の時にSassを使い始めたので、模写を何回かやったらSassも勉強することをおすすめします。 Sassは実務では必須なので、早い段階で習得しちゃいましょう。 全てマスターしようとすると大変ですが、よく使うものだけでも覚えておけばOKです。 Sassについては以下の記事を参照下さい。 またiSaraの模写は 条件付きで実績としてポートフォリオなどに載せていいと代表のケースケさんが許可して下さっています。 せっかく多くの方が のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。 要は、「ご自身の制作実績として公開してOK」です。 以上です。 模写はWeb制作の勉強において1つの壁とも言えるかも知れないので、ここはがんばって乗り越えましょう!.

次の

ポートフォリオに模写コーディングを入れるべき?架空サイトの作り方

模写 コーディング

サイトの模写コーディングとは? まず模写とは何かという事ですが、 実在するホームページを見た目通りに再現していく事です。 デザインはあり、デベロッパーツールなど使えばコードも見れますが、極力コードは見ないようにして書いていきます。 Progateは環境構築の必要がありませんが、模写はまず環境構築から始めなければいけないので、 Progateに比べてかなり実践的な勉強法となります。 模写の前に写経もおすすめ また模写と似たような物で写経と呼ばれる勉強法もあります。 写経は模写と違い、 本などに書いてあるコードを丸写しします。 模写はデザインを見て自分で考えながらコードを書いていくのに対して 写経は丸写しなのであまり意味がないようにも思えますが、Progateからいきなり模写は少々ハードルが高いかも知れないので、まずは写経をして テキストエディタを使ってコードを書くという事に慣れるのもアリかと思います。 自分が最初にWeb制作のために購入した本がこちらです。 リンク この本で3つのサイトを写経する事が出来ます(写経用の本という事ではありません) 1つ1つの意味を理解する必要はないので、1回目は全て丸写しして見本通りになればOK あとはもう少し理解したいと思ったら、もう一度分かる範囲で理解を進めながらもう一度写経してみるとだいぶ慣れてくると思います。 実務では使わないような事も多く書いてあるので、 全てを理解する必要は全くありません。 あくまでもコードを書く事に慣れ、実際に見本通りになることを実感するのが目的だと思いましょう。 模写におすすめのサイト それではいざ模写をやろうと思った時、今の自分がどのくらい出来るのかがまず分からないと思います。 自分も模写するサイト選びでだいぶ苦労しました。 その中でおすすめなのが以下のサイトです。 ColorPick Eyedropper(カラーコードを取得)• WhatFont(フォント情報を取得) デベロッパーツールは極力使わない デベロッパーツールを使えばコードを見る事が出来ますが、極力カンニングはしないで進めましょう。 ただしどうしても分からなかったら部分的に見ちゃいましょう。 自力で解決出来ればいいですが、最初のうちは見ないと分からない事が多いと思います。 出来ればレスポンシブも挑戦! 今時レスポンシブ対応になっていないサイトはほとんどないので、出来ればレスポンシブにも挑戦してみましょう。 実務では必須なので、最初の模写では少々難しいかも知れませんが必ず出来るようになっておきましょう。 ホバーアニメーションやjsは後回し ボタンにカーソルを乗せると色が変わったり、jsを使ったハンバーガーメニューなどは後回しでいいかと思います。 まずは「見た目だけ」再現出来るようになればOKです。 完成した後にやる事 一通り模写が完了したら、デベロッパーツール でコードをみてみましょう。 見た目が同じになってもコードはかなり違うと思います。 デベロッパーツールを使ってコードを見る事で「こういうやり方があるのか」と勉強にもなりますし、デベロッパーツール自体は模写中はあまり使わない方が好ましいですが、 実務ではめっちゃ使うのでここで慣れておくのもいいかと思います。 どのくらい模写をすればいいのか? 模写はコーディングスキルをアップさせるのにとても有効な手段ですが、どのくらいやればいいのか気になるところかと思います。 私は5〜6サイトだったかと思いますが、人によっては10サイト以上模写する人もいます。 模写卒業の目安は? 模写を卒業する目安としては、 iSaraのLPを模写出来るようになればOKです。 ここではレスポンシブ、ホバーアニメーション、js(ページトップボタン、アコーディオンメニュー)なども完成させましょう。 私はiSaraの模写は2回ギブアップして3回目でクリアしました。 ギブアップしたときは一旦勉強に戻ってまた挑戦みたいな感じです。 iSaraのLPは難易度的にはそれほど高くありませんが、 とにかくボリュームが多いです。 2回目のギブアップはボリュームの多さに疲れてしまったからでした。 ボリュームが多いので、Sassを使ってファイルを分割する事が出来ればコードが見やすくなります。 私もiSaraの模写の時にSassを使い始めたので、模写を何回かやったらSassも勉強することをおすすめします。 Sassは実務では必須なので、早い段階で習得しちゃいましょう。 全てマスターしようとすると大変ですが、よく使うものだけでも覚えておけばOKです。 Sassについては以下の記事を参照下さい。 またiSaraの模写は 条件付きで実績としてポートフォリオなどに載せていいと代表のケースケさんが許可して下さっています。 せっかく多くの方が のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。 要は、「ご自身の制作実績として公開してOK」です。 以上です。 模写はWeb制作の勉強において1つの壁とも言えるかも知れないので、ここはがんばって乗り越えましょう!.

次の

HNTは、最初に、どんなウェブサイトを、どのように制作したか?html, css, jQueryによるウェブサイトの模写コーディング

模写 コーディング

CSSの基礎知識についてはちゃんと学習したけど、まだ自分ではコーディングできない… 参考書などでCSSを一通り学習したものの「自分で0からWebサイトを制作するのは難しい」と感じている方もいらっしゃるのではないでしょうか。 CSSをマスターするためには、知識を覚えるだけでなく、自分で手を動かしてWebサイトを制作することも必要です。 ただ 「いきなり自分でWebサイトを制作するのはハードルが高い…」とも感じてしまいますよね。 そのような方は、 既存サイトの模写コーディングをして、CSSの練習するのがおすすめです。 この記事では、CSSの練習におすすめな模写コーディングについて解説します。 主に模写コーディングのやり方や、模写コーディングにおすすめなサイトを紹介するので、ぜひ読んでみてください。 コーディングのやり方が理解できる• デザイン力が身につく• 新しい知識も身につく• 自分の実力を把握できる CSSの練習として模写コーディングをやれば、勉強になる部分がたくさんあります。 コーディングのやり方が理解できる おすすめする一つ目の理由に、HTMLとCSSのコーディングのやり方が理解できることが挙げられます。 HTMLとCSSを一通り学習したものの 「このプロパティはどのように使えばいいの?」「どんなコーディングをすれば綺麗なWebサイトが作れるの?」と疑問に感じたことはないでしょうか。 知識をインプットするだけでは学んだことを実践するのが難しいですが、模写コーディングで手を動かすことで「こうしたい時はこのプロパティを使えばいいんだ!」と、段々やり方がわかってきます。 0からオリジナルのWebサイトを作るのはハードルが高いですが、模写コーディングによる練習は取り組みやすいです。 デザイン力が身につく 模写コーディングでCSSの練習をすることは、デザイン力の向上にもつながるのです。 模写コーディングにはお手本となるWebサイトが必要ですが、模写するWebサイトを探していく過程で、様々なWebサイトに触れられます。 あらゆるWebサイトを見ていく中で 「このようなデザイン方法があるんだ!」「このWebサイトの配色、バランスが取れているな」と、デザインに関する刺激を受けられるでしょう。 そして実際に模写コーディングで練習をすることで、デザイン性の高いWebサイトを作るスキルが身についていきます。 新しい知識も身につく 「HTMLとCSSについてはしっかりと勉強してきた!」と思っていても、 模写コーディングをしてみると、自分の知らなかったコーディング方法やプロパティに遭遇することが多いです。 またすでに学習した事柄であっても「これはどういう意味なんだろう…」と、理解しきれなかった部分もあるかもしれません。 しかし模写コーディングでCSSを練習していく中で、 参考書を読むだけでは理解できなかった部分も理解できるようになる場合もあります。 参考書を読むだけでなく、実際に手を動かして練習することで身に付く知識もあるのです。 自分の実力を把握できる 実際に模写コーディングでCSSの練習をしていると、自分のコーディングの実力を把握できます。 模写コーディングでWebサイトを制作することによって、自分のできている部分と苦手な部分が見えてきます。 コーディングをしていて「難しい」「意外とできていない部分が多い…」と思うこともありますが、 CSSコーディングのスキルを上達させるためにも、自分の実力を知ることは重要です。 模写コーディングでCSSの練習をする際の注意点 CSSの練習で模写コーディングをする際、いくつか注意しなければいけない点があります。 最初はLPの模写がおすすめ• デベロッパーツールは極力使わない• 色やフォントは調べてもOK• 文字の大きさなどは細かくこだわらない• レスポンシブ対応にもする CSSのスキルをアップさせるためにも、注意点を守った上で練習を重ねていきましょう。 最初はLPの模写がおすすめ LPとはランディングページ(Landing Page)の略で、訪問者が最初にアクセスする縦長のページを指します。 LPの模写コーディングであれば、複数のページを模写する必要がありませんが、縦長なレイアウトなので練習になる量も丁度良いです。 また縦長ゆえに、ページ全体の構成を把握する力も身につきます。 LPは検索すればたくさんヒットするので、練習したいサイトを探してみましょう。 デベロッパーツールは極力使わない デベロッパーツールとは、そのサイトがどのようなコーディングで作られているかを表示してくれる機能です。 デベロッパーツールは便利な機能ですが、 模写コーディングでは基本的に自力でコーディングするようにしましょう。 もしデベロッパーツールを見ながら模写コーディングをすると 「ここはどうすれば再現できるんだろう…」と、自分の頭で考えて組み立てる力が身につきません。 わからない部分があっても自分で色んなコードを試したり、Google検索で解決方法を調べることによって、自力でコーディングできるようになるのです。 デベロッパーツールは模写コーディングが終わった後の答え合わせか、どうしてもわからない時の最終手段として使いましょう。 色やフォントは調べてもOK 模写コーディングは自力でやることが基本ですが、Webサイトに使われている色やフォントは調べてもOKです。 色やフォントの判別は難しいので、その際はデベロッパーツールや調査ツールを使って調べましょう。 文字の大きさなどは細かくこだわらない 文字や画像の大きさなどは、細かくこだわらなくても大丈夫です。 よほど大きさがずれているのでなければ、大きさが違うことによってレイアウトが崩れることはないので、おおよそのサイズを予想してコーディングしていきましょう。 レスポンシブ対応にもする 現在はスマホやタブレットからアクセスする人も多いので、PCだけでなくスマホやタブレットにも柔軟に対応している(=レスポンシブ対応)サイトの需要が高いです。 なので、 模写コーディングをする際はレスポンシブ対応のサイトを作りましょう。 表示が切り替わるラインはおおよそで大丈夫ですが、現在はスマホユーザーが多いので、せめてスマホ表示には対応させましょう。 模写コーディングの流れ 模写コーディングは、以下の流れて行います。 コードの書き方がどのように異なるか• 高さや幅に大きな相違はないか• レスポンシブにしたら崩れないか それぞれの点について解説します。 コードの書き方がどのように異なるか 模写コーディングをし終えて、見た目はちゃんと再現できていても、コードの書き方が異なる場合は多いです。 例えばdivタグの使い方や、CSSでのセレクタの指定方法など、その特徴はコーディングする人によって大きく異なります。 コードの書き方の違いに着目すれば、見た目は同じ結果でも 「この書き方の方がより効率が良いかも!」「こういうプロパティの使い方があったんだ!」と、新たな発見があるはずです。 高さや幅に大きな相違はないか 画像などの高さや幅に大きな相違がないかもチェックしましょう。 数px単位の誤差は気にしなくても大丈夫ですが、あまりにも大きさが違いすぎるとレイアウトが崩れるので、気をつけましょう。 レスポンシブにしたら崩れないか 「PC表示では綺麗に表示されるけど、スマホ表示にしたらデザインが崩れる…」というのはよくあるパターンです。 具体例としては、スマホ表示にしたら「画像が切れて表示される」「そもそもCSSが聞いていない」という場合が多いです。 レスポンシブ対応もデベロッパーツールで確認できますので、スマホ表示でも問題なく表示されるかをチェックしましょう。 CSSの模写におすすめなサイト 最後に、CSSの模写コーディングを始めたい方に向けて、おすすめなサイトを紹介します。 Write• FLOWER• PAS-POL どれもCSS初心者におすすめなサイトなので必見です。 Write は白を基調とした、非常にシンプルなサイトです。 画像やテキストの配置も難しい配置ではないので、コーディング初心者でもプレッシャーなく取り組めます。 FLOWER はスマホアプリのLPサイトです。 divタグの設定や横(縦)並びの配置に苦手意識がある方に向いています。 ページの情報量も多すぎず少なすぎない程度なので、取り組みやすいです。 PAS-POL は「上の2つのサイトよりも少し難しめのサイトにチャレンジしたい!」という方におすすめです。 ヘッダーやフッターのデザイン、ボタンの配置、テキストの揃え方など、コーディングしていくうちに様々なことが学べます。 まとめ:模写コーディングをしてCSSを練習しよう! 今回は、CSSの練習方法としておすすめな模写コーディングについて解説しました。 CSSのコーディングを自力でできるようにするするのは、難しそうに思われるかもしれません。 しかし模写コーディングであればハードルが低いですし、お金をかけずにできるのでおすすめです。 ぜひ模写コーディングで練習をして、実践力を身につけましょう。

次の