はじめよう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: カスケーディングスタイルシート | MDN (External link)

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

まとめ

固定リンクがコピーされました

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