模写 コーディング。 コーディングの実践的な勉強はサイト模写!初心者がするべきやり方

CSSの練習におすすめな模写コーディングとは?|Kredo Blog

模写 コーディング

HTML• CSS• jQuery• Bootstrap• Flexbox 上記の学習を行えば、 最低限のコーディングは行えるようになります。 簡単なWebサイトくらいなら自力で作れるようになるかと。 加えて、PhotoshopやWordPressやPHPを使えれば良いですが、とりあえずは上記の5つで大丈夫です。 コーディングを学習する方法 具体的には、この記事「」のWordPress以外の部分を学習すれば良いです。 実際に僕が独学したときに使った教材が載っているので、参考になると思います。 期間としては、2ヶ月半くらいあれば全て出来るレベルです。 学習しているときに辛くなるときもあるかもしれませんが、続けていればそれなりに出来るようになります。 身構えずに気楽に学習していきましょう。 基礎学習を行っているだけではいけない理由 上記でコーディングの学習方法について解説しましたが、基礎学習を行っているだけという状態はあまり良くないです。 結構やってしまいがちなのですが、初心者の方は特に「インプット」が過剰になりがちですね。 しかし、コーディングのスキルが一番伸びるのは「アウトプット」を行っているときです。 サイトの模写• ポートフォリオサイトの作成• 技術の発信 では、一つずつ解説していきます。 サイトの模写 サイトの模写は、割と有名な学習方法ですね。 現在コーディングを行っている人は、模写をやったことがある人も多いと思います。 具体的にはこの記事「」に書いてあるサイトを模写してみるのが良いかと。 良さげなサイトが揃っているので、初心者の方は参考にしてみると良いですね。 ポートフォリオサイトの作成 ポートフォリオサイトとは自分の実績になるサイトのことです。 僕自身はサイトの模写は飛ばしてポートフォリオサイトを作ってしまった方が効率良いかなと思っています。 理由としては、ポートフォリオサイトを作って、就職なりバイトを始めた方が、効率的にスキルを伸ばせるからですね。 お金をもらいつつ学べるのは、シンプルにコスパ良いです。 実際に僕も、ポートフォリオサイトを作成してから、仕事を始めましたが、かなりコスパ良くスキルを伸ばせています。 最速で仕事をしたいなら、いきなりポートフォリオサイトの作成に入ってしまうのが良いですね。 ポートフォリオサイトの作成方法については、この記事「」を参考に。 技術の発信 実際に僕も、このブログで技術の発信を行っています。 自分がアウトプットした技術って頭に残りやすいし、同じことで困った時に見返すことも出来ますからね。 また、自分が技術を発信することにより、社会貢献も出来るので、メリット多めです。 発信方法としては、ブログ、Qiita、twitterなどがあります。 個人的には、ブログかtwitterがおすすめですね。 まずはtwitterなどでカジュアル発信してみるのが良いかと思います。 コーディング独学後にやるべきこと【実際に働いてみよう】 コーディングの独学後は、実際に働いてみるのが良いと思います。 基礎学習から実践レベルのコーディングスキルを身に着けるためには働いてみるのが一番効率良いですからね。 僕自身、基礎学習期間よりむしろ実務経験を積んでからの方がスキルは伸びています。 具体的に働く方法としては、以下の3つがあります。 LPなどのコーディング案件多め。• クラウドワークスと合わせて登録しておけば案件も見つかりやすい。 どちらも無料かつ5分ほどで登録できるので、この機会に登録しておきましょう。 就職orバイト Web制作会社にコーダーとして、働かせてもらう方法ですね。 お金をもらいつつ、教えて貰いたい方には一番良い方法です。 実際に制作会社で働いているから分かりますけど、コーダーはかなり少ないですね。 人手不足なので、割と簡単に就職なりバイトなり決まるかと。 10社くらいに応募してみれば、ほぼ確実に仕事出来るようになると思います。 ポートフォリオサイトがあると、受かる確率上がるので、応募前に作成しておいた方が良いです。 制作会社へ営業する 意外と知られていませんが、制作会社に営業するという方法もあります。 僕自身、制作会社へ営業した経験がありますが、意外と仕事の話をいただけたので、挑戦してみるのもありですね。 しかし、個人的には制作会社で実務経験を積んでからの方が良いかなと思います。 制作会社で働けば、詰まった時にいつでも聞けるし、技術も盗めるのでシンプルにコスパ良いです。 「いきなりフリーランスになりたい!」って人はやってみても良いかと。 具体的な営業方法については、この記事「」を参考に。 コーディングで人生を豊かにしよう 上記で紹介したように、コーディングのスキルを身に着ければ多様な働き方をすることが出来ます。 人生の自由度を上げたい方は、ぜひこの機会に学習してみていただければなと。 具体的な学習方法については先述したように、この記事「」のWordPress以外の部分です。

次の

【初心者】初めてのLP模写のやり方と所感

模写 コーディング

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のコーディングを自力でできるようにするするのは、難しそうに思われるかもしれません。 しかし模写コーディングであればハードルが低いですし、お金をかけずにできるのでおすすめです。 ぜひ模写コーディングで練習をして、実践力を身につけましょう。

次の

コーディングの実践的な勉強はサイト模写!初心者がするべきやり方

模写 コーディング

この記事の目次• 模写だけでは実務レベルにならない オススメって言ったのに実務レベルにならない? と思うかもしれないですが、実はそうなんです……。 なぜなら実際にコーディングの仕事をする場合、参照するのはPhotoshopやIllustratorで作られたデザインデータ。 実際の業務では、そこから必要な画像を切り出したりする作業も含まれているからです。 模写の場合、参照するのはすでにでき上がっているものなので、必要な画像などはそこからダウンロードすればいいだけ。 本来実務でやる部分をすっ飛ばしている状態です。 模写「だけ」では 実務を完璧にこなすことはできません。 そこは念頭に置いておきましょう。 それでも模写をする意味とは? それでも! それでも模写は意味があるんです! 模写をすることにより、HTMLやCSSのコーディングの流れや、それぞれの言語のルールの確認、プロパティの種類を知ることができます。 PhotoshopやIllustratorのデータを用意するよりも手軽にできるし、何よりすでにでき上がっているので「答え」があります。 実務レベルの練習をする前の段階、HTML・CSS覚えたての状態での練習にはもってこいの方法なのです。 決して無駄ではないんです! 模写での学習効果をUPさせる3つのポイント 模写は初心者の練習にもってこいですが、ただ単にコードを丸ごと写したり、なんとなくやってみたりするだけではなかなか上達しません。 下記の3つのポイントを意識して、模写でしっかりスキルを身につけていきましょう。 ルールを決める やみくもにやるのではなく、ルールを決めましょう。 一般的なコーディングのルールというより、これからやる 模写でのルールです。 例えば、「今回は流れを掴むために、細かい部分ではなくレイアウトだけを真似しよう」とか、「今回はさらにレベルアップするために完コピしよう」とかです。 模写は1px単位までぴったり合っていないと絶対ダメ、とは言いません(実務レベルではそこまで求められますが)あくまでもこれは練習です。 その目的をしっかり持って取り組めば、たとえ1pxずれていたとしても無駄にはならないのです。 例として、 レベル別の模写ルールを作ってみました。 こんな感じで自分ルールをつけながら、段階的に厳しくしてレベルアップしていきましょう。 入門レベル 作成の流れを掴むために、レイアウトだけ真似をする。 画像はダウンロードする• 文字はコピペする• フォントの種類はツールで調べる• 1px単位で真似する• 背景画像もちゃんと入れる• 角丸やフォントの大きさも完璧に同じにする• 要素の意味を考え、適切なHTMLタグを使う• レスポンシブも完璧に 要素を分解して考える 模写というよりコーディングそのものに言えることですが、デザインが何で構成されているのかを分解して考えるのが重要です。 それはこういうボタンの見た目だけでなく…… 下記のような、全体のレイアウトも同様です。 コーディング初心者にありがちなのが、 ひとつひとつを丁寧に作り込みすぎてなかなか先に進まないパターンです。 確かに最終的にそこまでの作り込みは必要ですが、最初からそれをやらなくてもOKです。 最初は全体をざっくりと分解して、そこからだんだん細かく分解していくのが、効率の良いコーディングの秘訣です。 絵を描く時にアタリをつけるように、文章を書くときにプロットを作るように、少しずつ完成に近づけていくことを意識してみましょう。 わからなかったらググる 初心者ですから、どうやったらこのレイアウトを実現できるんだろう……とわからなくなることもたくさんあると思います。 そんなときはGoogle先生に頼りましょう。 テストではないので、どんどん調べてOKです。 むしろこの調べる作業は、実務の練習につながり繋がります。 コーディングは実務中にわからないことを調べながら進めていくものだからです。 HTMLやCSSの勉強の際、いろんなブログを見て「 暗記しなくていい」と書かれていたことを思い出してみてください。 調べることもスキルのうちと解説されていませんでしたか? まさにそれが練習できるチャンス、どんどん調べて 検索力を身につけていきましょう。 調べてもどうしてもわからなかったら、最悪「答え(模写しているサイトのソース)」もありますので、そちらを参照してみてもいいでしょう。 ただし、次も同じような部分で詰まった時のために、どう調べれば出てくるのかを考えながら参照するとベストです。 課題にぴったり!レベル別模写サイト 模写のポイントがわかればあとはやるだけ! ナナミオススメの 模写課題サイトを選んでみたので、ぜひチャレンジしてみてくださいね。 なおこれらのサイトは、Webデザインの参考サイトから抜粋しました。 LP(ランディングページ)などのペライチサイトからはじめてみましょう。 こちらのLPはレイアウトがシンプルながら、 positionなどのちょっとコツがいるCSSも使われているので練習にぴったりです。 こちらのサイトはまさにWebサイトの基本を抑えているな、というレイアウトでおすすめです。 ここまでくるともうHTMLやCSSだけでは完全再現は難しいかもしれないですね……。 コーディング練習は楽しいのが一番。 自分が好きなサイトや面白そうなサイトを模写するのはテンション上がると思うので、ぜひいろんなサイトを模写してみてください。 しかしそれではまだゴールとは言えません。 次はPhotoshopやIllustratorを使いこなし、 実務レベルでのコーディングの練習へとステップアップしていってくださいね。

次の