1. Web講座 第２回

2. 前回のおさらい
パスについて
タグと要素と属性について
CSSの書き方
次回の講座

3. 前回の講座では、HTML・CSS・JavaScriptの
簡単な説明と記述の仕方を説明しました。

4. HTMLにCSSを適用する ～タグに直接指定～

5. HTMLにCSSを適用する ～headタグ内に指定～

6. HTMLにCSSを適用する ～CSSファイルを指定～

7. HTMLにJSを適用する ～headタグ内に指定～

8. HTMLにJSを適用する ～bodyタグ内に指定～

9. HTMLにJSを適用する ～JSファイルを指定～

10. 絶対パス
ルートディレクトリから
目的のディレクトリまでの
道筋を記述するもの
例：/aaa/ccc/index.html
v
root
aaa bbb
ccc ddd eee
index.html
index1.html
index2.html

11. 相対パス
現在のディレクトリから目的のディレクトリまでの
道筋を記述するもの
「../」は一つ上のフォルダを指し
「./」は同じフォルダを指している
例：現在位置「ddd」
../../bbb/eee/index2.html
v
root
aaa bbb
ccc ddd eee
index.html
index1.html
index2.html

12. <p id=“text”>内容</p>
タグの始まりから終わりまでを要素と呼ぶ

13. <p id=“text”>内容</p>
タグの名前を要素名と呼ぶ

14. <p id=“text”>内容</p>
赤字の部分を属性と呼ぶ

15. <p id=“text”>内容</p>
赤字の部分を属性名と呼ぶ

16. <p id=“text”>内容</p>
赤字の部分を属性値と呼ぶ

17. 要素には
ブロックレベル要素と
インライン要素がある

18. ブロックレベル要素とは
見出し・段落・表など、文書を構成する基本となる要素であり、
一つのかたまりとして認識する
例：<div>,<form>,<h1>~<h6>,<hr>,<p>,<table>,<ol>,<ul>

19. インライン要素とは
ブロックレベル要素の内容として用いられる要素で、
文章の一部として扱う
例：<a>,<br>,<span>,<strong>

20. 要素の配置ルール
ブロックレベル要素にインライン要素を配置することはできるが
インライン要素の中にブロックレベル要素は配置することができない
例：<div><span></span></div>
<span><div></div></span>

21. id属性
id属性は要素に対してID(名前)をつけることができる
IDは重複できない
例：<p id=“text”></p> <div id=“text”><div>

22. class属性
class属性は要素に対してクラス名をつけることができる
class名は重複できる
例：<p class=“sample1”>内容１</p>
<p class=“sample1”>内容２</p>

23. 基本形 ～要素名～
セレクタ（スタイルを適用させる場所）
プロパティ 値

24. 基本形 ～id属性～

25. 基本形 ～class属性～

28. コメント

29. ５月２７日
CSSについて