【初学者必見】挫折しない！コーディングの効率的な学習方法&サンプルコード

2020年5月21日 01:57

以前、コーディングの技術を身につけるためのオススメの参考書やリファレンスを紹介しました。
実際に学習を進めてみて、感触はいかがでしたでしょうか。

学習を始めたばかりの方には、難しい内容だったかもしれません。

ちなみに前回のnoteはこちらです。

そこで今回は、初学者のみなさんに向けて、参考書の前置きとなるnoteを書くことにしました。

これまで僕が200人以上の初学者の方をサポート・メンターしてきた経験をもとにして、実際に効果があった学習方法を説明していきます。

このnoteを読めば、参考書の学習がスムーズになるはずです。

ぶっちゃけ、コーディングってなんなの？

ぶっちゃけ、コーディングってなんなの？Webデザイナーの仕事を理解する

Webデザイナーの仕事をざっくりと分けると以下のふたつ。

①. Adobeのソフトを使ってデザインカンプを制作
②. デザインをもとに、ブラウザで表示できるようにする

今回の本題であるコーディングは、②の部分です。

まずは、コーディングにはどんな知識が必要なのか、おさらいしてみましょう！

htmlとは

HTML
Webサイトの骨組みとなる言語です。
段落や見出しや表を定義したり、画像やリンクを挿入することができます。
デザインにこだわらなければ、HTMLだけでもWebサイトを作成することはできます。

CSSとは

CSS
Webサイトの見栄えを整えるための言語です。
例えば、色をつけたり、文字を装飾したり、背景をつけたりします。
画像を使わず、CSSだけで簡単なアイコンなどを作ることもできます。

Jsとは

JavaScript
Webサイトに動きを加えるための言語です。
HTMLやCSSだけでは表現できないことを補う役割を持ちます。
例えば、画像を動かすスライダーや、モーダルウィンドウなどがあります。
以前はCSSだけで表現できることは限られていたため、JavaScriptを使う機会が多かったですが、CSS3の登場やブラウザの進化によってCSSだけで表現できること増えてきました。

以上、HTML/CSS/JavaScriptの3つがコーディングに必要な知識です。
厳密には補足が必要ですが、まずは大枠を理解して、
細かい部分や例外などは後からゆっくり覚えていきましょう。

以上の知識をもとにして、コーディングを効率よく学ぶ方法を説明します。

HTMLタグは全部覚えなくていい！

HTMLタグは110個覚える必要はない！初学者が覚えるのは5つのタグのみ

HTMLタグは、今現在110種類ほどあると言われています。
それを全て覚えるとなると一苦労ですよね・・・。

実は、最初から全部を覚える必要はありません。
まず覚えて欲しいHTMLはたったの5つです！！

初学者に覚えて欲しいHTMLタグは5つ！！

残りの100種類のHTMLタグは徐々に覚えていけばOKです。

それでは、タグを詳しく見ていきましょう。

html最低限

それぞれのタグについて詳しく説明していきます。

1. hXタグ　(Xは数字)
hはHeading（ヘディング）の略です。
h1, h2, h3, h4, h5, h6...などというタグは、見出しを表す際に使います。
ブラウザにページ内のコンテンツ構成を正しく伝えるために使います。 <h1>が最上位の見出し（大見出し）で、以下数字が小さくなるにつれて下位の見出し（小見出し）となります。
h1~h6は、タイトルで使うということを覚えておけば大丈夫です。
HTMLの中では、次のように書きます。

<h1>これが大見出しです</h1>

2. pタグ
pはParagraph（パラグラフ）の略です。
ブラウザに「これは文章ですよ」ということを伝えるために使います。
HTMLの中では、次のように書きます。

<p>これは文章ですよ</p>

3. aタグ
aはAnchor（アンカー）の略で、リンクを指定します。
aタグ＝リンクと覚えてください。
自分のサイトの中だけではなく、他のサイトに飛ばこともできます。
HTMLの中では、次のように書きます。

<a href="sample.html">サンプルページへのリンクになります。</a>

ブラウザでは、以下のように表示されます。

4. imgタグ
imgはImage（イメージ）の略です。
タグの名前から分かる通り、画像を表示させる時に使います。
HTMLの中では、次のように書きます。

<img src="sample.jpg">

5. divタグ
divタグは、中に入っているタグをグループ化するために使います。
単体では意味を持たないタグですが、非常に重要なものです。
divタグでグループ化して、「class」で名前を付けることで、グループにCSSで装飾を加えることができるようになります。
例として、今まで紹介したタグをグループ化してみましょう。
HTMLの中では、次のように書きます。

<div class="box01">
    <h1>これが大見出しです</h1>
    <p>これは文章ですよ</p>
</div>

<div class="box02">
    <a href="sample.html">サンプルページへのリンクになります。</a>
    <img src="sample.jpg">
</div>

覚えて欲しいHTML　まとめ

- h1~h6はタイトル
- pは文章
- aはリンク
- imgは画像
- divはグループ

CSSをどのようにして学習するか

HTMLよりもCSS-jQueryの学習時間を割こう

HTMLよりもCSSに学習時間を割いて欲しいと考えています。
理由は、HTMLと比べてCSSの方が圧倒的に難しく、習得に時間がかかるからです。

私が独学をしていた際も、paddingとmarginの違いや、positionの考え方、floatの概念などには頭を抱えました。。。
ではCSSを、どのように学習すれば良いのでしょうか？

結論から言うと、CSSを学ぶ一番の近道は模写や実務です！！
未経験でいきなり実務は難しいと思うので、模写についてお伝えしていきます。
模写の学習方法は、以前書いたnoteが参考になると思います。

CSSに関しては、残念ながら「これだけ覚えればOK！」という近道はありません。まずは特に重要なプロパティだけお伝えします。

css最低限

1. font-size … 文字の大きさを指定します。
2. margin … 要素の外側の余白を指定します。
3. padding … 要素の内側の余白を指定します。
4. display … 要素の表示方法を指定します。

詳しい指定の方法は、多くの書籍やサイトがありますので割愛します。

模写だけでなく、自分で作ったデザインをコーディングするのもいいかもしれません。とにかく手を動かして、作りながら学んで欲しいです。

オススメの学習方法は次の手順です。

1. 模写をしたいサイトをひとつ選ぶ
2. 対象のデザインを見ながら、HTMLを組む
3. HTMLが組めたらclassを付けて、CSSを書く
4. 調べてもCSSの書き方が分からない時は、デベロッパーツール(*)でカンニングしてOK！

(*)デベロッパーツールとは、ブラウザで表示しているページのHTMLやCSSを確認・編集できる便利なツールです。
お使いのブラウザで、確認したいページを開いた状態で以下のショートカットで表示できます。
Windowsの場合 … 「F12」または「Ctrl + Shift + I」
Macの場合 … 「command＋option＋I」

はじめは写経に近い形でもいいので、とにかく手を動かしましょう。
慣れてきたら、徐々に意識して欲しいポイントがあります。

- 必ず最後まで模写をやり終えること
- 同じサイトでもいいので、何回も模写をすること
- 回数を重ねたら、できるだけデベロッパーツールを見ずに、自力でコーディングをしてみること

ということです。

「もうデベロッパーツールを見なくても、デザインだけを見てイチからコーディングできるぞ！！」というレベルを目指して、何回も、何十回も繰り返し頑張って頂きたいです。
(カラーコードの取得や、フォントの確認などはデベロッパーツールを使用してOKです。)

このレベルに達すると、独学だけでも確かな実力が身についています。

ただ、一人ではモチベーション的になかなか続けられないという方や、模写の途中で挫折してしまったという方は、スクールと併用して学習を進めるといいかもしれません。

私が運営するWEBデザインスクールにて無料のメンターもしています。

現役フリーランスの講師たちがメンターとしてサポートしてくれるので、着実に学習を進めることができます。

JavaScriptはどうやって学ぶの？

最後にJavaScirptについて説明していきます。
JavaScirptに関しては、jQueryの学習に重きを置くことをオススメします。

jQeuryとは、難解なJavaScriptの記述を簡単に書くための便利なモノとイメージしてください。（厳密には、JavaScriptで作成されたライブラリです。）
初学者でも簡単に扱えるように開発されたもので、JavaScriptを使うよりも簡単にコードを書くことができます。

今回は、jQeuryについてあまり深く掘り下げませんが、「こういうことができるんだ」ということをざっくり理解して頂くために、次のセクションにサンプルをご用意しました。

試しにコーディングをしてみよう！

実際にサンプルコードを書いてHTML-CSS-jQueryに触れてみる

ここまで読んでいただきありがとうございます。
これまでに、HTML/CSS/JavaScript(jQuery)の概念や、特に押さえるべきポイントをお伝えしてきました。

ここからは、実際のコードを参考に解説していきます。

今回は、「Qを押すとAが表示される」簡単なQ＆Aのページを実装します。
サンプルのXDをご用意したので、ダウンロードして実際に手を動かしてみてくださいね。

デザインはこちらです。

では実際にコーディングしていきましょう！
手順通りに作業してみてください。

手順

①index.htmlファイルを作成する。
以下が最低限のベースとなるHTMLです。
＊htmlに特化していないエディタでも、文字が入力できればhtmlファイルを作成、編集することが可能です。詳しくは割愛します。

<!DOCTYPE html>
<html lang='ja'>

<head>
   <meta charset="utf-8">
   <title>
       ページのタイトルを入力します
   </title>
</head>

<body>
       ページのコンテンツを入力します。
</body>

</html>

②HTMLの骨格を作る。
<body>タグの中に、コンテンツを記述します。

   <h1>
       Q&A
   </h1>
   <div>
       <div>
           Q. 質問を押すと答えが表示されます。
       </div>
       <div>
           A. 上のQを押したらここが表示されます。
       </div>
   </div>

③HTMLにclassを付ける。

   <h1 class="title">
       Q&A
   </h1>
   <div class="wrap">
       <div class="box01">
           Q. 質問を押すと答えが表示されます。
       </div>
       <div class="box02">
           A. 上のQを押したらここが表示されます。
       </div>
   </div>

④CSSで装飾する。
<head>タグの中に<style>を記述します。

<style>
       .title {
           font-size: 40px;
           font-weight: bold;
           text-align: center;
       }

       .wrap {
           margin-top: 40px;
           width: 600px;
           margin-left: auto;
           margin-right: auto;
       }

       .box01 {
           font-weight: bold;
           font-size: 20px;
           padding: 28px;
           background-color: #F0F0F0 ;
           cursor: pointer;
       }

       .box02 {
           font-weight: bold;
           font-size: 20px;
           padding: 28px;
           border: 1px solid #F0F0F0 ;
       }
   </style>

③jQuery本体を読み込む。
jQueryを使うためには本体を読み込む必要があります。
今回は<head>タグの中でCDNで読み込みます。詳しくは割愛します。

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

④jQueryを記述する。
[Q]を押したら[A]を表示させる、という内容を記述しています。

   <script type="text/javascript">
       $('.box02').hide();
       $('.box01').click(function() {
           $('.box02').toggle();
       });
   </script>

⑤ブラウザで確認する。
実際に動くかどうかチェックします。
「index.html」をブラウザにドラッグ＆ドロップしてみてください。

こちらが完成したHTMLです。

<!DOCTYPE html>
<html lang='ja'>

<head>
   <meta charset="utf-8">
   <title>
       Q&Aのページです。
   </title>
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
   <style>
       .title {
           font-size: 40px;
           font-weight: bold;
           text-align: center;
       }

       .wrap {
           margin-top: 40px;
           width: 600px;
           margin-left: auto;
           margin-right: auto;
       }

       .box01 {
           font-weight: bold;
           font-size: 20px;
           padding: 28px;
           background-color: #F0F0F0 ;
           cursor: pointer;
       }

       .box02 {
           font-weight: bold;
           font-size: 20px;
           padding: 28px;
           border: 1px solid #F0F0F0 ;
       }
   </style>
</head>

<body>
   <h1 class="title">
       Q&A
   </h1>
   <div class="wrap">
       <div class="box01">
           Q. 質問を押すと答えが表示されます。
       </div>
       <div class="box02">
           A. 上のQを押したらここが表示されます。
       </div>
   </div>
   <script type="text/javascript">
       $('.box02').hide();
       $('.box01').click(function() {
           $('.box02').toggle();
       });
   </script>
</body>

</html>

実際に動きましたでしょうか？
完成したら、ぜひCSSを編集して、ご自身の好みで色や装飾を変えてみてください。

デモサイトはこちらです。
https://www.remotepaisen.com/sample-code/q-a.html

まとめ

まとめコーディングの効率的な学習方法とサンプルコード

最後まで読んでいただきありがとうございます！
初学者の皆さんに向けてコーディングの学習方法をお伝えし、サンプルを交えて実際にコードを書いてきました。内容はいかがでしたでしょうか。

今回のnoteのまとめはこちらです。

ポイント①　最優先で覚えるHTMLのタグは5つ！！
ポイント②　CSS重要プロパティを覚えたら、模写をしながら覚える
ポイント③　JavaScriptよりも簡単なjQueryを扱えるようになろう

②と③のポイントに関しては、参考書などを読むだけでなく実際に手を動かさないと習得が難しいです。

効率的な学習方法は、本記事の上の方に記載してあるので、もう一度読み返して実践してみてください。

また、私が運営するWEBデザインスクールと併用すると、更に効率よく学習を進めることができます。
メンター費用がかからず、実力がついたら、報酬をお支払いしてお仕事をお願いさせて頂きたいと思ってます。

まだ申し込んでいない方は、ぜひ申し込んでみてください。

この記事が気に入ったらサポートをしてみませんか？