2021/10/30 (更新日: 2022/10/07)

【コーディングとは】Webデザインに必要な基礎知識・ルールを解説

Webデザイン

2021_1030_1-explain-basic-knowledge-and-rules

副業で稼ぐためWebデザインについて勉強しています「よく目にするコーディングについて理解したいです。そもそもコーディングって何ですか？全く分かりません…教えてください！」このような悩みが出てきました。

今回は、このようなお悩みを解決するための、お手伝いをします。

本記事の内容

コーディングとは
コーディングに必要な言語
コーディングのルール

この記事を読むメリット

コーディングとは何かがわかる
コーディングとプログラミングの違いも理解できる
コーディングに必要な言語などの基礎知識を知ることができる
コーディングルールの必要性やメリット・デメリットがわかる

この記事を書いている僕は、2020年9月から副業を始めました。現在は本業と両立し、Webデザイナーとして活動しています。

そんな僕は、Webデザインを始めた当初「Illustrator」と「Photoshop」ばかりを勉強していました。その結果、受けることができる仕事の単価が非常に安く、「Webデザインはなかなか稼げないな…」と感じていました。

バナーを1枚作るのに5,000円前後であったり、単価が高くても10,000円ほどでした。しかも、クラウドソーシングを使って仕事を探していたので、競合が多くなかなか仕事を受注することができませんでした。

そのようなことを考えていたある日「Webデザインの仕事のメインはコーディングだ」ということに気が付きました。これを読まれている方は、すでに同様のことは理解していると思いますが、この部分が理解できないとWebデザインは稼げません。

ただ、これを知ったからと言ってもコーディングができるようにならないともちろんですが稼げません。僕もコーディングについてはかなり勉強をして、スキル習得をしました。というより現在もコーディングのスキルを上達させるための学習は毎日しています。

しかし、副業の初心者がWebデザインを始めて、コーディングの学習をしようと思っても何から手をつければいいかもわからない状態ですよね…ですので、今回はコーディングのスキルを習得する方法について詳しく解説します。

今回の記事では、「コーディングとは何か？そして、どの様にして何を理解すればいいのか」をシェアします。参考になると嬉しいです。

結論

コーディングは理解することで多くの職種に役立ちます。

上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。

本記事の動画解説版

コーディングとは

「Webデザインでコーディングって聞くんだけど具体的に何なのでしょうか？専門用語がわかりません…プログラミングとのちがいってなんなのでしょうか？」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

だれでもわかるコーディングの意味
コーディングとプログラミングの違い

本テーマを読むメリットはこちら

コーディングの意味を理解できる
他の言葉と間違えることがなくなる

こちらのテーマではコーディングとは何なのか、解説していきます。コーディングはIT系の仕事では欠かせないものであり、これを理解せずして勉強を進めていくのは難しいです。それほどさまざまな仕事に関わっているものなので、コーディングについてこちらでわかりやすく解説していきます。ぜひ参考にしてください。

だれでもわかるコーディングの意味

こちらのパートでは、だれでもわかるコーディングの意味を解説していきます。難しく考える必要はありません。この言葉を使っている方々が色々な意味を含ませているので、複雑なものと捉えてしまっているのでしょう。こちらでは、だれでもわかるようにコーディングの意味を徹底解説します。これでコーディングの意味を調べなおすことはなくなるでしょう。

まずコーディングとは、「コードを書くこと」です。これはライティング、プログラミングなどと同じような言葉の応用です。では「コードを書く」とは具体的になにをするのかというと、HTMLやCSSなどのコンピューターに伝わる言語（プログラミング言語）を打ち込みます。

そうすることで人間からコンピューターに指示を出しているのです。どのようなことを指示しているかというと、Webサイトをデザイン通りの見た目にしたり、サイト内の表示されているボタンを押したときに違うURLへ飛ぶようにしたり、とWebサイト全体の動きや見た目を細かく指示しているのです。

そのようなことを全てコードでコンピューターに伝えて、Webサイトを完成させていきます。つまりコーディングは、“制作したデザインの完成系がWeb上で表現されるように言語を記述すること”と言えます。

また、コーディングを行う職種を「コーダー」と呼びます。ですがコーディングを行うのはプログラマーも同じです。ではコーダーとプログラマーはどのような部分で分類されているのでしょうか。この2つの職種の違いについては次のパートで解説します。

上記のとおり、コーディングはWebサイト制作には欠かせない工程であり、Webデザインでは重要な役割を担っています。そしてコーディングを行うためには、プログラミング言語が最低限必要なスキルだということがわかりました。その他にも、コーディングスキルとして求められるものがあります。

以下の記事でコーディングに必要なスキルについてまとめているので、参考にしてください。

コーディングとプログラミングの違い

こちらのパートでは、コーディングとプログラミングの違いについて解説していきます。コーディングやプログラミングという言葉は使う人によって捉え方が異なり、混同されることが多いです。具体的にどのような違いがあるのかを解説しますので、コーディングとプログラミングのそれぞれの役割を認識できるでしょう。

●コーディングとプログラミングはそれぞれ、IT用語として以下の意味があります。

コーディング：プログラミング言語等の語彙や文法にしたがって、コンピューターが処理、解釈できるコードを記述する作業
プログラミング：コンピューターに行わせる処理を記述したコンピュータープログラム

コーディングとプログラミングの似ている点は、「設計書を基にコーディングを行う」ことです。たしかに、上記の内容では意味が似ていて違いがよくわかりません。では、以下でわかりやすく解説していきます。

●Webサイト制作の工程はこのようになっています。

プログラム設計
ソースコード作成
テスト
バグ修正
完成

プログラミングは、上記「1 ～ 5」の全ての作業に該当します。一方、コーディングに該当するのは上記「2 ～ 4」です。つまりプログラミングの作業の一部にコーディングがある、ということになります。プログラミングは上記のような工程を踏んでプログラムを動作させることを目的としているため、コーディングとは目的がハッキリ違うことがわかりますね。

このような違いがあるため、使用する言語も異なってきます。コーディングは主にHTML、CSS、JavaScript、プログラミングはJavaやC言語などを使用します。コーディングを行うのであれば、この3つの言語を習得しておきましょう。

コーディングは独学やスクールで学ぶことができます。どの学習方法が良いか悩んでいる方は、以下の記事を参考にしてください。

こちらのテーマでは「コーディングとは」について深掘り解説をしてきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】90分無料相談

コーディングに必要な言語

「コーディングの言葉の意味は理解しました！具体的に習得するべき言語って何になるんですか？？」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

コーディング言語その1：HTML
コーディング言語その2：CSS
コーディング言語その3：JavaScript

本テーマを読むメリットはこちら

習得すべき言語の種類がわかる
それぞれの言語がどのようなものか知ることができる

こちらのテーマでは、コーディングに必要な言語を解説していきます。先程はコーディングの意味について詳しく解説し、コーディングを行う際に3つの言語の習得が必要だということがわかりました。それぞれの言語の特徴や役割について解説していきます。これからコーディングスキルを習得する方は、必ず覚えることになりますのでよく理解しておいてください。

コーディング言語その1：HTML

こちらのパートでは、コーディング言語のHTMLについて解説していきます。Webサイトを作るための基本とされる言語の中で、このHTMLというものがあります。これはWeb関連の仕事に携わっていなくてもなんとなく知っている、聞いたことがあるという方が多いかもしれません。こちらでは、なんとなくをしっかりした知識に変えてもらうために、詳しく解説します。

HTMLとは厳密にいえば、プログラミング言語ではなく「マークアップ言語」と呼ばれるものです。これは、Webページの基盤をつくる言語であり、どのWebページも、このHTMLのソースコードに従って表示されています。

タグと呼ばれる目印を使って見出しや文章、段落の位置を決めるなどページを構成していくのですが、HTMLだけではサイトは簡素なものとなってしまいます。HTMLが作った構成に、装飾を行うのがCSSの役割です。CSSについては次のパートで解説します。

また、実際のソースコードを見ると難しそうに見えるのですが、HTMLは数回使っていけば誰でもできるようになるくらい簡単な、いわば超入門言語です。タグの種類は多いですが代表的なものを覚えておけば問題ありません。ただしHTMLには以下の3種類のバージョンがあり、そのバージョンによって書き方やタグが変わってきますので注意してください。

HTML4.01
XHTML1.0
HTML5

現在、一般的に使われているのは最新のバージョンであるHTML5です。Internet Explorer 9以降であればどのブラウザでも対応しています。まず言語に慣れるまでは、なんとなくでもHTMLを書いてどのように表示されているかをチェックする、ということを繰り返していきましょう。

〈HTMLの特徴〉

Webページの基盤をつくる言語
タグを使ってページを構成する
用語やルールが簡単で覚えやすい

コーディング言語その2：CSS

こちらのパートでは、コーディング言語のCSSについて解説していきます。CSSも基本的な言語であり、HTMLとセットで覚えてもらいたい言語です。意味が分かるとHTMLとの関係性やCSSの重要性について理解できるでしょう。詳しく解説していきますので、CSSという言語についていまいち理解できていない方はぜひ参考にしてください。

CSSとは、装飾・レイアウトを行うための言語です。先程、HTMLはWebページの基盤をつくると言いました。CSSはHTMLがつくってくれた基盤に、文字の大きさや色、マーカーなどで色付けをしていき、デザインするのです。つまり、HTMLだけの簡素なページに、CSSを加えることで見た目をよくすることができるということです。

CSSの言語があるかないかで、Webページの印象は大きく変わってしまいます。具体的には以下のようなものを決めることができます。

文字の色、サイズ、幅、位置など
背景色、背景画像、ラインなど
レイアウト、余白調整

このように見た目の装飾を行います。コードはHTMLよりも複雑な暗号のように見えますが、上記のような決め事を順番に記述しているだけなので、難解なコードというわけではありません。ですがCSSのプロパティを記述する順番は決まりがないため人によって順番が異なり、複数人が扱って修正することがある場合には、他の人にとってもわかりやすい順番にするよう気を配る必要があります。

また、HTMLのようにCSSにも以下のとおりバージョンがあります。

CSS1
CSS2
CSS3

バージョンによって使えないタグなどはなく、どのバージョンでも同じように反映されます。現在はCSS3が主流になっていますが、CSS3のプロパティによっては対応していないブラウザもあるようなので、正しく表示されるかどうか確認しながら記述していってください。

〈CSSの特徴〉

Webページのデザイン、レイアウトをする言語
HTMLとセットで使われる
バージョンによる書き方や記述の差異はない

コーディング言語その3：JavaScript

こちらのパートでは、コーディング言語のJavaScriptについて解説していきます。JavaScriptについて、コーディングの勉強をせずに知る方は少ないでしょう。ですがプログラミングの言語としてはとても需要の高い言語です。JavaScriptのHTML、CSSとの違いやどのような役割をしているのか、詳しく解説していきますので勉強の際に役立ててください。

JavaScriptは、Webページに動作をつけるためのプログラミング言語です。HTMLとCSSだけのWebページは静止画のような状態ですが、そこに動きをつけているのがJavaScriptです。

例えば、トップページで画像が次々に流れるスライドショーや、画像の拡大表示、ページのスムーススクロール等が挙げられます。普段そういった動きを当たり前のように見て操作していますが、全てJavaScript言語のコーディングによるものだったんですね。他にも以下のようにたくさんのことがJavaScriptによって実現できています。

カウントダウンタイマー
入力フォームの確認画面（ポップアップウィンドウ）
ページにGoogleマップを組み込む（Ajax）
シミュレーション計算

JavaScriptは主にWebページの動作に使われますが、その他にもWebアプリやスマホアプリ、ゲームの開発にも使われている大活躍な言語なのです。RubyやPythonという他のプログラミング言語と併せて使うことで、Webアプリ等の開発を行うことができます。このように、よりユーザーに近い部分を開発する際に使われるので、システムエンジニアやフロントエンドエンジニアの方の利用が多いでしょう。

以上のように、JavaScriptは多様性があるため習得すれば仕事の幅も広げられる人気のある言語なのですが、その分覚えることも多く難しいと感じる方も少なくないでしょう。JavaScriptの習得にはHTML、CSSの知識も必須なので、まずはHTML、CSSの習得から始めていってください。

ちなみに他の言語でJavaというものがありますが、名前が似ているだけで関連性は薄く別モノなので、注意してください。

〈JavaScriptの特徴〉

Webページに動作をつける言語
多方面で活躍する言語
HTML、CSSに比べると多少複雑

上記のようなコーディングスキルを習得することで、それぞれの職種でどのように活かして収益につなげられるのかを知りたい方は、以下の記事を参考にしてください。リアルな収入を知ることができます。

こちらのテーマでは「コーディングに必要な言語」について深掘り解説をしてきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】90分無料相談

コーディングのルール

「コーディングをしていくにあたり、理解しておくべきことや約束事、いわゆるルールのようなものってあるのでしょうか？」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

コーディング全体で理解しておくべきルール
言語ごとに理解しておくべきルール
言語ごとに押さえておくべきポイント

本テーマを読むメリットはこちら

コーディングのルールを知ることができる
他の人と仕事をする際に役立つ

こちらのテーマでは、コーディングのルールについて解説していきます。コーディングには規約・ルールがあり、コーディングを行うにあたってはそのコーディングのルールを理解しておかなければなりません。こちらでは、具体的なコーディングルールやポイントについて詳しく解説していきます。ぜひ参考にしてください。

コーディング全体で理解しておくべきルール

こちらのパートでは、コーディング全体で理解しておくべきルールについて解説していきます。言語ごとに決められたルールもありますが、こちらではコーディング全体のルールの概要や理解しておくべきルールを解説します。ルールを守ることによって得られることがたくさんあるので、参考にしてみてください。

コーディングのルールとは、「コードの書き方に関する決まり事」です。これは主に、プロジェクトに関わるエンジニアが働きやすくなるよう設けられます。コーディングは、作業完了まで頻繁に修正・追記が行われていきます。複数人で行うプロジェクトの場合、それぞれが独自の書き方でコーディングしてしまうと、修正に時間がかかったり分析が難しかったりと、不都合が起こりやすくなり作業効率が悪くなってしまいます。

個人の場合でも、修正をスムーズに行うために必要になってきます。ルールに沿ったコーディングを行うことで、ストレスのない作業ができ、さらにコーディングの保守性や品質の向上が期待できるのです。ルールを守ることで、以下のようなさまざまなメリットを得られます。

他の人がソースコードを見てすぐに内容が理解できる
バグの最小化、早期発見
メンテナンスの負担を軽くできる
知識やスキルの向上

そのため企業ごとに異なったルールが定められています。具体的には、以下のようなルールが設けられます。

コーディングスタイル（改行、空白等のルール）
プログラムの作り方（帳票、API等）
プログラムを作る上での推奨、禁止事項
その他プログラム作成時のルール全般（レビュー方法やプログラム管理等）

全体的なルールは以下のようなものがあります。

プロトコル：URLのプロトコル部分（https:、http:）を省略します。
インデント：半角スペース2つ分でインデントします。
大文字、小文字：属性、CSSセレクタ、プロパティ、プロパティの値のコードは全て小文字です。
末尾の空白：末尾の空白部分は削除します。
エンコード：「UTF-8（BOM無し）」を指定します。
コメント：コードの目的をコメントで説明します。
TODOコメント：「TODO（担当者）：内容」をコメントで記述します。

はじめはルールを理解してそれに従うことが面倒に感じてしまうかもしれませんが、他人が絡む作業であればなおさら後の面倒を避けるためにもルールは必要です。関わる方と協力して、ルールを決めた上で作業していきましょう。

言語ごとに理解しておくべきルール

こちらのパートでは、言語ごとに理解しておくべきルールについて解説していきます。言語ごとに理解しておくべきルールは、より細かく定められていきます。また、Googleが推奨するコーディングのルールなどもありますので、併せて解説していきます。ぜひ参考にしてください。それぞれの言語のコーディングルールについては、以下のとおりです。

●HTMLのコーディングルール

HTMLバージョンを使用する：新しいHTMLを使用する旨を記載して下さい。
DOCTYPE宣言をする：どんな定義に基づいて記述される文書かを表示して下さい。
「p」タグと「h1」などの見出しタグを混同しない：初心者に多いミスです。それぞれに分けてタグを区切りましょう。
閉じる必要がないタグは閉じてはいけない：閉じるとエラーになるタグがあります。
classを使う場合はタグのすぐ後ろに書き込む：classを使う際の正しい使い方になります。
HTML上でスタイリングを行わない：装飾はCSSにした方が良いです。

●CSSのコーディングルール

「{」の位置を統一させる：空白や改行で読みやすくします。
プロパティ名の後に空白を入れる：「front-size」と「color」を記載する場合は空白を入れてください。
!importantは使用しない：これを使用することで命令が効かなくなりメンテナンス性が下がってしまいます。
idやclass名の命名、簡略化：意味のある、わかりやすく短い名前をつけてください。

●JavaScriptのコーディングルール

標準機能で実現できることはライブラリを使用しない
ソースに記載する値に名前をつける
複数行のstringリテラルは「\」でなく「+」を使用する
ローカル変数宣言はvarでなくconstやletを使用する

どのようなルールをどの範囲まで決めるのか、企業ごとの定義やGoogleが推奨するものなどを参考に、それぞれに合ったルールを作ってコーディングを行いましょう。

言語ごとに押さえておくべきポイント

こちらのパートでは、言語ごとに押さえておくべきポイントについて解説していきます。一括りにプログラミング言語と言っても、全てが同じわけではありません。それぞれの言語のポイントを押さえておくことで、習得する言語をより活かせたコーディングを行うことができます。言語ごとに解説していきますので、参考にしてください。

●HTML
以下でHTMLの押さえておくべきポイントと解説をしていきます。

ポイント1：Webサイトやスマホサイトの制作に必須の言語

HTMLはWebやスマホのサイト制作には欠かせない、必須の言語です。この言語を習得しなければサイト制作はできません。逆にスマホアプリやIoTなどのサービスには不向きな言語です。

ポイント2：学習が始めやすい

テキストエディタやブラウザさえあればすぐに始められる言語のため、コストがかからず学習が始めやすいです。修正等もすぐにできるため扱いやすく仕組みがわかりやすい、プログラミングの入門言語といえるでしょう。

ポイント3：これだけで仕事にするには難しい

プログラミング言語を習得することで専門性のある仕事を請け負うことができますが、HTMLはその中でも基本的な言語のため、「使えて当たり前」と判断されます。そのため他の言語も習得している方と比較すると、HTMLだけの習得では仕事の求人は少なく単価も安くなります。ですが、サイト制作以外のサービスを作る際にもHTMLの知識は必要となってきます。仕事を始めるための第一歩となる、重要な役割をもつ言語です。

●CSS
以下でCSSの押さえておくべきポイントと解説をしていきます。

ポイント1：Webサイトやスマホサイトの制作に必須の言語

CSSはHTMLとセットになるため、HTMLと同様Webやスマホのサイト制作には欠かせません。不向きなサービスもスマホアプリやIoT、組込み系とHTMLと同じです。

ポイント2：学習が始めやすい

始めやすさで言うとこちらもHTMLと同様です。テキストエディタやブラウザさえあればすぐに始められるため、コストをかける必要がありません。ただしCSSを極めようと思うと、HTMLよりは難易度が少し上がります。

ポイント3：これだけで仕事にするには難しい

HTMLとCSSは基本的にセットで使っていきます。2つの言語を使えるのは、HTMLのみと同様「当たり前」なのです。そのため、仕事の求人は他の言語と比べて少なく、単価が安いものになります。ですがCSSも、サイト制作以外のサービスを作る際には必要な知識です。仕事の基盤となる言語なので、習得しておきましょう。

●JavaScript
以下でJavaScriptの押さえておくべきポイントと解説をしていきます。

ポイント1：ユーザーごとに表示の変わるサイト等の制作に必須の言語

JavaScriptはWebやスマホサイトの制作は当然のこと、ユーザーごとに表示を変えるサイトを作らなければならない場合には必須の言語となります。向いていないサービスはHTMLやCSSと同じです。

ポイント2：学習が始めやすい

HTMLやCSS同様こちらも特別な環境は必要なく、ブラウザがあれば始められます。学習サービスも充実しており低コストに抑えられます。始めやすさでいうと敷居は低いですが、言語の応用がきくため習得する難易度は2つの言語よりもさらに上がります。

ポイント3：幅広い仕事への活用ができる

今はWebサイト、スマホサイトのほとんどがJavaScriptを使って作られており、さらにJavaScriptの理解を深めることによってアプリ開発やゲーム制作、Excel等への機能追加などさまざまな仕事へ応用していけます。それだけ需要が高い分、プログラミング言語を扱う多くの方が習得している言語なのです。以上のポイントを押さえて、それぞれの言語の習得に役立ててください。

上記のようなプログラミング言語を学べるスクールをお探しの方は、以下の記事でおすすめのスクールをご紹介しています。ぜひ参考にしてください。

こちらのテーマでは「コーディングのルール」について深掘り解説をしてきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】90分無料相談