HTMLコーディングとは？ コーディングの基礎知識とおすすめオンライン学習サイトのご紹介！
コーディングとは、プログラミング言語を使用してソースコードを書き込む作業であり、Webサイト作成において欠かせない工程のひとつです。
そこで今回は、初心者の方のために、コーディングの基礎知識からおすすめのオンライン学習サイトまでを詳しくご紹介します。
また、初心者の方だけでなく、ある程度コーディングの知識がある方も確認用としてぜひご活用ください。
コーディングに関する基礎知識
まずは、コーディングの基本言語であるHTMLとCSSについて解説します。
HTMLとは
HTMLは、Webサイト作成における最も基本的なコンピュータ言語のひとつです。
人間の言葉が理解できないコンピュータに文書の情報を適切に伝えるための言語であり、コンピュータはこのHTMLを通して正しい情報をブラウザ上に表示します。
HTMLは、タグである「<>」という印を使って文書に対する指定を行います。
たとえば、「コーディングの基礎知識：HTMLとは」という文書をタイトルにしたい場合は、タイトルを示すタグである<title></title>の間に文書をはさみます。
例）<title>コーディングの基礎知識：HTMLとは</title>
これにより、この文書がタイトルであることをコンピュータが理解し、ブラウザ上に表示するのです。
さらに、HTMLは、文書だけでなく、画像やリンクなどの指定も行います。
CSSとは
CSSは、Webサイトのスタイルやデザインを指定するコンピュータ言語です。 基本的にHTMLとセットで使用します。
HTMLによって指定された文書の色やサイズを変更したり、背景のデザインやレイアウトを装飾したりして、Webサイトをより見やすく、わかりやすい内容にします。
コーディングとプログラミングの相違点について
コーディングと共によく耳にするのが、「プログラミング」というIT用語です。このコーディングとプログラミングには、どのような違いがあるのでしょうか。
プログラミングは「プログラムを作成すること」を指す
プログラミングとは、「プログラム（コンピュータへの指示）を作成すること」です。
プログラミングの業務は、プログラムの設計から完成に至るまでの全工程に及びます。つまり、モジュール構成からプログラミング言語の記述、テスト、バグの修正といった一連の流れを「プログラミング」と呼ぶのです。
一般的に、プログラミングを行う人のことを「プログラマー」と言います。
コーディングは「コードを記述すること」を指す
コーディングとは、「プログラミング言語を使ってソースコードを記述すること」です。
先ほど説明しましたが、プログラミング言語の記述はプログラミングの一部でしたね。つまり、コーディングとは、「プログラミングの作業の一環」なのです。一般的にコーディングを行う人を「コーダー」と呼びます。
多くのWebサイト制作現場において、明確なコーディングルールが設定されており、一貫性のあるプログラミング作業を実現しています。
コーディングはHTML・CSSの記述を指す場合が多い
コーディングには、HTMLやCSSだけでなく、「JavaScript」や「Ruby」といったプログラミング言語も使われます。
しかし、近年ではコーディングと言えば、主にHTML・CSSの記述を指す場合に使われます。そのため、他のプログラミング言語と区別するために、「HTMLコーディング」と呼ばれる場合もあります。
コーディングに必要なツールとは
この項目では、HTMLのコーディング作業に必要なツールをご紹介します。
テキストエディタ
テキストエディタとは、文書ファイルの作成・編集を行うソフトで、HTMLを記述する際に利用します。Windowsにデフォルトで入っている「メモ帳」などがこのテキストエディタに相当します。
テキストエディタにはさまざまな種類があるので、まずは自分が使いやすいものを探してみてください。
初心者の方であれば、無料テキストエディタの「Sublime Text（サブライムテキスト）」や「Atom（アトム）」がおすすめです。この2つは、導入方法や使い方がシンプルな上に機能もすぐれているので、スムーズに使うことができるでしょう。
ブラウザ
ブラウザとは、HTMLなどのソースコードを読み取り、Web上に表示するためのソフトです。ほとんどのパソコンやスマホには、「Google Chrome（グーグルクローム）」や「Internet Explorer（インターネットエクスプローラー）」などのブラウザが最初から搭載されています。
どんなブラウザを使用しても良いのですが、おすすめはGoogle Chromeです。
Google Chromeには「デベロッパーツール」というすぐれた要素検証機能が搭載されています。例えば、
- HTMLとCSSの「デザイン変更テスト機能」
- 他のウェブサイトの「コードチェック機能」
- 様々な画面サイズの「表示チェック機能」
など、HTMLコーディングに便利な機能が満載されているので、効率的な業務を行うことができます。
HTMLコーディングの流れを「3ステップ」でご紹介
コーディングに必要なツールが揃ったら、あとはコードを記述していくだけです。そこで、コーディングの流れを「3ステップ」でご紹介します。
コーディング内容の保管場所を用意する
まずは、HTMLコーディングを分類・格納する保管場所を用意します。用意するものは大きく分けて2つです。
コーディング内容を分類する「ファイル」
「HTMLコーディング用ファイル」や「CSSコーディング用ファイル」など、内容ごとのファイルを作成・分類して保存します。その際、ファイル名はすべて半角英数字にしてください。また、拡張子はHTMLファイルであれば「.html」、CSSファイルであれば「.css」にしましょう。
ファイルを保管する「フォルダ」
それぞれのファイルを保存する箱、つまり「フォルダ」を用意します。HTMLやCSSなどを格納する「コーディング用フォルダ」と、画像を格納する「画像用フォルダ」の2種類を用意しましょう。
HTMLを書く
次にHTMLをコーディングしていきます。
HTMLの基本構造は以下の通りです。
・HTMLの基本構造
- 「DOCTYPE宣言」…文書のバージョン宣言
- 「html要素」…HTML文書であることの表示
- 「head要素」…Webサイトに関する情報（Webサイトのタイトルや紹介文：非表示）
- 「body要素」…Webサイトのメインコンテンツ
この中でも「body要素」は、実際にブラウザ上に表示されるサイトのメインとなる内容であり、以下の4つの内容で構成されています。
- 「header（ヘッダー）」…Webサイトのタイトルや目次、導入部分など
- 「main（メイン）」…Webサイトのメインコンテンツ
- 「side（サイド）」…広告やWebサイトの関連記事など
- 「footer（フッター）」…Webサイトの著者名や連絡先、著作権に関する内容など
CSSを書く
HTMLのコーディングだけでは、ただ白い背景に黒い文字が並んでいるだけの味気ないWebサイトになってしまいます。
そこで、CSSコーディングで文字の色や背景のレイアウトを調整し、サイトを美しくスタイリングしていきましょう。
独学によるコーディング学習が続きにくい理由
書籍や学習サイトを用いてプログラミングを独学してみようかなと思っている方もいらっしゃるでしょう。しかし、ある調査では、独学者の87.5%が挫折しているという結果が出ています。それほど、プログラミングの独学は難しいのです。
その理由としては、以下の3つが考えられます。
- 体系的に学べない
- ネットリテラシーが低い
- モチベーションが続かない
それぞれの理由について詳しく解説していきます。
体系的に学べない
プログラミングの専門学校などでは、講師がプログラミングに関する専門知識を基礎から体系的に教えてくれます。そのため、無駄のない効率的な学習が可能です。
しかし、独学の場合、そのような体系的な学習は難しく、どうしても興味のある分野だけを学習する傾向にあります。そのため、断片的にしか内容が覚えられず、知識にムラが生じ、結果として学習が続けにくくなるのです。
ネットリテラシーが低い
インターネット上には、プログラミングに関する学習サイトが数多くあります。
確かに、それらを利用すれば、さまざまな情報や知識を手軽に入手できます。しかし、中には必要のない情報を発信する学習サイトがあることも事実です。
そんな時、ネット上の情報を正しく理解し取捨選択できる「ネットリテラシー」が低ければ、「間違った情報」や「不必要な情報」をどんどん吸収することになります。こうなると、効率的な学習が難しくなり、途中で挫折してしまう可能性も高くなるのです。
モチベーションが続かない
独学する場合、一緒に勉強してくれる仲間も競争相手もいないことから、つい自分を甘やかしてしまい、さぼってしまうことがあります。そうすると勉強が進まなくなり、どんどんモチベーションが低下していきます。
さらに、わからない問題があっても相談できる人がいないため、そのまま放置しがちになります。そうなると学習意欲が削がれるので、結果として「もういいや」となるのです。
コーディングに関するシステムやソフトウェア
この項目では、コーディングに関するシステムやソフトウェアについてご紹介します。
WordPress（ワードプレス）
WordPressは、テキストや画像、デザイン、テンプレートなど、Webサイトのコンテンツを一元的に保存・管理するCMS（コンテンツ管理システム）です。
その高い自由度と機能性から、世界中の個人や企業に支持されています。
WordPressを使いこなすにはHTMLやCSSの知識が必須なので、マスターすることでコーディング技術は確実に向上します。そのため、ぜひ使い方を覚えることをおすすめします。
Adobe Dreamweaver（アドビ ドリームウィーバー）
Adobe DreamWeaverは、アドビシステムズが開発したコーディングソフトです。Web制作に必要な機能が集約されているので、初心者の方からプロのデザイナーの方まで幅広く使われています。
代表的な機能や特徴は以下の通りです。
- ホームページ編集機能
- レイアウト表示機能
- ファイル管理機能
- FTP接続
- レスポンシブ対応
無料版コーディング学習サービス4選
無料でコーディングを学習できるサービスを4つ厳選しました。ぜひ参考にしてください。
Progate（プロゲート）
Progateは、ゲーム感覚でコーディングの基礎を学ぶことができるオンライン学習サービスです。
イラストを使ったスライド学習が特徴で、設問ごとにわかりやすいヒントが設置されています。そのため、モチベーションを維持しながら楽しく学ぶことができます。特に初心者の方におすすめです。
ドットインストール
ドットインストールは、HTML/CSSやPHP、Rubyなどのプログラム言語からWordPressの構築方法まで、幅広い分野を扱うプログラミング学習サイトです。
すべてのレッスンが3分間で完結する動画コンテンツとなっているので、自分のペースで少しずつ進めることができます。また、学習カテゴリも細分化されているので、復習ツールとしても役立ちます。
また、現役エンジニアに直接質問できるサービス（有料）を活用すれば、より深い理解につながるでしょう。
Codeprep（コードプレップ）
Codeprepは、HTML/CSSからアプリ開発まで幅広い技術が学べるオンライン学習サービスです。
1日10分間プログラムコードを書いてもらうことで学習者に達成感を与え、モチベーションを維持しようというスタイルで運営されています。
また、他のユーザーとの交流も可能なので、楽しくコーディング学習ができます。
Schoo（スクー）
Schooは、全国の中学・高校でも導入されている現在急成長中のオンライン動画学習サイトです。各業界で活躍している方を講師として招き、その授業をすべて生配信しています。
また、コーディングをはじめ、プログラミング、Webデザイン、ビジネス、マーケティングといった幅広いコンテンツを提供しているので、初心者の方からプロの方まで役立つ情報を学ぶことができます。
理想のWebサイトを作成するためにも、まずはHTMLコーディングを学ぼう！
今回は、HTMLコーディングの基礎知識からおすすめのオンライン学習サイトまで詳しくご紹介いたしました。
HTMLコーディングはWebサイト制作の基本です。自分の思い描いたとおりのWebサイトを構築するためにも、まずは、このHTMLコーディングをしっかり学びましょう。
今回ご紹介したオンライン学習サイトなどを利用して、楽しくHTMLコーディングを学んでください。
