【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1

Webサイトを形作っている言語「HTML」「CSS」「JS」。
この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。
書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。

第1回は「 Webの基礎知識」編。まずは3言語の役割と違いを理解する！

連載一覧：

目次：

役割分担
言語名の由来
- HTML
- CSS
- JS
言語の種類
コードの見方
- Chromeの場合
- コードの特徴
コードを書きたくなったら…
テキスト原稿サンプル

役割分担

Webサイトはサーバ上*3にあるファイルをブラウザ*4がダウンロードして表示する。
サーバ側を「サーバサイド」または「バックエンド」といい、ブラウザ側を「クライアントサイド」または「フロントエンド」という。

サーバ側：サーバサイド、バックエンド
ブラウザ側：クライアントサイド、フロントエンド

バックエンド（サーバサイド）についてはこちら
※参考：サーバサイドの中でのWordPressの位置付け

HTML、CSS、JSは主にフロントエンドの処理のための言語だ。3言語にはそれぞれ役割分担があって、ザックリいうと下記のようになる。

HTML：文書構造
CSS：見た目
JS：動作、変更

HTMLで文書の構造を設定し、CSSでその見た目を設定する。さらにJSでHTMLやCSSに動作や変更を加える。*5

言語名の由来

HTML

HyperText Markup Languageの略。
ハイパーは超越。テキストは本文。ハイパーテキストって何がハイパーかというと、リンクをクリックすると別のページに飛べることが（今となっては当たり前に感じるが）ハイパー。*6
マークアップは編集者が校正で赤字の印を付けること。ランゲージは言語。マークアップ言語は文書にタグと呼ばれる印を付ける。なお、タグは洋服などに付ける値札のこと。

CSS

Cascading Style Sheetの略。
カスケード（cascade）は滝。カスケーディングとは滝のように上から下に階段状に処理をすること。
CSSは全体に対する設定から詳細に対する設定に向かって順に処理される。設定値が重複したときには詳細への設定が優先される。
スタイルは見た目。シートは布。スタイルシート言語はHTMLの味気ない見た目をバーーッと、まるで布を被せるよう一瞬で変える。

JS

JavaScriptの略。
Javaは本来ジャワと読むがJSではジャバと読む。先にあったプログラミング言語Java（ジャバ）から来ている。*7
プログラミング言語にはコンパイラ言語とスクリプト言語がある。コンパイラ言語はマシン語*8にコンパイル（変換）しないと動かない。Javaはコンパイラ言語。
スクリプトは台本。台本を書けば役者が演じてくれるように、スクリプト言語もコードを書けばすぐ動く。JavaScriptはJavaに似たスクリプト言語という意味。*9

言語の種類

名前からもわかるように、3言語はそれぞれ種類が異なる。
プログラミング言語はJSだけで、HTMLはマークアップ言語、CSSはスタイルシート言語だ。（すべてコンピュータ言語には含まれる）

コンピュータ言語
- マークアップ言語（HTML）
- スタイルシート言語（CSS）
- プログラミング言語
  - コンパイラ言語
  - スクリプト言語（JS）

コードの見方

Chromeの場合

Webページ*10のコードはブラウザで見ることができる。
ここではどのOSでも使用できるブラウザ「Google Chrome」の「デベロッパーツール」でコードを見る方法を説明する。

f:id:idr_zz:20171018235809p:plain 右クリックを開き、「検証」をクリック。

f:id:idr_zz:20171018235829p:plain 「デベロッパーツール」が開くので、「Sources」タブをクリック。

f:id:idr_zz:20171018235841p:plain 「Sources」タブが開く。左パネルを見るとトップページは「(index)」、他のページでは「.html」の拡張子のファイルが選ばれている。
ディレクトリ（フォルダ）を開くと「.css」「.js」などの拡張子のファイルがある。ファイルを選ぶと右パネルにコードが表示される。
「見えるぞ！私にもコードが見える！！」*11と、なっていただけただろうか。

コードの特徴

コードには何やら半角英数のコンピュータ言語がたくさん書かれている。
これをブラウザが処理することでプレーンテキスト*12が鮮やかなWebページに変身するわけか。ちょっと特徴を拾い見してみよう。

.htmlファイルの特徴

<aaa>テキストテキスト</aaa>
<aaa>テキストテキスト
    <bbb ccc="ddd">
</aaa>
<aaa>テキストテキスト</aaa>
<aaa>テキストテキスト</aaa>

.cssファイルの特徴

aaa { 
    bbb: bbb;
    ccc: 123;
}

aaa { 
    bbb: bbb;
    ccc: "テキスト";
}

.jsファイルの特徴

var aaa = bbb;
var aaa = "テキスト";

function ccc (a, b, c) {
   ddd.ddd("テキスト");
   eee.eee("123");
   return;
}

fff.ccc(a, b, c);

ナンじゃこりゃこりゃ、ワケわかんないよね？暗号かよ！ナンで3つとも書き方が違うのよ？
大丈夫、みんな最初はそう思った。本連載で少しずつ丁寧に解説していくのでご安心を！

コードを書きたくなったら…

もし本連載がキッカケで自分でもコードを書いてみたいと思ったそこのあなた。すでに世界は開かれている！いつやるか？今でry

Webサイトを形作る言語「HTML」「CSS」「JS」は、ブラウザが処理を行なってくれるためコンパイルが不要。我々のPC*13にも環境構築は不要だ。テキストエディタにコードを書いて、サーバにアップすればすぐにWebサイトを公開できる。*14

テキストエディタはPCに標準で入っているメモ帳（Windows）やテキストエディット（Mac）でも構わない。
なお、プログラミング向けの無料*15のテキストエディタもある。コードに色の目印が付いたり、行番号の表示、検索置換、文字コードの指定など便利な機能が揃っていて、より使いやすいかと思う。*16

また、テキストエディタをインストールをする前にお試し体験をしてみたい方は、オンラインテキストエディタ「CodePen」をお勧めする！*17いつやるか？今でry

テキスト原稿サンプル

最後に、本連載のサンプルとして下記の「テキスト原稿」を用意した。*18

イイダリョウ

Webデザイナー。神奈川県在住。 丹沢山地と相模湾の自然に囲まれて暮らしています。

さらに詳しい情報はコチラ（リンク）

（※ここに写真を表示）

見ての通り誰にでも読めるプレーンテキストだ。これをブラウザで表示するとこうなる。

「Result」タブが実際のブラウザでの表示だ。「HTML」タブがテキスト原稿だ。
ブラウザの文字サイズは均一で、しかもテキスト原稿に入っている改行すら再現されてないじゃないか！うむ、わかった。どうにかする、きっと。

次回はいよいよWebサイトの文書構造を司る「HTML」の書式から解説していこう。

※次回：【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2

idr-zz.hatenablog.com

本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。
なるべく平易な言葉で、段階的な説明を心がけたつもりです。（書きながら自分自身の復習にもなりました）
もし内容に不明点、おかしい点などあれば（優しく）ご指摘いただけると幸いです。

※参考：【HTML、CSS、JSの書式】まとめ
qiita.com

*1:ソースコード。人が書いたコンピュータへの命令のこと。

*2:某胃腸薬

*3:ネットワーク上のファイル置き場

*4:Webサイトを表示するソフト。今見ているこれね。あ、もしかしたらブラウザ以外でこの記事を見ている方もいるかも？それでも表示している技術（Webビューという）には3言語が関係している。

*5:昔は混ざり合った部分もあったが、役割を明確にすることで、修正や拡張がしやすくなった。

*6:ちなみにWebサイトのURLにあるhttpはHypertext Transfer Protocolの略。HTの部分はHTMLと共通する。ハイパーテキスト通信規約という意味。

*7:ちなみに本家Javaの由来はジャワコーヒーらしい。Javaを作った人がよく行くカフェで飲んでいたらしい。

*8:いわゆる膨大な1と0の塊ね

*9:そしてHTML、CSSもまたコンパイル不要な言語！

*10:ブラウザに表示される単一ページをWebページという。そのページが集まったサイト全体をWebサイトという。そしてTopページをホームページという。

*11:赤い彗星

*12:何の文字装飾もないただのテキスト。Windowsのメモ帳、Macのテキストエディットでお馴染みの。

*13:念のため脚注。パソコンね。パーソナルコンピュータ。今これを見ているのはPCかスマホかそれ以外か…。

*14:サーバへのアップロードにはFTPソフトが必要（今回は触れない）。ちなみにFTPはFile Transfer Protocolの略。TPの部分はHTTPと共通で、ファイルの通信規約という意味。

*15:フリーソフトという

*16:フリーではWindows用のTeraPad、Mac用のmi、CotEditor、などが有名。また、スマホやタブレットなどタッチデバイス用のテキストエディタもあるよ！

*17:本連載のサンプルにもCodePenを利用している。

*18:といっても単にこのブログの紹介文だが…

クモのようにコツコツと

フロントエンドエンジニアイイダリョウの技術ブログ。略称「クモコツ」