第三回ネットワークチーム講座

Transcript

1. 第三回ネットワーク チーム講座資料 パスについて・Emmetの使い方・CSS基礎
2. 概要 • パスについて • Emmetの使い方 • CSSのセレクタとプロパティ • セレクタの指定方法 • 擬似クラス・擬似要素
3. パス（Path） • PC内でファイル・フォルダのある場所を示す文字列のこと
4. パス（Path） • 一つ下のフォルダへアクセスする度に”/”（スラッシュ）で区切る • Windows環境では代わりに”¥”（バックスラッシュの代替文字）を 使う
5. パス（Path） パスには、絶対パスと相対パスの2種が存在する。 • 絶対パス ルートディレクトリ（一番上の階層にあるフォルダ）から見た ファイル・フォルダの位置を表す。 WindowsであればCドライブ”C:” やDドライブ”D:” がルートディレ クトリになる。
6. パス（Path） • 相対パス 現在作業しているファイル・フォルダから目的のファイル・フォ ルダへの道筋を示す。 現在いるフォルダよりも一つ上のフォルダにアクセスすると き、”../”と記述する。
7. パスの指定 index.html から style.css へアクセスするためのパスは、 絶対パス：”C:/work/css/style.css” 相対パス：”css/style.css” C: SS css index. html style. css work ↑現在位置 image .png pic ↑目的ファイル
8. パスの指定 style.css から image.png へアクセスするためのパスは、 絶対パス：”C:/pic/ss/image.png” 相対パス：”../../pic/ss/image.png” C: SS css index. html style. css work ↑現在位置 image .png pic ↑目的ファイル
9. 絶対パス→相対パス 1. パスを見比べて、一致している部分を双方の先頭から消す 参照元パス C:/circle/network/index.html 参照先パス C:/circle/cg/sample.png 相対パス
10. 絶対パス→相対パス 2. 参照元パスからファイル名を消す 参照元パス network/index.html 参照先パス cg/sample.png 相対パス
11. 絶対パス→相対パス 3. 参照元パス側にフォルダ名が残っている場合、その数だけ相対パ スに「../」をつける 参照元パス network/ 参照先パス cg/sample.png 相対パス ../
12. 絶対パス→相対パス 4. 相対パスの末尾に参照先パスの残りをくっつける 参照先パス cg/sample.png 相対パス ../cg/sample.png 参照元パス
13. 相対パス→絶対パス 1. 参照元パスからファイル名を消す 参照元パス C:/circle/network/css/style.css 相対パス ../img/sample.gif 参照先パス
14. 相対パス→絶対パス 2. 相対パスに「../」がついている場合、その数だけ参照元パスから フォルダ名を消す（下の階層から消していく） 参照元パス C:/circle/network/css/ 相対パス ../img/sample.gif 参照先パス
15. 相対パス→絶対パス 3. 参照元パスの残りの末尾に、相対パスの残りをくっつける 参照元パス C:/circle/network/ 参照先パス C:/circle/network/img/sample.gif 相対パス img/sample.gif
16. Emmetの使い方 • html文書を開いているとき、要素名を打ち込んでTabキーを押すと、 開始タグ・終了タグ・必須属性が補完される • 複数の要素を同時に補完して入力することもできる • 補完の際、属性・内容も指定することができる
17. 復習① 1. SublimeTextを起動して、右下の「Plain Text」をクリック ↓Click
18. 復習① 2. リストの中から「HTML」を選択
19. 復習① 3. エディタ内で「!」マークを入力
20. 復習① 4. tabキーを押すと、HTMLファイルの雛形が自動入力される。
21. Emmetの使い方 前回、右のようにtable要素を記述したが、 Emmetを利用すると簡単に同じ内容を書く ことができる。
22. Emmetの使い方 • 新しいファイルの文書形式をHTMLに指定した後、次の通りに入力 してTabキーを押す
23. Emmetの使い方 前回作ったのとほぼ同じtable要素が出来上がる
24. 「>」で区切った場合、それ以降の要素は下の階層に配置され、 子要素として扱われる 解説 親 > 子
25. 「*数値」と記述すると、要素を指定した数だけ繰り返し表示する （要素同士は隣接する） 解説
26. ｛｝で囲んだ文字列は、内容として開始タグと終了タグの間に表示 解説
27. 「+」で区切った要素同士は、同じ階層で隣接する 解説
28. 解説 「^」は現在の階層から一つ上がる
29. 階層構造 赤字が親、青字が子、緑字が孫 table(親)より下にある要素を総称して子孫要素という table tr thead tbody tr th th th td td td tr td td td
30. 階層構造 赤字が親、青字が子、緑字が孫 table(親)より下にある要素を総称して子孫要素という table tr thead tbody tr th th th td td td tr td td td ^ ^
31. その他 • 「要素名[属性名=“属性値”]」で指定した属性と属性値を持つ要素 を補完する
32. セレクタ セレクタとは、HTMLのどの要素に対してスタイルを適用するか指 定するもの h2 { color: #a40019; }
33. プロパティ プロパティとは、文字色・フォントなど、どのスタイルを適用す るかを指定する部分 コロン（：）で区切ったうしろに値を入力する h2 { color: #a40019; }
34. セレクタの指定方法 1. 要素名 2. id属性 3. class属性 4. 全称セレクタ 5. 複数セレクタ 6. 子孫セレクタ 7. 子セレクタ 8. 隣接セレクタ 9. 後続セレクタ 10.擬似要素 11.擬似クラス
35. 1.要素名で指定 p, h1, tableなど要素名を指定してスタイルを適用する方法。 指定した要素がHTMLファイル内に複数含まれている場合、その全 てに対して適用される
36. 1.要素名で指定
37. 2.id属性で指定 HTMLファイルにて特定の要素にid属性を設定し、その値を指定す る方法。 「#属性値」 という形で指定する。
38. 2.id属性で指定
39. 3.class属性で指定 HTMLファイルにて要素にclass属性を設定し、その値を指定する方 法。 「．属性値」 という形で指定する。
40. 3.class属性で指定
41. 4.全称セレクタで指定 *で指定し、全ての要素に対して適用される。
42. 5.複数セレクタで指定 複数のセレクタを指定する方法。 セレクタごとにカンマ（ , ）で区切って指定する。 例:「要素名, 要素名, 要素名」
43. 5.複数セレクタで指定
44. 6.子孫セレクタで指定 要素の下の階層に配置された要素を指定する方法。 要素ごとにスペース（ ）で区切って指定する。 例:「要素名 要素名 要素名」
45. 7.子セレクタで指定 要素の直下に存在する要素・属性を指定する方法。 「要素名 > 要素名」という形で指定する。
46. 7.子セレクタで指定
47. 8.隣接セレクタで指定 ある要素と同じ階層で隣接する要素を指定する方法。 「要素名 + 要素名」 という形で指定する。
48. 9.後続セレクタで指定 同じ階層で指定した要素より後にくる要素を指定する方法 「要素名 ～ 要素名」 という形で指定する。
49. 9.後続セレクタで指定
50. 10.擬似要素で指定 「要素名:擬似要素名」で指定し、擬似要素ごとに指定された場所 にスタイルを適用する。 p:after{background-color: #987654;}
51. 擬似要素の種類 • :before ･･･指定した要素の前 • :after ･･･指定した要素の後 • :first-line ･･･指定した要素の最初の行 • :first-letter ･･･指定した要素の最初の文字
52. 書いてみよう <title>タグ以前は いつものテンプレ 記述し終わったら 「p-element.html」 で保存
53. 書いてみよう cssフォルダ内に「p-element.css」を 作成し右のように記述
54. 結果
55. 11.擬似クラスで指定 （要素名）:（擬似クラス名）で指定し、擬似クラスごとに指定さ れた条件を満たした場合にスタイルを適用する。 a:link{ color: #abcdef; }
56. 擬似クラスの種類 • :link ･･･a要素で作ったリンクにのみ適用される • :visited ･･･a要素で作ったリンクが訪問済みの場合 • :hover ･･･マウスカーソルが要素の上にある場合 • :active ･･･要素がアクティブである場合 • :first-child ･･･指定した要素の内最初の要素 • :last-child ･･･指定した要素の内最後の要素
57. 擬似クラスの種類 • :not( s ) コロンの前に指定した要素の中で、（）内に指定した条件に合致す るもの以外にスタイルを適用する *:not(h2){ color: #123456; } p:not(.red){ color: #00ff00; }
58. 実演 これ→を 「p-class.html」 で保存
59. 実演 cssフォルダ内に「p-class.css」という ファイル名で→を保存
60. 結果 スクリーンショットだと難しいので実演します 初期状態だと↓こうなる
61. おしまい 次回はCSSのプロパティについてです