はじめよう JavaScript

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」とします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ようこそ！kintoneへ</title>
</head>
<body>
  <h1 id="hello">ようこそ！kintoneへ</h1>
  <p class="text">kintoneカスタマイズを使いこなしましょう。</p>
  <p class="text">一緒に頑張りましょう。</p>
</body>
</html>

作成したファイルを Chrome のウィンドウにドラッグ&ドロップすると、テキストだけのページが表示されるはずです。

「たったこれだけのページを作るのに、こんなに複雑な記述が必要なのか…」と、途方に暮れたかもしれません。
しかし、この HTML をゼロから記述できなくても大丈夫です。kintone 側が HTML を用意してくれているからです。
これから説明する最低限必要な HTML の概要を理解しておきましょう。

タグ

<head> や <body> など、<> で囲まれた部分をタグと呼びます。
タグにはいろいろな種類があり、記述したい内容に合わせて使い分けていきます。
たとえば、h1 タグは最上位の見出しを、p タグは段落を意味するタグです。
どんなタグがあるのかは、MDN Web Docs を参照するといいでしょう。

HTML 要素リファレンス - HTML: HyperText Markup Language | MDN (External link)

<タグ名> を開始タグ、</タグ名> を終了タグと呼び、開始タグと終了タグの間に内容を記述します。

要素

開始タグから終了タグまでの部分を要素と呼びます。 要素の名前はタグの名前と同じです。
たとえば、h1 タグを使った要素なら、要素の名前は「h1 要素」となります。

id と class

タグ内の「id」や「class」といった記述は、これから説明する CSS で「見た目を適用する要素」を指定するために使います。

1
2
3

<h1 id="hello">ようこそ！kintoneへ</h1>
<p class="text">kintoneカスタマイズを使いこなしましょう。</p>
<p class="text">一緒に頑張りましょう。</p>

id は、同じ Web ページ内で重複した値を指定できないので、一度しか使えません。
対して、class は何度でも同じ値を指定できます。
id と class の使い方は、冒頭の人間の例を借りると、次のようなイメージです。

  • オーダーメイドの服を作りたいなら id を使う。
  • S／M／L といった、体型の分類で服を選びたいなら class を使う。

以上で HTML の基礎的な知識は習得できました。

CSS

HTML で内容や構造を記述した Web サイトの「見た目」を変更するのが CSS です。
CSS を使うと、Web サイトの背景色やテキストの大きさなどを変更できます。

先ほど記述した HTML を、次のように変更しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ようこそ！kintoneへ</title>
  <style>
    body {
      color: white;
      background-color: black;
    }
    #hello {
      color: black;
      background-color: white ;
    }
    .text {
      font-size: x-large;
    }
  </style>
</head>
<body>
  <h1 id="hello">ようこそ！kintoneへ</h1>
  <p class="text">kintoneカスタマイズを使いこなしましょう。</p>
  <p class="text">一緒に頑張りましょう。</p>
</body>
</html>

変更箇所は、head 要素内に style 要素を追加している点です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<style>
  body {
    color: white;
    background-color: black;
  }
  #hello {
    color: black;
    background-color: white ;
  }
  .text {
    font-size: x-large;
  }
</style>

HTML ファイルを保存してブラウザーを更新すると、画面の見た目が大きく変わるはずです。

CSS も HTML と同じく、基礎的な知識をおさえておくことが大切です。
今回追加した style 要素の記述内容を理解できる知識があれば、JavaScript の学習を始めるには十分です。

CSS を構成する部分は、大きく分けて「セレクタ」「プロパティ」「値」です。
次のようなフォーマットにしたがって、セレクタ、プロパティ、値を記述します。

1
2
3

セレクタ {
  プロパティ: 値;
}

セレクタは、見た目を適用する要素を指定する部分です。 先ほど説明したとおり、HTML の要素名や id、class を使って指定できます。

要素の種類で指定する場合

スタイルを適用する範囲を要素の種類で指定する場合は 要素名 {} と記述します。
今回の例では、body 要素にスタイルを適用しています。

1
2
3
4

body {
  color: white;
  background-color: black;
}

id で指定する場合

スタイルを適用する範囲を id で指定する場合は #id名 {} と記述します。
今回の例では、id が hello な要素へスタイルを適用しています。

1
2
3
4

#hello {
  color: black;
  background-color: white ;
}

class で指定する場合

スタイルを適用する範囲を class で指定する場合は .class名{} と記述します。
今回の例では、class に text をもつ要素へスタイルを適用しています。

1
2
3

.text {
  font-size: x-large;
}

プロパティは、変更する見た目の種類です。
たとえば、文字色を変更したい場合は color プロパティを、文字サイズを変更したい場合は font-size プロパティを用います。

値は、見た目の色や大きさなどを指定する部分です。プロパティごとに指定できる値は異なります。

CSS のプロパティと指定できる値も、HTML のタグと同様に種類が豊富です。
慣れないうちは MDN Web Docs を参照して、変更したい見た目に対応するプロパティと値を探しましょう。

CSS プロパティリファレンス - CSS: カスケーディングスタイルシート | MDN (External link)

今回は HTML 内に style 要素を追加することで CSS を記述しましたが、CSS を HTML と切り離して別ファイルとして作成できます。
kintone カスタマイズでは CSS のみを記述したファイルを適用するので、覚えておきましょう。

まとめ

JavaScript の学習を進めるための土台となる HTML／CSS の基礎知識を身につけることができました。
HTML と CSS だけでも Web サイトを作ることは可能ですが、ユーザーごとに画面を変更したり、ボタンをクリックするとダイアログを表示したりといった「動的」な Web サイトを作るには、JavaScript が必須です。
kintone カスタマイズでも、ボタンクリックで初期値を自動入力したり、値に応じてフィールドの色を変えたりといった「動的」な機能を、JavaScript を使って実現します。
次回は アウトプット方法／DOM 操作／基本文法 について学習しましょう。