1. 第十三回ネットワーク
チーム講座資料
今までの復習

2. 目次
• はじめに
• 重要事項の復習

3. はじめに
復習してほしい重要そうな所を過去の資料から引っ張ってきました。
しかし、次回もJavaScriptを使用した活動を行いますので、第十回以
降は全体的に復習して、よく理解しておいてください。
もし、見直してみてよくわからない・覚えていないところがあれば
遠慮なくチーム窓にでも質問してください。

4. 要素の種類
（第三回資料参照）
1. ブロックレベル要素
見出しや段落など、文書の骨組みとなる要素
要素のあとは自動的に改行される
例：<h1>-<h6>,<table>,<p>,<form>…など
2. インライン要素
リンクや画像など、文章の一部と扱われる要素
例：<a>,<br>,<label>,<script>…など

5. パスの指定
（第三回・第四回資料）
パスを指定する際は、「フォルダA/フォルダB/ファイル名」のよう
に、一階層下に降りる度に「/」で区切る。
相対パスで指定する場合、
• 現在のフォルダは「./」（省略可能）
• 一つ上のフォルダは「../」
と記述する。

6. セレクタの指定方法
（第四回資料）
1. 要素名
2. id属性
3. class属性
4. 全称セレクタ
5. 複数セレクタ
6. 子孫セレクタ
7. 子セレクタ
8. 隣接セレクタ
9. 後続セレクタ
10.擬似要素
11.擬似クラス

7. 階層構造
（第五回資料）
ツリー構造ともいう。HTML文書は以下のような構造をとっている。
赤字が親、青字が子、緑字が孫、親より下にある要素が子孫要素
table
tr
thead tbody
tr
th thth td tdtd
tr
td tdtd

8. マージン
ボーダー
パディング
ボックスとは
（第六回資料）
要素が生成する領域のこと。
コンテントとは要素の内容を示す。
コンテント

9. box-sizing
（第七回資料）
width , height プロパティで指定するボックスサイズの大きさの算出方
法を変更する際に使用する。
• content-box : 初期値。パディング、ボーダーを幅と高さに含めない
• padding-box : パディングを幅と高さに含める（ボーダーは除く）
• border-box : パディングとボーダーを幅と高さに含める

10. マージンの相殺
（第六回・第七回資料）
上下に隣り合う要素のマージンが重なり合う場合、表示されるのは
絶対値の大きい方のみ
※ただし、どちらのマージンも同符号である場合のみ
※異符号（一方が正、もう一方が負）である場合、合算値となる

11. マージンの相殺の例外
(第七回資料）
実は、親要素に対して以下のスタイルを適用すると子要素とのマー
ジンの相殺が起こらない。
1. border（値が0以外）
2. padding（値が0以外）
3. overflow（値がhidden または scrollの時）
4. position（値がabsolute または fixedの時）
他、floatプロパティを使用した場合も例外となる

12. floatとmargin まとめ
(第八回資料）
1. floatプロパティで左右どちらかに寄っている要素が複数ある場合、
それらの左右マージンは相殺されない
2. floatプロパティを適用されている要素同士が上下に隣接している
場合、それらの上下マージンは相殺されない
3. clearプロパティとmargin/margin-topプロパティを同時に同じ要
素に対して適用した場合、その要素の上マージンは適用されない
※マージンが相殺されない＝それぞれの要素のマージンの合計値になるということ

13. floatの注意点
（第八回資料）
floatプロパティを適用した要素は”float”という名前通り「浮かんだ」
状態になる。そのため、親要素が高さを認識できなくなり、高さが
０として扱われてしまうため、親要素がつぶれてしまう。
対策として、
• floatプロパティを適用している要素の後に適用していない要素を
入れる（要するに.clear）
• 親要素に対して「overflow: hidden;」と指定する

14. スタックコンテキスト
(第八回資料）
Z軸方向（要素同士が重なる方向）の階層構造を形成するグループの
こと。
スタックコンテキストを生成するのは、以下の二つ。
1. ルート要素（html要素）
2. z-index と position（static以外）を指定した要素
スタックコンテキストの内部に新たなスタックコンテキストを含む
ことも出来る。

15. スタックコンテキストとz-index
（第八回資料）
z-indexで指定した値（＝スタックレベル）は、同一スタックコンテ
キスト内でしか効果が無い。
つまるところ、親要素がスタックコンテキストを生成している場合、
子要素にz-indexを指定しても、親要素のスタックコンテキスト内で
しかz-indexの比較はされない。

16. canvas要素
(第十回資料）
JPEGやGIF、PNGといった画像フォーマットを使わずにJavaScriptで
図形を描画したり、逆にそれらの画像フォーマットをcanvasに読み
込んで、JavaScriptを使って合成やトリミングなどの編集を行ったり
することが出来る。
※canvasで表現するのはラスタ画像という、小さなビットの集まりからなる画像で
ある。canvas登場以前にHTML上で図形を描画するためには、ベクタ画像という
データを基にその場で計算し描画を行う画像形式を使うしかなく、複雑な画像描画
が出来なかった。

17. 変数の宣言
(第十回資料）
「変数」とは、プログラム内で処理に使う何らかの値（数値、文字
列など）を保持するものである。
JavaScriptにおいては、変数に型は存在しない。
var 変数名;
var 変数１, 変数２;
var 変数名 = 値;

18. データ型
(第十回資料）
数値や文字列など、プログラム内で扱うデータの種類のこと。
データ型は、以下のもの等が存在する。
データ型名 対応する値
数値型 数値（実数、8進数、16
進数、浮動小数点数）
文字列型 文字列（「”」、「’」で
囲んだ値）
論理型 true/false
データ型名 対応する値
配列型 複数の値を入れた変数
オブジェクト型 キーと値を対応付けた連
想配列
null 何もないことを表す値
undefined 未定義の値

19. 型変換
(第十一回資料）
• 文字列への変換
• 文字列への変換その2
• 数値への変換
• 数値への変換その2
• 文字列→配列
• 配列→文字列
var num = Number(値);
parseInt(値);
var str = String(値);
num.toString();
var arr = “string”.split(“i”);
arr.join(“i”);

20. プリミティブ型
(第十一回資料）
データ型の種類について前回解説したが、それらのデータ型は2種類
に大別することが出来る。
1. プリミティブ型（数値型、文字列型、論理型など）
一つの値のみを持ち、他の値やデータを持たない。
2. オブジェクト型（配列型、オブジェクト型、関数型、正規表現）
プリミティブ型以外。

21. 値渡しと参照渡し
(第十一回資料）
変数 a を他の変数に代入すると、a に入っているデータの型に応じて
異なる処理を行う。
1. 値渡し
a のデータ型がプリミティブ型（または正規表現型）である時
2. 参照渡し
a のデータ型がオブジェクト型（正規表現型以外）である時

22. 参照渡し
(第十一回資料)
オブジェクト型の変数 a を他の変数 b に代入したとき、「一方の
オブジェクトを変更したとき、もう一方も同じ変更を行う」かのよ
うに見えるが、実際には「オブジェクト型変数 a に入っている参照
をbに代入しており、a も b も同じオブジェクトを参照している」。
この仕組みを「参照渡し」という。

23. 変数のスコープ
(第十一回・十二回資料）
変数には、その宣言の仕方によって有効範囲が異なる。
1. グローバル変数
関数の外で宣言した場合や「var」をつけずに宣言した場合にグ
ローバル変数となる。プログラム全体から参照することが出来る。
2. ローカル変数
関数の中で宣言した場合にローカル変数となる。
宣言した関数の中でだけ参照することが出来る。

24. DOM
（第十二回資料）
「Document Object Model」の略。プログラムにおいてHTMLを扱う
ためのインタフェース。
読み込んだHTML文書をDOMツリーと呼ばれる階層構造を持つデー
タに変換して取得・編集を行っており、DOMツリーを構成する要素
をDOMノードと呼ぶ。
（getElementsBy-メソッドで取得できるのはこのDOMノードの一種
であるHTMLElementである）

25. jQueryの使い方
(第十一回資料）
以下のように使用する。
主なセレクタ（要素、クラス、IDなど）の指定方法はCSSと共通。
セレクタに関わらず、返り値は配列として取得される。
$(セレクタ).メソッド(引数);
var 変数 = $(セレクタ);
var 変数 = $(DOMノード)

26. jQueryメソッド
(第十二回資料）
jQueryオブジェクトに対してのみ使用できるメソッド。
メソッド名 対応する値
.on イベントリスナの設定
.attr 属性値の取得・設定
.css CSSプロパティの値を取
得・設定
メソッド名 対応する値
.html HTMLの取得・設定
.text テキストの取得・設定
.prepend 指定した要素の最初にコ
ンテンツを追加
.append 指定した要素の最後にコ
ンテンツを追加

27. readyイベント
（第十二回資料）
DOM要素全てが読み込まれたとき実行されるjQueryイベント。
以下のように記述して使用する。
「処理」には殆どの場合、無名関数「function () { }」を指定する。
$( 処理 );
jQueryObject.ready( 処理 );

28. おしまい
次回はアプリケーション開発講座です