HTMLとCSSとJavaScriptの基本の基本

今回は、Webページを表示するために使うHTML、CSS、JavaScriptという3つについて、その関係と、それぞれで何ができるのかを説明していきます。

なるべく簡潔に、プログラミングに慣れていない方にも概要が伝わるよう書こうと思いますので、興味がある方はどうぞ。

【注意！】
この記事は、一般的な定義ではなく、私自身の言葉で説明する記事です。
ちゃんとした定義が知りたい場合は、W3Cなどのページを参照してください。

１．基本ルール

Webページで使う3つの要素の関係は、簡単に言うとこんな感じ。

HTMLは存在を表現する

CSSは状態を表現する

JavaScriptは動作を表現する

以上！おわり！

・・・だとさすがに短すぎるので、1つずつ掘り下げます。

２．HTMLは存在を表現する

全てはここから。

HTMLでは、Webページに『何が存在するか』を定義します。
よくある例はこんな感じです。

<html>
  <head>ページの設定を書く（見えない）</head>
  <body>ページの要素を書く（見える） </body>
</html>

上記のように、世の中の全てのWebページは、「html」「head」「body」という3種類から始まります。

この『<html>』や『<body>』の1つずつをタグと言い、スラッシュがついていない方は「開始タグ」、ついている方が「終了タグ」です。

HTMLでは、この開始～終了の間に他のタグを記述し、色々な表現をしていきます。

htmlタグはページの存在を表すおまじないのようなもので、「『<html>』から『</html>』までがこのページのことだよ」という意味になります。

headタグはこのページの設定情報を書きます。headタグに書いた内容は、ブラウザで表示した時には見えない状態になります。

bodyタグはこのページの内容を記述します。今こうして見えているブログの本文も、上のほうに表示されているタイトルも、目に見えている全ての要素はbodyタグの中に書かれています。

その他にもタグの種類は沢山ありますが、ここでは説明しきれないため、決まりの部分だけにします。

タグを使うと、以下のことを表現できます。

タグの親子関係

開始と終了の間に別のタグを書くと、それらのタグは親子の関係になります。

<div>
　親要素
  <span>子要素1</span>
  <span>子要素2</span>
</div>

表示例）

親要素
子要素1
子要素2

上の例では、divタグという親が居て、spanタグという2人の子どもを持っていることを表しています。

HTMLを勉強すると「親子」や「孫」といった話が必ず出てくるので、その時はこれのことだと思ってください。

そして残念ながら、親は1人。悲しいことに必ず片親です。
離婚したのか、予期せずできちゃったのか・・・という妄想は各人におまかせします。

タグの順番

ここでいう順番とは、「何番目の子どもなのか」ということです。

<div>
  <span>1番目の子供</span>
  <span>2番目の子供</span>
</div>

HTMLは基本的に上から下へ配置されていくため、その順番のことです。

この時、1番目と2番目の要素は兄弟要素と呼ばれます。

今回は詳しく書きませんが、CSSなどで「div要素の2番目の子供は文字色を赤くする」といったように、要素の順番を指定する時に使います。

タグの属性

タグには「属性」を付けることができます。

<div id="div_sample" name="でぃぶようそ">div要素です</div>

この例でいうと、属性「id」の値は「div_sample」、属性「name」の値は「でぃぶようそ」となっています。

属性には特定の意味を持つものもありますが、ここでの説明は省略します。

※上記の通り、HTMLは全ての存在を表します。そのため、以下で紹介するCSSやJavaScriptも「styleタグ」「scriptタグ」などをHTMLで用意し、その中に書くことになります。

例）

<html>
  <head>
    <style>/* ここにCSSを書く */</style>
    <script>/* ここにjavaScriptを書く */</script>
  </head>
  <body></body>
</html>

３．CSSは状態を表現する

CSSは要素の状態を表します。

/* 通常時の表示 */
.div_sample {
  background: blue; /* 背景色は青 */
  color: white; /* 文字の色は白 */
}
/* マウスカーソルを乗せた時の表示 */
.div_sample:hover {
  background: red; /* 背景色を赤に変更 */
}

表示例）

div要素

この例では「普通にしている状態」と「要素にマウスを乗せている状態」の2つの状態で、それぞれ違う見え方を定義しています。
※スマホの場合、要素をタップすると変化し、別の部分をタップすると元に戻ります。

タグの種類ごとにデフォルトの表示方法が決められているため、CSSの記述は必須ではありません。ですので、デフォルトの見た目を変えたい場合にのみ、CSSを記述することになります。

４．JavaScriptは動作を表現する

JavaScriptの役割は色々ありますが、主に使うのはこんな時です。

HTMLやCSSを書き換える
外部のサイトと通信する
ダイアログ表示など、システム的な動作をさせる

JavaScriptではこれらの動作の内容と、それを行うタイミングを指定します。

タイミングとして使えるのは、「時間を指定して実行する（何秒後 or 何秒毎）」か、「何かが起きた時に実行する」かのどちらかです。

例）2秒間隔でCSSを書き換え、要素を表示/非表示させる

2秒ごとに出たり消えたりします

例）クリックされた時にダイアログを表示する

クリックしたらダイアログが出ます

補足１：CSSでの動作と、JavaScriptを使った動作の違い

最近はCSSだけでも状況に応じて要素を動かすことができますが、JavaScriptを使って動かす場合とは明確な違いがあります。

例えば「ある要素にマウスを乗せた時、その要素の横幅を増やしたい」とすると、JavaScriptでもCSSでも同じように実装することが可能です。

例）CSSでの実装

横幅が増える

例）JavaScriptでの実装

横幅が増える

※スマホの場合「要素タップ⇒別の所タップ」を繰り返してください。

しかし、CSSでは「マウスを乗せられたら、横幅が増える」としか書けません。なので、マウスを何度乗せても結果は同じです。

それに対してJavaScriptの場合、マウスを1回、2回．．．と乗せていく度に横幅を無限に増やし続けることができます。

つまり、1回目の結果 + 2回目の増加分、2回目の結果 + 3回目の増加分、というように動かした結果を保存し、次の動作に使いたい場合には、JavaScriptが必須になります。

補足２：開発者ツールを使おう！

ここまで読んで下さった方は、Webページがどう作られているのか何となく分かったかと思います。

もしPCで見ているのであれば、キーボードの「F12」を押してみましょう。

ブラウザによって見え方は違いますが、chromeだとこんな感じのツール（開発者ツール）が出てくるはずです。
f:id:MasaoBlue:20160508114233p:plain

開発者ツールを使うと、今見ているWebページの実装内容を確認したり、CSSをその場で書き変えて表示結果を見たりすることができます。

【操作方法(外部リンク)】Chromeデベロッパー・ツール（要素を検証）の基礎的な使い方｜ferret [フェレット]

他のサイトで面白い部品を見つけた場合、それがどんな実装なのかチェックしておくと、自分のブログをいじる時の引き出しを増やすことができます。

さいごに

仕事でWeb関連の開発をしていることもあり、色々な人にWebのことを知って貰いたいなーと思っています。

学校の先生でも「あの先生は分かりやすい」と思えるかどうかは個人の相性な気がするので、自分の言葉で説明していけば、誰かの役に立つかなぁと考えてみました。

「あの部品ってどう実装されてんの？」とか、「ここがどうしても変えられない・・・」とか、その他疑問点などがありましたらご相談ください。

答えられる範囲でお答えします。

とりあえず今日は、基本的な部分まで。

------

続き

www.masaoblue.com

以前書いた、CSSで遊ぶ記事

まさおまっさお

おいまさおがんばれまさお