コーディングとはなにか？
実は、コーディングはプログラミングの一つの工程で、プログラミングとは違うものです。
Webサイトはデザインを制作しただけでは完成ではありません。制作したデザインをもとにHTMLやCSSでコーディングしてブラウザで見えるように制作していきます。
このように、コーディングはWebサイト制作で必須となる工程です。
この記事では「コーディングの基本的な知識やプログラミングとの違い」「コーディングの勉強方法」について解説します。
- コーディングの基本的な知識
- コーディングとプログラミングの違い
- コーディングの勉強方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
コーディングとは
コーディングとは、一般的に「プログラミング言語やマークアップ言語を用いてソースコードを記述すること」です。
コーディングはプログラミングで処理したものやデザインを、人の目に見える形でソースコードに記述します。コーディングの際、HTML, CSS, JavaScriptなどを主に使用します。
プログラミングとは？コーディングとの違い
プログラミングとは、コンピュータが理解できる言葉（プログラミング言語）でプログラムを作り、コンピュータに指示を与えることです。
プログラミングには、例えば下記のような工程があります。
- プログラミングの設計
- プログラミング言語で記述（コーディングはここに含まれます）
- テスト
- バグの修正（デバッグ）
- 完成
広義の意味では、コーディングもプログラミングに含まれます。一般的にコーディングを行う人を「コーダー」と呼び、プログラミングを行う人を「プログラマ」と呼びます。
コーディングで必要なスキルセット
コーディングは、主に下記のような言語を使って行われます。
- HTML：Webページを作成するためのマークアップ言語
- CSS：HTMLにサイズや色、レイアウトなどのスタイルを設定するためのスタイルシート言語
- JavaScript：Webページに動きをつけることができるプログラミング言語。Webページでよく使用されるプログラミング言語の一つ
なお、JavaScript以外のプログラミング言語では主なもので下記があります。
- PHP
- C / C++ / C#
- Java
- Ruby
- Python
ここからは、コーディングでよく使用される言語について簡単に解説していきます。
HTML：Webページを作成するためのマークアップ言語
HTMLは端的にいうと、「Webサイトの要素や構造はこのようになっている」ということをコンピュータに伝えるための言語です。HTMLはプログラミング言語ではなく、マークアップ言語です。
HTMLは基本的に下記のように開始タグと閉じタグのセットで記述します。
<section><!-- 開始タグ -->
<h2>セクション</h2>
</section><!-- 終了タグ -->HTMLでは「タグをつける＝マークアップする」ことで、Webサイト内の開始タグと閉じタグの間に囲まれた要素の意味をコンピュータに伝えています。
例えば、HTMLのそれぞれのタグには下記のような意味があります。
- h1やh2などのhタグ：見出し
- pタグ：段落（文章）
- aタグ：リンク
- imgタグ：画像（imgタグは閉じタグがありません）
また、HTMLでは後述するCSSでスタイルを付けるためのclassやidをタグ内に付与して記述することができます。
<section class="section" id="section"><!-- クラスやid付与 -->
<h2>セクション</h2>
</section>HTMLの特徴
- Webページを作成するためのマークアップ言語
- 開始タグと閉じタグでセットで記述し、要素に意味を持たせる
- classやidを付与してCSSでスタイルを付けることができる
CSS：HTMLにスタイルを設定するためのスタイルシート言語
CSSはHTMLにフォントサイズや色、レイアウトなどのスタイルを付けるスタイルシート言語です。Webサイトの見た目を指定することができます。
例えばHTMLのタグや、タグに付与されたclassに対して下記のようにスタイルを指定することができます。CSSではセレクタとプロパティ、値をセットで記述します。
h2 { /* h2タグに */
color: red; /* 文字色を赤に指定 */
}
.box { /* boxクラスに */
width: 200px; /* 横幅を200pxに指定 */
}上記のコードは、次のような意味になります。
- h2 タグに文字色を指定するcolorプロパティでred（赤色）という値を適用
- boxクラスに横幅を指定するwidthプロパティに200pxという値を適用
HTMLに対して「何に対して」「どこを変えるか」「どのように変えるか」をCSSで記述します。
CSSの特徴
- HTMLにフォントサイズや色、レイアウトなどのスタイルを付けるスタイルシート言語
- CSSではセレクタとプロパティ、値をセットで記述
JavaScript：Webページに動きをつけることができるプログラミング言語
JavaScriptはブラウザ上で動作するプログラミング言語です。JavaScriptではWebサイトに動きをつけることができます。アプリケーション・ゲーム開発やサーバーサイドでも利用される言語です。
JavaScriptはクリックやスクロール、ページ読み込みなどの「きっかけ」を起点にイベントを発火することができます。
イベントの例
- メニューボタンをクリックしたら、メニューが展開
- スクロールしたら、広告が表示
- ページが読み込まれたら、ローディングアニメーション発火
また、slickやswiperなどの「ライブラリ」を使用することで、高度な動きをより少ないコード量で実装することもできます。
JavaScriptの特徴
- ブラウザ上で動作するプログラミング言語
- JavaScriptではWebサイトに動きをつけることができる
- 「きっかけ」を起点にイベントを発火
Webサイト制作ではHTML, CSS, JavaScriptなどのコーディングスキルを実務レベルまで引き上げる必要があります。Webサイト制作で必要なスキルに関しては、下記の学習ロードマップにまとめています。
上記ロードマップの記事やこの記事を読んで
「Webサイト制作に興味が出てきた」
「Webサイト制作を学んでみたい」
「コーディングスキルを身に着けたい」
と少しでも思ったら、「ZeroPlus Gate」で学んでみませんか？
ZeroPlus Gateは、Web制作で必要なスキルを無料で学習できるプログラミングスクールです。ZeroPlus Gateには下記のような特徴があります。
- 50本以上のわかりやすい動画教材
- 専属メンターが、あなたの学習をサポート
- 本格的なWebサイトを作るスキルが無料で身につく
ZeroPlus Gateをはじめてみたい！という方は、以下のリンクより専用ページをチェックしてみてください。
コーディングの勉強方法
コーディングの勉強方法はいくつかあります。
- インターネットで調べながら勉強（独学）
- 書籍
- オンライン教材
- Webサイトの模写
- プログラミングスクール
インターネットで調べながら勉強（独学）
インターネットで調べながら、独学でコーディングを学習していく方法です。例えば、このZeroPlus MediaでもWeb制作やコーディングに関するさまざまな情報を発信しています。それらを一つ一つ調べながら、実際に手を動かして勉強していく方法です。
時間はかかりますが、学習費用をかけずに進めていくことができます。ただし、分からない部分が出てきても自分で解決しなければなりません。
おすすめの独学勉強法
- インターネットで調べて、実践したコードはいつでも使えるようにメモしておく
- 参考にしたサイトはメモしておく
- Notionやスプレッドシートにメモしておくと後から参照しやすい
便利なメモアプリ Notion
Notion（ノーション）は、Web上で使用できる便利なメモアプリです。作成したメモが同期されるため、スマホやパソコンなど、複数のデバイスで同じメモにアクセスすることができます。
また、テキストはもちろん、コード・画像や動画・表など、さまざまな形式のデータを同じページに組み込むことができます。アプリもあるので、ぜひ学習に活用してみてください。
書籍
HTMLやCSS、JavaSciptを扱った書籍を購入し、ページを進めながら勉強する方法です。書籍での勉強方法は自分のレベルにあった書籍を選んで、自分のペースで勉強することができます。
ただし、書籍の内容次第では必ずしも最新情報が掲載されているわけではありません。また、書籍はインターネットのように情報の更新がないのが難点です。
書籍でのおすすめ勉強法
- 書籍に記載されているコードを見て、手を動かして実際にコードを書く
- 覚えたコードをもとに、自分なりにコードをいじって挙動を確認する
おすすめ書籍
オンライン教材
動画形式の教材やゲーム感覚で学習する教材など、さまざまな形式のオンライン教材があります。プログラミングに対して苦手意識があっても、ネット上の教材を活用すれば気楽に学習を進めることができます。
オンライン教材は教材によってはインプット学習が多く、アウトプット不足な側面があります。また無料で学べるのは一部分のみで、完全版を利用するためには料金の発生するサービスも多いです。
おすすめオンライン教材
- Progate：ゲーム感覚でプログラミングの基礎を学習できる
- Udemy：さまざまなプログラミング言語の教材を購入できる
- ZeroPlus Gate：30日間無料でWebサイトをコーディングする技術を学べる
Progate：ゲーム感覚でプログラミングの基礎を学習できる
Progateは、ゲーム感覚でプログラミングの基礎が学習できるオンライン教材です。
- プログラミング初心者でも手軽に始めることができる
- HTMLからJavaScript、RubyやReactなど基本的な言語からモダンな言語まで扱っている
- 環境構築が不要
Progateは、プログラミングの基礎的な部分を手を動かしながら学習できる、最も有名なプログラミング学習サービスです。マークアップ言語の基礎やプログラミングの言語の基礎を学習できます。
スライド付きの解説で視覚的に理解でき、わかりやすさにも定評があります。
Udemy ：さまざまなプログラミング言語の教材を購入できる
Udemyは、さまざまなプログラミング言語の教材を購入できるプラットフォームです。
- 基礎的な言語からハイレベルな言語・技術まで学習できる
- SEOやデザイン、マーケティングなど、プログラミング以外の知識やスキルを学習できる
- オンライン学習型プラットフォーム
Udemyはプログラミングの知識以外にもさまざまな知識を学習することができます。プログラミングの教材では、動画で解説を視聴しながら手元でコーディングするスタイルになるので、インプット学習に向いています。
ZeroPlus Gate
- わかりやすい動画教材
- 気さくで話しやすい専属メンター
- 本格的なWebサイトを作るスキルが無料で身につく
ZeroPlus Gate では充実した内容のわかりやすい動画教材で、自分のペースで学習を進めていくことができます。さらに、一人ひとりに専属メンターがつき、30日間あなたの学習を徹底的にサポートします。
Webサイトの模写
Webサイトの模写は、実践的な学習に向いています。
模写とは、既存のWebサイトのコードを見ないで、Webサイトの見た目をそっくりコーディングして制作する練習方法です。
オンライン教材に比べて、アウトプット重視で学習することができます。
ただし、模写するWebサイトの内容によってはコーディングの難易度が変わるので、自分のスキル感にあったサイトを選定しなければなりません。
Webサイトの模写おすすめ勉強法
- LP（ランディングページ）の模写から始める
- レスポンシブ対応をする
LPの模写コーディング
LPとは「ランディングページ」のことで、縦長1ページのWebサイトです。
- シンプルな構成が多いので、コーディングしやすい
- 構成パーツが少ないので、コーディングに時間がそれほどかからない
- 基本的なコーディングの手順を覚えやすい
LPはコーポレートサイトに比べて構成がシンプルかつページ数が少ないので、それほど時間をかけずにコーディングの練習をすることができます。また、PCサイズでもモバイルサイズでもほとんど構成が変わらないので、最初にコーディングするものとしては最適です。
レスポンシブ対応
コーディングする際は、レスポンシブを意識してコーディングするといいでしょう。
- さまざまなブラウザ幅に対応したWebサイトになる
- モバイルファーストでコーディングする
レスポンシブを意識したコーディングができるようになると、さまざまなデバイス幅でWebサイトを見たときにキレイに表示されるようになります。キレイにWebサイトが表示されると、多くのユーザーにとって見やすくなり、依頼者の満足度を高めることができます。
またモバイルファーストとは、スマホ版のWebサイトを先に作り、後からPC版を制作することです。スマートフォンの普及によって、Webサイトもスマホで閲覧されるケースが増えています。スマホに最適化したWebサイトの需要は日々高まっており、モバイルファーストは制作の現場で多く取り入れられています。
プログラミングスクール
プログラミングスクールは効率よく、実践的に学習することができます。
基礎的な部分から実践的な内容まで網羅的に学習でき、プロのエンジニアに直接、何回でも質問できる環境が整えられています。
また、スクールでは自分と同じようにWebサイト制作を学びたい人が集まるので、いっしょに学習する仲間ができます。
ただし、プログラミングスクールに通う場合は、一般的に高額な費用が必要となります。カリキュラムの内容はスクールによって違うので、自分のニーズにあったスクールを選択することも重要です。
Web制作の学べるプログラミングスクールは、こちらの記事にまとめています。
受講料完全無料で専属メンターがつくZeroPlus Gate
ZeroPlus Gateは、完全無料で学び切れるオンライン型プログラミングスクールです。充実した内容のわかりやすい動画教材で、自分のペースで学習を進めていくことができます。さらに、一人ひとりに専属メンターがつき、30日間あなたの学習を徹底的にサポートします。
わからない部分はプロのエンジニアに無制限で何度でも質問することができます。充実のサポート体制ながら、受講料は完全無料。実践的なWebサイトをコーディングするスキルを、この機会に身につけてみませんか。
申し込みは毎月先着限定となっているので、お早めにお申し込みください！
コーディングの勉強のコツ
コーディングの勉強のコツをいくつか紹介します。
- 手を動かす（コードを書く）
- インプットよりもアウトプットに重きを置く
- 数をこなす（さまざまなパターン、レイアウトをコーディングする）
- コーディングのルールを覚える
- CSS設計を身に着ける
- 動的な処理を意識したコーディング（上級）
手を動かす（コードを書く）
書籍やオンライン教材、Webサイトの模写などさまざまな勉強方法について解説しました。どの勉強方法でも共通して大事なのは、「手を動かす（コードを書く）」ことです。
なぜなら、いくら教材や書籍を読んで覚えた気になっても頭に定着はしていないからです。
書籍や教材に書いてあるコードを読むだけではなく、そのコードを実際に手を動かしながら書いていくことで、頭に定着させていきます。
インプットよりもアウトプットに重きを置く
教材で身につけた知識（インプットした知識）をアウトプットしていきましょう。アウトプットしていくと、ただ手を動かしてコードを書くよりもさらに効果的に知識が身に付きます。
Webサイトは、さまざまなレイアウトやパーツ、プロパティや値が組み合わさって構成されています。
インプットで身につけたHTMLやCSSの知識を、さまざまに組み合わせて考えながらコーディングしていくことでコーディングスキルは少しずつ上達していきます。
数をこなす（さまざまなパターン、レイアウトをコーディングする）
Webサイトにはさまざまなレイアウトやデザインパターンがあります。
例えば、下記のようなものが挙げられます。
- テキストと画像が横並びの配置
- テキストと画像が横並びで少し被っている状態
- コンテンツが単純に縦並び配置
- ヘッダーやフッター、モーダルやアコーディオンメニューなどのパーツ
- コンテンツ幅よりもコンテンツがはみ出している配置...etc
これらのパターンはほんの一例に過ぎません。これらのデザインパターンやパーツをコーディングする数をこなすと、自分の中で少しずつルール化されていきます。
一度コーディングしたものは、次回コーディングするとき、初めてコーディングするよりも早くコーディングできるようになります。
コーディングのルールを覚える
数をこなして、手を動かしながらコーディングするのと同時に、コーディングルールも併せてしっかり覚えていきましょう。
間違った知識のままコーディングしてしまうことがないように、正しい知識・正しいタグやプロパティの使い方を覚えましょう。
コーディングルール
コーディングは、個人で行う場合もあれば、複数人で行う場合もあります。どちらの場合でも、作業完了までは追記・修正が絶えず発生し、それに対応しなければなりません。
コーディングルールに則り作業することで、だれでも読みやすく対応しやすいコードを書けるようになります。コーディングルールが明確でない場合、コードが読みにくく、修正が煩雑になってしまいます。
〇 コーディングルールや誤った文法の具体例
<a href="#">
<a href="#">aタグの中にaタグはNG</a>
</a>
<span>
<h1>spanタグの中にh1タグはNG</h1>
</span>HTMLのタグにはそれぞれ「入れ子ルール」があります。コーディングする際は入れ子ルールに気を付けてコーディングしましょう。
〇 HTMLの文法チェックを行ってくれるサービス
〇 CSSの文法チェックを行ってくれるサービス
https://jigsaw.w3.org/css-validator/
CSS設計を身につける
CSS設計とは「良いCSSを書くための考え方に基づいたルール」のようなものです。CSS設計を覚えると、効率的にコーディングできるようになります。
良いCSSとは、一般的に下記の4つが当てはまります。
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
予測しやすい
クラス名の付け方がルール化されていたり、他の人が後からコードを読んでわかりやすいCSSを記述できるとよいでしょう。クラス名からどのような意味を持っているか想像できるとよいです。
/* 〇 クラス名からセクションタイトルのものだと判別できる */
.c-section-title {
font-size: 20px;
}
/* 〇 クラス名からボタンのものだと判別できる */
.c-button {
background: red;
}
/* △ 読む人によっては、クラス名だけでセクションタイトルか分からない場合がある */
.c-section-ttl {
font-size: 20px;
}
/* △ 読む人によっては、クラス名だけでボタンのものか分からない場合がある */
.c-btn {
background: red;
}
再利用しやすい
他の場所でも同じように使いまわしできるようにCSSを記述できるとよいでしょう。例えば、ボタンをひとつのパーツ（コンポーネントともいいます）として見た場合、AのセクションでもBのセクションでも再利用しやすいようにできるとよいです。
<button class="c-button">使いまわしできるボタン</button>
<button class="c-button-fix">使いまわしできないボタン</button>.c-button {
text-decoration: none;
display: inline-block;
position: 8px 20px;
background-color: orange;
color: white;
}
.c-button-fix {
text-decoration: none;
display: inline-block;
position: 8px 20px;
background-color: orange;
color: white;
width: 100px;
margin-top: 10px;
}
c-button-fix要素の場合、CSSで幅と余白を指定してしまっているため、他の個所で幅や余白が違う値になるときそのスタイルを上書きしなければなりません。結果として、記述量が多くなります。
c-button要素の場合、CSSに幅も余白も指定していないので、使いまわしは容易です。
保守しやすい
要素を追加・削除しても他の要素に影響を与えずに記述できることが望ましいです。CSS設計を取り入れるとよいでしょう。
Webサイトは、実はコーディングデータを納品した後も修正や改修が行われることがあります。CSSの記述が煩雑だと、新たにCSSを追加したり削除したとき、場合によっては破綻してしまいます。
CSS設計のようなルール化されたものを取り入れることで、CSSが破綻しにくくなります。
拡張しやすい
CSSに変更があった場合でも手間と時間をかけずに変更できるように、拡張性を持たせた記述ができるとよいでしょう。また、他人がCSSを見ても容易に変更できるような設計で記述できると、複数人で制作するとき役立ちます。
CSS設計手法では例えば下記のようなものがあります。
- BEM
- FLOCSS
- SMACSS
ここでは詳しく解説しませんが、こういったCSS設計の手法があることを覚えておきましょう。
動的な処理を意識したコーディング（上級）
動的な処理を意識したコーディングができるようになるとよいでしょう。
動的な処理とは例えば、WordPressのようなCMSを利用したサイトの場合です。
WordPressを利用したサイトでは、ブログやお知らせなどブログカード（アイキャッチ画像と見出しや本文の抜粋が組み合わさったカードタイプのコンテンツ）が横に並んで表示されることが多いです。
そのような配置のとき、コーディングするときは下記のことを意識してコーディングできるとよいです。
- 3枚のブログカードが横に並ぶ配置
- 1枚しかない場合のカードの位置が中央にあるか、左寄せか
- 4枚目でブログカードが折り返しになること、その際の4枚目のカードの位置
- 画像サイズが異なるアイキャッチ画像が入った場合...etc
ブログカードに限らず、上記のようなコンテンツの増減・テキスト量の増減などを意識してコーディングできるようになるとよいですね。
まとめ：コーディングは手を動かして身につけよう
コーディングについて解説しました。コーディングはWebサイト制作において重要な工程です。コーディングスキルが身につくと、自分の力でWebサイトがコーディングできるようになるので、手を動かして学習していきましょう。
コーディングと勉強方法まとめ
- コーディングとは：プログラミングの一工程
- コーディングで主に使う言語：HTML, CSS, JavaScript
- コーディングの勉強方法は、自分のニーズに合った方法で行う
コーディングを全くのゼロから勉強して実務レベルまで身につけるのは大変です。ZeroPlus Gateなら、30日間無料でWebサイトをコーディングする技術を学べます。また専属メンターとの面談を通して、今後のキャリアについて具体的なビジョンを持つこともできます。
ZeroPlus Gateへ参加して、新たな挑戦の第一歩を踏み出しましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
