第2章 JavaScriptと蜜月の関係であるHTMLとCSS入門

公開日：2024年6月27日

最終更新日：2024年9月18日

JavaScriptはウェブページの内容をリアルタイムに変更するために生まれたプログラミング言語です。

ウェブページの仕組みは、

HTMLでウェブページの骨組みを作り、
CSSでウェブページの見た目を整え、
JavaScriptでHTMLとCSSをリアルタイムに変更する

というものです。三位一体ですので、JavaScriptの学習に入る前に、ウェブページの仕組みについて必要最低限は理解しておいた方がいいでしょう。

ウェブページがどのように書かれているか

ウェブページがどのようなコードで書かれているかを、実際にコードを見て確認してみましょう。

このページの画像以外の場所で右クリックして「ページのソースを表示」をクリックしてみてください。

ブラウザの新しいタブが開き、そこに表示されるコードがHTML(HyperText Markup Language)です。「ハイパーテキストマークアップ言語」と言われてもなんのことやらですよね。百聞は一見にしかず、習うより慣れろです。

この縦長のファイルから基本的なコードだけを書き出すと以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScriptと蜜月の関係であるHTMLとCSSのキホン</title>
  </head>
  <body>
    <h1>JavaScriptと蜜月の関係であるHTMLとCSSのキホン</h1>
    <p>JavaScriptはウェブページの内容をリアルタイムに変更するために生まれたプログラミング言語です。</p>
  </body>
</html>

なにやら世の中のウェブページの文字が、実は< >に囲まれて書かれていることを確認しました。

HTMLタグ

以下のようなシンプルなコードを使って学んでいきましょう。

一応このファイルを自サーバーに準備してあります。必要な方はダウンロードして解凍してください。(※ファイルの解凍方法は第1章のファイルの展開(解凍)方法で触れています)

第2章の学習用ファイル(chapter02.zip)のダウンロード

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

<html>や<head>や<body>のように「<」と「>」で囲んだものをHTMLタグといいます。

HTMLタグは

<!DOCTYPE html>のように単独なものと、
<html>~</html>のように開始タグと閉じタグで対になっていて「タグの範囲」と「タグ同士の親子関係」を表現するもの

の2種類があります。

ここでの親子関係は、htmlタグの子がheadとbodyタグで、headタグの子がtitleタグ、bodyタグの子がh1タグとpタグです。

このindex.htmlファイルをブラウザで開きます。(※開く方法は第1章のhtmlファイルをブラウザで開く方法で触れています)

ブラウザがHTMLタグで囲まれた文字列を解釈してこのように表示します。

※ 文字列について。一般にプログラミングでは、

「A」とか「あ」「男」などの1文字を文字といい、
「Answer」とか「ありがとう」「男性」など2文字以上で文字が列になっているのを文字列と

言いますが、明確な使い分けはないので、文字列という聞き慣れない言葉に免疫が出来ればそれで十分です。

それぞれのHTMLタグの役割は以下のようになります。

<!DOCTYPE html>は、HTMLのルールで書きますという宣言。

<html>~</html>は、HTMLが適用される範囲を決める。普通はファイルの先頭から末尾まで全部。

<head>~</head>は、このページの裏側の情報を登録する場所です。

<title>~</title>は、ブラウザのタブに表示される文字列を指定します。

<head>が裏側の情報ならば、<body>~</body>は表になるコンテンツ本体を指します。

<h1>はheading(見出しの意味)タグです。文字通り「見出し」のためのタグです。

何もしなくても最初から太字になります。

h1からh6まで段階があって、数字が大きくなると文字の大きさが徐々に小さくなります。

<p>~</p>は、Paragraph(段落の意味)タグです。

段落とは、前後に改行が入る文章のことです。

2つの「段落あり」はそれぞれpタグで囲まれています。

<p>段落あり</p>
<p>段落あり</p>

CSSとは？

CSS(Cascading Style Sheets：カスケーディングスタイルシート)とは、HTMLタグの文字列の色やフォントサイズなど、見た目(スタイル)を変更するためのものです。

HTMLタグの属性にCSSを書く

pタグにstyle(スタイル:見た目)という情報を追加して、「段落」という文字の色を赤くします。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p style="color: red;">段落</p>
  </body>
</html>

実行結果。

pタグに追加した情報style="color: red"を属性といいます。

属性は、「属性の名前 = 属性の値」という書き方をします。

属性はあらかじめ決められていて、なんでも書いていいものではありません。

ちなみにですが、タグとは洋服のタグと同じ意味です。これはユニクロのズボンのタグです。

「サイズがL」とか「綿99%」とかがHTMLタグの属性に該当します。

headタグ内のstyleタグにCSSを書く

タグの属性にCSSを書きましたが、headタグ内にstyleタグを使って書くことも出来ます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        color: red;
      }
    </style>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

styleの部分、

p{
  color: red;
}

は、「すべてのpタグの文字色をredにして」という命令です。

唯一無二のid属性

もしpタグが2つあって、ひとつだけ色を変更したい時はidという属性を使います。ウェブサイトのマイページなどにログインする時のあのidと同じ意味で、タグに唯一無二のidをつけてピンポイントでタグを特定するためのものです。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #danraku1{
        color: red;
      }
    </style>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p id="danraku1">段落1</p>
    <p>段落2</p>
  </body>
</html>

最初のpタグにだけdanraku1というid属性を追加しました。pタグはpとだけ書きましたが、idを指定する時はid名の前に#をつけます。

p{
  color: red;
}

#danraku1{
  color: red;
}

実行結果。

タグをグループ化するclass属性

pタグが3つあって、その内の2つだけ同じ赤色にするのに便利なclass属性というのがあります。

nakamaというclass名の属性を2つのpタグに付与しました。idは「#」でしたがclassは「.」ピリオドをclass名の前につけます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .nakama{
        color: red;
      }
    </style>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p class="nakama">段落1</p>
    <p class="nakama">段落2</p>
    <p>段落3</p>
  </body>
</html>

実行結果。

class属性を付与した段落1と段落2だけ赤くなっています。

class属性のclassは、学校のクラスと同じニュアンスで、グループという意味あいになります。

CSSを別のファイルに書く

CSSの部分だけを抜き取ってstyle.cssというファイルを作成します。拡張子が.cssであれば他の名前でもいいです。

.nakama{
    color: red;
}

それをindex.htmlと同じ階層に置いて、

index.htmlのheadタグ内にlinkタグでcssファイル名を指定します。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p class="nakama">段落1</p>
    <p class="nakama">段落2</p>
    <p>段落3</p>
  </body>
</html>

実行結果は当然同じになります。

今回学んだことをクイズゲームで確認しよう！

このページで解説したことを全問のクイズ形式のゲームにしました。
ゲーム感覚で復習すると記憶に定着する助けになります。

下の「クイズを開始」ボタンでゲームを開始すると「YES」「NO」ボタンが現れますので、上から降ってくる問題が正しければ「YES」を、間違っているなら「NO」ボタンを押してください。

まとめ

この記事では、JavaScriptの学習に必要な最低限のHTMLとCSSの基本について説明しました。

HTMLはウェブページの骨組み(構造)を作り、CSSはその見た目をスタイリングするためのものでした。

HTMLタグには属性があり、id属性はピンポイントでタグを特定し、class属性は複数のタグをグループ化するものでした。