HTMLコーディングをはじめよう〜副業にも!|第1章 コーディングの準備

Visual Studio Code イメージ

テキストエディタ「Visual Studio Code」

前回は、HTMLコーディングを始める前の予備知識として、ウェブサイトの仕組みについて説明した。

今回は、HTMLコーディングを始めるための準備について、ご案内する。

とはいっても、特別新たなデバイスや、高価なアプリを用意する必要はない。

HTMLコーディングは、普段使っているアプリやフリーダウンロード可のアプリで、すぐに始めることができる。

静的サイトと動的サイト

コーディングを始める前に、もうひとつだけ説明させていただきたい。

ウェブサイトには、

  • 静的サイト
  • 動的サイト

があるのをご存知だろうか?

HTMLコーディングを副業にしていこうと思っている人は、最初にこの違いをよく知っておいた方が良い。

静的サイト

静的サイトとは、いわゆるHTML文書で製作されたウェブサイトのこと。いつ、誰がアクセスしても同じものが表示される。

企業や官公庁のサイトは、概ね静的サイトだ。

そして、HTMLコーディングの作業は、この静的サイトの制作・管理が主な業務となる。

動的サイト

一方、動的サイトとは、アクセスした時の状況によって表示が異なるウェブサイトのこと。ブログやEコマースサイトは、動的サイトと言われる。

そして、動的サイトはHTML文書と「PHP」といったプログラムを組み合わせて表示される。

最近、企業のサイトの主流となりつつあるCMS(コンテンツ・マネジメント・システム、WordPressなど)を使って作られたサイトも、動的サイトだ。

「それなら、最初から動的サイトについて勉強した方が良いのでは?」

そう思うのも、自然なことだ。

クラウドソーシングでは、WordPressを使ったウェブサイト制作案件が、山のように掲載されている。そちらから始めた方が、収入に直結するかもしれない。

しかし、もう1度上記の違いを確認してみてほしい。「動的サイトは、HTML文書と「PHP」といったプログラムを組み合わせて表示される」のだ。

副業とはいえ、仕事にするのであれば、その大元になるHTML文書を知らなければ、使い物にならないということ。

HTML文書は、全てのウェブサイトの基本ということを認識して欲しい。

HTMLコーディングに必要なアプリ

HTMLコーディングをはじめよう〜副業にも!|序章 ウェブサイトとHTML」で少し触れた通り、HTML文書はシンプルなテキストファイルでできている。

ということは、極端ではあるが、

「どのパソコンにも入っているメモ帳や、WordでもHTML文書を作ることができる」

ということ。コーディングのために、特別新たなデバイスや、高価なアプリを用意する必要はない。つまり、

「HTMLコーディングは、すぐに始められるスキル」

なのだ。

そうはいっても、実際メモ帳やWordでHTML文書を制作している人は、そう多くはないだろう。なぜなら、コーディングに適した「テキストエディタ」という便利なアプリがあるからだ。

Google HTML/CSS Style Guideにも書かれているが、HTML文書は指定されたエンコーディング(UTF-8 BOMなし:後日説明)や、指定された改行コードで書かなければならない。それを簡単に指定できるのが、テキストエディタだからだ。

また、テキストエディタの中には、コーディングをしながらブラウザで表示を確かめたりすることもできるものがある。

以下は、コーディングに便利なプラグインを、自分でカスタマイズして使うことができるテキストエディタだ。

Visual Studio Code

Visual Studio Codeは、Microsoftが開発し、オープンソースで提供されているテキストエディタ。頻繁にアップデートされているので、安心だ。

拡張機能というプラグインで、使いやすくカスタマイズできる。特にLive Server Previewという拡張機能は、作成文書上で右クリックして選ぶだけで、イントラネット上に作成中の文書がリアルタイムで表示される。画面分割して、左にHTML、右にプレビューということもでき、大変便利。

現在、筆者がメインに使用しているテキストエディタ。

対応OS: Windows / MacOS / Linux (64-bit Only)

Atom

Atomは、オープンソースのソフトウェア開発のためのプラットフォーム、Githubが開発したテキストエディタ。

使い方は、Visual Studio Codeとほぼ同様で、こちらもhtml Previewというプレビュー機能がある。対応OSもVisual Studio Codeと同様だが、Macでは落ちやすいので要注意。

Brackets

Adobeが開発したテキストエディタ。

残念なことに、2021年9月にサポートが終了する。使い勝手は良いのだが、重たいのでサクサク打ち込むことが難しい。

ベタ打ち派のためのシンプルエディタ

「プレビュー画面なんて必要ないよ」

という人のための、シンプルなテキストエディタは、昔から重宝されている。

例えば、

は、ちょっとした修正や、サクッと書きたい人には便利だ。

筆者も、メインはVisual Studio Codeを使いながら、ちょっとした修正にCodEditorを使っている。

誰がみてもわかるHTMLコーディングを心がける

HTML文書は、W3C(World Wide Web Consortium)という団体により、世界共通のコーディング規則が決められている。

もし、わからないことがあれば、以下のW3C HTML5リファレンスで、いつでも確認できるようにしておきたい。

W3C HTML5リファレンス

また、Googleも、主にSEOの観点から、コーディングの決め事として以下をリリースしている。

Google HTML/CSS Style Guide

これら2つのガイドは、常に確認しながらコーディングするよう、用意しておこう。

一方、個人向けサイトならともかく、企業のウェブサイトは、ほとんどがチームまたは企業単位で制作することが多く、一人で全てを制作することはあまりない。

そのため、チームの誰がみてもわかるように、コーディングすることが非常に大切だ。

一つのウェブサイトを制作するにあたり、W3CやGoogleのリファレンスに準拠することはもちろんのこと、CSSの書き方やファイル名の決定など、常に打ち合わせておいて、チーム内で共有することが必要だ。

例えば、コメントの書き方、IDやクラス名のつけ方は、一人のスタッフが勝手につけてしまうと、他のチームメンバーにはなんのことやら、わからなくなってしまう。それにより作業進行に遅れが生じ、納期に間に合わないなどの障害が発生するもととなる。

とても細かいことなのだが、同時にとても大事なことなので、気をつけよう。

まとめ

まだ、具体的なコーディングについて触れてはいないが、これで始める準備はできると思う。

今回は、

  • 静的サイトと動的サイトの違いを理解し、HTMLコーディングは全てのウェブ制作の基本となる
  • HTMLコーディングは、テキストエディタさえあれば、すぐに始められる
  • 誰がみてもわかるHTMLコーディングを心がけ、共同で作業するチームではあらかじめルールを決めておく

について書いた。

次回は、CSSやJavascriptについて、また、HTML文書の具体的構造をもとに、説明を続けていくつもりだ。

コメント