HTML、CSS、JavaScriptの勉強をはじめるときに、知っておきたい周辺知識のまとめ【初心者用】

テクノロジー

今回は、HTML、CSS、JavaScriptを学ぶにあたって必要な予備知識をまとめます。

文字コード

パソコンやスマホで文字が当たり前に表示されていますが、全角半角に関わらず、文字は数字で記録されています。つまり、この数字はこの文字、という対応表があり、それに従って文字を表示しています。

その対応表、つまり、変換ルールを「文字コード」と呼びます。

美しく作られた対応表、つまり、変換ルールの一覧表がありましたので、リンクをはっておきます。

UTF8 3byte (e3)

現時点で、日本語を扱うにあたり、見かける可能性の高い文字コードは次の4つです。

UTF-8

現在の標準となっている漢字コードです。特に理由がない限り、「UTF-8」を使ってください。

多言語対応(Unicode)で世界標準になりました。

Shift-JIS、S-JIS

Windows、古くはMS-DOSの世界で、古くから標準となっている文字コードです。

Windowsでは、何も指定しないと「S-JIS」になることが多いので注意してください。

EUC-JP

「EUC」(イーユーシー)とも呼ばれます。

「UTF-8」が登場するまでは、インターネット、特にサーバでの利用では「EUC-JP」が標準でした。PHPなどで開発するときにはコレに統一するのがデフォでしたが、いまは「UTF-8」を利用します。

ISO-2002-JP、JIS

「JIS」コードは、Webの世界ではほとんど利用されません。

電子メールの送受信には、「JIS」コードが利用されています。しかし、電子メールのユーザーがこれを意識する必要はほとんどありません。

「UTF-8」では常用漢字の2,136文字をカバーしており、普通にメールやWebで利用するのに困ることはほとんどありませんが、日本語の漢字としては本当はもっとたくさんの文字があります。「JIS」コードでは、第一水準で約3000文字、全体で1万文字を超える字種をカバーします。

初心者は、「とりあえずUTF-8を使う」と覚えておけばOK

エディターソフトで自分がいま使っている文字コードを確認しましょう。「UTF-8」となっていればOKです。

いまのエディター(例:メモ帳)には、文字コードを指定して保存する機能がたいてい付いています。

HTMLを編集する場合には、次のような記述がHTMLの中に含まれていることを確認します。

<meta charset=”utf-8″>

インデント(字下げ)

JavaScriptなどのプログラム、HTMLやCSSを書くときには「インデント」つまり字下げを使います。

「インデント」は、プログラムを読みやすくするために使いますが、そのプログラムが処理され、動作するとき、あるいは、表示内容に対して、影響を与えません。

「インデント」には流派がある?

「インデント」に利用される文字には、いくつかの流派(?)があります。

昔から一般的だったのは「TAB」つまりタブ文字でした。

「TAB」は半角スペース8文字分で表示されることが多かったので、「半角スペース8文字」も利用されました。

半角スペース8文字分ではちょっと長すぎるのでは、ということで、半分の「半角スペース4文字」にする流派も現れました。

ところが近年、「半角スペース2文字」を主流にする動きが出てきました。

「Visual Studio Code」などの開発者向けツールを利用すれば、インデントは半自動で設定してくれますので、その文字種や流派などをあまり考えることなく、開発することができます。

半角、全角、大文字、小文字の違い

ものすごく基本的な話しのようですが、半角、全角、大文字、小文字の違いには、初心者のうちはとまどいますし、実際に、何が正しいのかとてもわかりにくい状況です。

つまり、HTML、CSS、JavaScriptを扱っていると、以下のような状況が、1つのファイルの中に混在しているからです。

  • 「大文字でも小文字でもどっちでもいいけど、正しくは小文字」
  • 「昔は大文字が正しかったけど、いまは小文字で書くほうが正しい」
  • 「大文字と小文字を厳密に区別しないと動かない」
  • 「全角でも半角でも同じように表示される」
  • 「半角と全角は厳密に区別しないと動作しない」

ルールをすべて書き下そうとすると長くなって理解できないのでやめますが、慣れてしまえばどうということもない話しでもあるのです。初心者にとっては解決にならない言葉なのですが「慣れましょう」が結論です・・・

まとめ

HTMLやCSS、JavaScriptの勉強をはじめるにあたり、知っておくとよい周辺の知識をまとめました。

お役に立てば幸いです。

コメント