教材ライブラリ

授業で使うスライド、触って動かせる図解、レッスンの導入スライドをまとめています。左のリストで絞り込むか、キーワードで検索してください。

スライド103 触れる図解135 レッスンの導入17

3 件 / 全 17 件（合計 15 枚）

HTML/CSS入門

HTML の基本構造

5 枚

HTML/CSS入門 - HTML の基本構造

タグは飾りではなく意味付け

タグを外して、同じ文字がブラウザにどう届くか見てください。

1 / 5

1つの要素は3つの部品でできている

開始タグ、中身、終了タグの3つです。終了タグの / を書き忘れると、その先の文まで見出しの中身として読まれます。

<h1>プログラミングの世界へ</h1>

ここから見出し

ここまで見出し

<a href="https://noiman.jp">noiman</a>

リンク先を渡す属性

属性は開始タグの中にだけ書きます。終了タグには書けません。

2 / 5

HTML/CSS入門 - HTML の基本構造

ページの外枠は毎回同じ

どのページもこの形から始まります。head は設定を書く場所で画面には出ません。目に見えるものは全部 body の中です。

「書いたのに画面に出ない」の多くは、body ではなく head に置いてしまった間違いです。まず自分の書いた行がどちらにあるか見てください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのページ</title>
  </head>
  <body>
    <h1>プログラミングの世界へ</h1>
  </body>
</html>

3 / 5

HTML/CSS入門 - HTML の基本構造

ここでつまずく

HTML のエラーは赤い文字で止まってくれません。黙って別の意味に読まれます。

文字を大きくしたいだけなら CSS の仕事です。見出しかどうかで h1 を選びます。

書いたこと	どう読まれるか
終了タグを書き忘れる	後ろの文まで同じ要素の中身になる
見た目のために h1 を選ぶ	大きいだけの見出しが増える
改行しただけで段落を分ける	1つの段落として続けて表示される
全角の < を書く	タグではなく文字として出る

4 / 5

考えてみよう外しても進めます

文字を大きく太くしたいという理由だけで、段落を h1 タグで囲みました。何が起きますか。

当ててから次の枚で確かめると、答えが記憶に残ります。

5 / 5

HTML/CSS入門

CSS の書き方

5 枚

HTML/CSS入門 - CSS の書き方

CSS が変えるのは並びと見た目

CSS を外して、同じ中身がどう積み上がるか見てください。

1 / 5

どれに・何を・どうする

CSS の1つの決まりは、当てる相手のセレクタと、変える項目のプロパティと、値の3つでできています。

h1 {

どれに当てるか

color: #05b45b;

何を変えるか

どう変えるか

font-size: 32px;

}

1つの決まりの終わりには必ずセミコロンを打ちます。最後の1行だけ抜けても、次の行が読まれなくなります。

2 / 5

同じ相手に2回当てたら、後ろが勝つ

CSS は上から順に読まれ、あとから来た決まりが前の決まりを上書きします。効かないと思ったスタイルは、たいてい下の行に負けています。

h1 {

color: #05b45b;

}

/* ずっと下の行 */

h1 {

color: #333333;

あとに書いたほうが残る

}

画面に出る色

書いた順	color の値	結果
1つめ	#05b45b	負ける
2つめ	#333333	こちらが出る

消えたのではなく、後ろの行に上書きされただけです。

タグの style 属性に書くと、この順番でいつも勝ってしまいます。CSS は別ファイルに書いて link で読み込みます。

3 / 5

HTML/CSS入門 - CSS の書き方

ここでつまずく

書いたはずのスタイルが効かないとき、原因はだいたいこの4つのどれかです。

保存し直しても変わらないときは、読み込み直しをキャッシュ無しでやってみます。

起きること	何を見るか
全部当たらない	link のパスとファイル名
1つだけ当たらない	セレクタの綴りと、class の . の付け忘れ
上書きされる	同じ相手に当てた別の決まりが後ろにないか
直したのに変わらない	ブラウザが古い CSS を持っている

4 / 5

考えてみよう外しても進めます

CSS ファイルを読み込む link の行を消すと、ページはどうなりますか。

当ててから次の枚で確かめると、答えが記憶に残ります。

5 / 5

HTML/CSS入門

要素の取得と変更

5 枚

HTML/CSS入門 - 要素の取得と変更

書き換わるのは画面だけ

1手ずつ進めて、右の画面と下のファイルのどちらが変わるか見てください。

1 / 5

取ってから変える

要素を変えるには、先にどれを変えるのかを取ってきます。取れていないものは変えられません。

const msg = document.getElementById("msg")

id で1つ取る

HTML に書いた id

msg.textContent = "ようこそ"

中の文字を差し替える

id が見つからないと null が返ります。その次の行で「null の textContent は読めない」と止まります。

2 / 5

触った1か所だけが入れ替わる

textContent に代入すると、その要素の中の文字だけが入れ替わります。まわりの要素も、もとの HTML ファイルもそのままです。

const msg = document.getElementById("msg")

msg.textContent = "ようこそ"

ここだけが入れ替わる

書き換えたあと

どこ	前	後
画面の h1	はじめてのページ	はじめてのページ
画面の p（id は msg）	こんにちは	ようこそ
index.html の中身	こんにちは	こんにちは

動いたのは1行だけです。ファイルの行は最後まで変わりません。

見た目は style を1つずつ書かず、classList.add で class を付け外しします。CSS とどちらが本当かが分からなくなります。

3 / 5

HTML/CSS入門 - 要素の取得と変更

ここでつまずく

取得できていない、という一点が形を変えて出てきます。

script は body の終わり近くに置くか、読み込み完了を待ってから動かします。

起きること	原因
null になる	id の綴り違い、または要素より先に script が動いた
何も起きない	取った要素と、画面で見ている要素が別物
読み込むと元に戻る	変えたのは画面だけで、保存はしていない
1つしか変わらない	getElementById は1つしか返さない

4 / 5

考えてみよう外しても進めます

ボタンで画面の文字を書き換えたあと、ページを読み込み直すとどうなりますか。

当ててから次の枚で確かめると、答えが記憶に残ります。

5 / 5