noyu38 資料置き場

Appearance

HTMLのおさらい ​

JSはHTMLと一緒に使用される言語です。ということで、まずはHTMLについて知っておかなければお話になりません。

目次 ​

タグと要素 ​

HTMLでは、文字をタグで囲んで意味を付けます。

html
<h1>あいさつ</h1>
<p>Hello world!</p>

<h1>は見出し、<p>は段落を表すタグです。通常は、開始タグと終了タグを組み合わせます。

<タグ名>内容</タグ名>

開始タグから終了タグまでを、まとめて要素と呼びます。

TIP

終了タグには/が付きます。<p>で始めたら、</p>で閉じましょう。

HTMLの雛形 ​

HTMLの雛形を示します。

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<title>タグの内容を書き換えればタイトルを変えることができます。また、基本的には<body>タグの内容に書き加えていくことでWebページを作っていくことになります。

といっても、HTMLファイルを作るたびにこれを毎回書くのは面倒くさいですよね。VSCodeにはこれを一発で自動入力してくれる方法があります。index.htmlというファイルを作って開き、一番はじめに!と入力してEnterを押してください。

WARNING

HTMLの拡張機能をVSCodeにインストールしておく必要があります。また、VSCodeの自動生成はデフォルトでlang="en"になっています。適宜言語を日本語に修正してください。

よく使うタグ ​

見出し: h1～h6 ​

html
<h1>一番大きな見出し</h1>
<h2>その中の見出し</h2>
<h3>さらに細かい見出し</h3>

数字が大きくなるほど下の階層の見出しになります。

段落: p ​

文章のまとまりにはpを使います。

html
<p>あいうえお</p>

リンク: a ​

別のページへ移動できるリンクを作ります。

html
<a href="https://example.com">Exampleを見る</a>

画像: img ​

画像を表示します。

html
<img src="cat.png" alt="座っている猫">

srcは画像がある場所、altは画像を表示できないときなどに使われる説明文です。

TIP

画像ファイルがローカルに存在する場合、例のように相対パス記法を使って指定することができます。

もちろん、インターネットのリンクなどをsrcで指定することもできます。

リスト: ulとli ​

順番のない箇条書きにはulを使います。各項目はliで囲みます。

html
<ul>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ul>

順番が重要なリストにはolを使います。

html
<ol>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ol>

ボタン: button ​

ボタンです。

html
<button>押してね</button>

この段階では、押してもまだ何も起きません。JavaScriptなどでクリックしたときの処理を書く必要があります。

divとspan ​

複数の要素をまとめて扱いたいときにはdivタグを使います。

html
<div>
    <h1>自己紹介</h1>
    <p>こんにちは、私は〇〇です。</p>
</div>

文章の中の一部分を切り取って扱いたいときにはspanタグを使います。

html
<p>好きな食べ物は<span>ハンバーグ</span>です。</p>

divもspanも、囲っただけでは見た目が変わることはありません。しかし、後でCSSやJSで要素を扱いたいときに便利なので非常によく使われます。

divはある程度の大きな要素のかたまりをグループ化したいときに使うのに対し、spanは要素内のごく一部だけを切り出して扱いたいときに使います。「自己紹介の章だけフォント変えたいんだよね～」って時にはdiv、「自己紹介の文章の名前の部分だけ赤色にしたい！」って時にはspanといったように使い分けます。

classとid ​

HTMLの要素には、classやidという属性を付けられます。どちらも要素を見分けるための名前ですが、使い方が違います。

class：同じ種類の要素をまとめる ​

例えば、おすすめの本を3冊表示するとします。

html
<p class="book">HTML入門</p>
<p class="book">CSS入門</p>
<p class="book">JavaScript入門</p>

3つの段落に同じclass="book"を付けました。classは、複数の要素に同じ名前を付けられます。「これらは同じ種類の要素です」という目印だと思ってください。

後でCSSを使うと、bookというclassを持つ要素の見た目をまとめて変更できます。

css
.book {
  color: blue;
}

CSSでは、class名の前に.を付けます。この例では、3冊の本の文字がすべて青くなります。

id：特定の要素を見分ける ​

html
<h1 id="page-title">おすすめの本</h1>

idは、そのページ内で特定の1つの要素を見分けるために使います。同じページで同じidを複数の要素に付けないでください。

CSSでidを指定するときは、名前の前に#を付けます。

css
#page-title {
  color: green;
}

1つの要素に複数のclassを付ける ​

class名を半角スペースで区切ると、1つの要素に複数のclassを付けられます。

html
<p class="book favorite">HTML入門</p>
<p class="book">CSS入門</p>

最初の段落にはbookとfavoriteの2つのclassが付いています。「本」という共通の目印に加えて、「お気に入り」という目印も付けた形です。

また、1つの要素にclassとidの両方を付けることもできます。

html
<p class="book favorite" id="first-book">HTML入門</p>