HTML/CSS
JavaScript と HTML/CSS の関係
これから JavaScript でプログラムを書く方法を学んでいきます。
まずは前提知識として、HTML や CSS について理解を深めることにしましょう。
JavaScript を学ぶコンテンツでいきなり他の技術を学ぶのは、なんだか肩透かしを食らった気分かもしれません。
しかし、Web サイトの構造を支える HTML と見た目を定義する CSS の基礎を理解しておくことは、JavaScript の学習速度を早めることにつながります。
HTML/CSS/JavaScript の関係を、私たち「人間」を例に考えてみましょう。
- HTML:身長や体重、骨格など、身体の構造に関する情報を記述するもの
- CSS:服装やメイクなど、見た目に関する情報を記述するもの
- JavaScript:「食べ過ぎて太ってしまった」「冬になったから厚着をした」といった、体型や見た目の「動き」を記述するもの
いくら「太る」「厚着をする」といった「動き」の記述があっても、その対象が存在しなければ意味ありませんよね。
このように、JavaScript は「操作の対象」あってこその存在で、その対象となる HTML/CSS の理解が、JavaScript の理解には必須なのです。
HTML
HTML は Hyper Text Markup Language の頭文字で、Web サイトの内容や構造の記述に使います。
今、あなたが見ているこのページも、ブラウザーが HTML を読み込むことで表示されています。
とはいえ、普段のネットサーフィンで HTML を直接見ることはありません。
HTML を理解するため、実際に HTML を記述してみましょう。
まずは次のように HTML を記述したテキストファイルを用意して、ファイルの拡張子を「.html」とします。
|
|
作成したファイルを Chrome のウィンドウにドラッグ&ドロップすると、テキストだけのページが表示されるはずです。
「たったこれだけのページを作るのに、こんなに複雑な記述が必要なのか…」と、途方に暮れたかもしれません。
しかし、この HTML をゼロから記述できなくても大丈夫です。kintone 側が HTML を用意してくれているからです。
これから説明する最低限必要な HTML の概要を理解しておきましょう。
タグ
<head>
や <body>
など、<>
で囲まれた部分をタグと呼びます。
タグにはいろいろな種類があり、記述したい内容に合わせて使い分けていきます。
たとえば、h1
タグは最上位の見出しを、p
タグは段落を意味するタグです。
どんなタグがあるのかは、MDN Web Docs を参照するといいでしょう。
HTML 要素リファレンス - HTML: HyperText Markup Language | MDN
<タグ名>
を開始タグ、</タグ名>
を終了タグと呼び、開始タグと終了タグの間に内容を記述します。
要素
開始タグから終了タグまでの部分を要素と呼びます。
要素の名前はタグの名前と同じです。
たとえば、h1
タグを使った要素なら、要素の名前は「h1
要素」となります。
id と class
タグ内の「id」や「class」といった記述は、これから説明する CSS で「見た目を適用する要素」を指定するために使います。
|
|
id は、同じ Web ページ内で重複した値を指定できないので、一度しか使えません。
対して、class は何度でも同じ値を指定できます。
id と class の使い方は、冒頭の人間の例を借りると、次のようなイメージです。
- オーダーメイドの服を作りたいなら id を使う。
- S/M/L といった、体型の分類で服を選びたいなら class を使う。
以上で HTML の基礎的な知識は習得できました。
CSS
HTML で内容や構造を記述した Web サイトの「見た目」を変更するのが CSS です。
CSS を使うと、Web サイトの背景色やテキストの大きさなどを変更できます。
先ほど記述した HTML を、次のように変更しましょう。
|
|
変更箇所は、head
要素内に style
要素を追加している点です。
|
|
HTML ファイルを保存してブラウザーを更新すると、画面の見た目が大きく変わるはずです。
CSS も HTML と同じく、基礎的な知識をおさえておくことが大切です。
今回追加した style
要素の記述内容を理解できる知識があれば、JavaScript の学習を始めるには十分です。
CSS を構成する部分は、大きく分けて「セレクタ」「プロパティ」「値」です。
次のようなフォーマットにしたがって、セレクタ、プロパティ、値を記述します。
|
|
セレクタは、見た目を適用する要素を指定する部分です。 先ほど説明したとおり、HTML の要素名や id、class を使って指定できます。
要素の種類で指定する場合
スタイルを適用する範囲を要素の種類で指定する場合は 要素名 {}
と記述します。
今回の例では、body
要素にスタイルを適用しています。
|
|
id で指定する場合
スタイルを適用する範囲を id で指定する場合は #id名 {}
と記述します。
今回の例では、id が hello
な要素へスタイルを適用しています。
|
|
class で指定する場合
スタイルを適用する範囲を class で指定する場合は .class名{}
と記述します。
今回の例では、class に text
をもつ要素へスタイルを適用しています。
|
|
プロパティは、変更する見た目の種類です。
たとえば、文字色を変更したい場合は color
プロパティを、文字サイズを変更したい場合は font-size
プロパティを用います。
値は、見た目の色や大きさなどを指定する部分です。プロパティごとに指定できる値は異なります。
CSS のプロパティと指定できる値も、HTML のタグと同様に種類が豊富です。
慣れないうちは MDN Web Docs を参照して、変更したい見た目に対応するプロパティと値を探しましょう。
CSS プロパティリファレンス - CSS: カスケーディングスタイルシート | MDN
今回は HTML 内に style
要素を追加することで CSS を記述しましたが、CSS を HTML と切り離して別ファイルとして作成できます。
kintone カスタマイズでは CSS のみを記述したファイルを適用するので、覚えておきましょう。
まとめ
JavaScript の学習を進めるための土台となる HTML/CSS の基礎知識を身につけることができました。
HTML と CSS だけでも Web サイトを作ることは可能ですが、ユーザーごとに画面を変更したり、ボタンをクリックするとダイアログを表示したりといった「動的」な Web サイトを作るには、JavaScript が必須です。
kintone カスタマイズでも、ボタンクリックで初期値を自動入力したり、値に応じてフィールドの色を変えたりといった「動的」な機能を、JavaScript を使って実現します。
次回は
アウトプット方法/DOM 操作/基本文法 について学習しましょう。