第03回Network講座2019

ネットワークチーム第３回北海道科学大学電子計算機研究部

INDEX ⚫ 前回のおさらい ⚫ パス ⚫ CSSの基本 ⚫ カスケーディング ⚫
演習 - 疑似要素 - 擬似クラス 2

前回のおさらい

前回のおさらい HTML Webページの文書構造を記述する言語 CSS Webページの見た目を指定する言語 4

前回のおさらい HTMLは階層構造になっている 5 タグの定義 <要素名属性名=”値”>文字列</要素名> <div> <a href=“~~”>リンク</a><br> </div>

PATH 絶対パス・相対パス

絶対パスと相対パス <link rel= “stylesheet” href="./css/net2.css"> 7 ファイルの場所をパスというパスには絶対パスと相対パスがある

絶対パスと相対パス 8 絶対パスルートディレクトリ（一番上の階層にあるフォルダ）から見たファイル・フォルダの位置を表す。 WindowsであればCドライブ ”C:” などがルートディレクトリになる。 "C:¥NetTeam¥css¥net2.css”
相対パスカレントディレクトリ（現在作業しているファイル・フォルダ）から目的のファイル・フォルダへの道筋を示す。現在いるフォルダよりも一つ上のフォルダにアクセスするとき、”../”と記述する。 “./css/net2.css”

絶対パスと相対パス 9 ←現在位置 ↑目的ファイル C: pic work css ←ルートディレクトリ index.html
style.css image.png index.html から style.css へアクセス絶対パス：”C:/work/css/style.css” 相対パス：”./css/style.css”

絶対パスと相対パス 10 ↓現在位置 ←目的ファイル C: pic work css ←ルートディレクトリ index.html
style.css image.png style.css から image.png へアクセス絶対パス：”C:/pic/image.png” 相対パス：”../../pic/image.png”

CSSの基本

CSSの記述方法・セレクタ HTMLのどの要素に対してスタイルを適用するか指定する部分・プロパティどのようなスタイルを適用するかを指定する部分 12 構文セレクタ
{ プロパティ : 値; }

CSSの記述方法例 h1要素の文字色を赤色に指定 13 h1
{ color : #a40019; }

カスケーディング Cascading Style Sheet

カスケーディング 15 1. 「NetTeam」フォルダ内に「net3_cs.html」を作成「CSS」フォルダ内に「net3_cs.css」を作成 2. net3_cs.html net3_cs.css に以下を入力 <!DOCTYPE
html> <html lang="ja"> <head> <link rel="stylesheet" href="./css/net3_cs.css"> <title>Document</title> </head> <body> 階層１ <div> 階層２ <p>階層３</p> </div> </body> </html> body { color: red; } div { font-size: 25px; } p { font-weight: bold; }

カスケーディング 16 3. 「net3_cs.html」をブラウザで開く赤字赤字 & 25px 赤字 &
25px & 太字スタイルが引き継がれている！

カスケーディング 17 先祖要素のスタイルを引き継ぐからカスケーディングスタイルシート Cascade 連なる小さな滝 Cascading 連鎖的に繋がる body div
p 親要素のスタイル継承

セレクタの指定方法

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

１．要素名で指定 20 構文要素名 {プロパティ; } p { background-color :
0099ff; } 例

１．要素名で指定 p, h1, tableなど要素名を指定してスタイルを適用する方法。指定した要素がHTMLファイル内に複数含まれている場合その全てに対して適用される。 21

１．要素名で指定 p, h1, tableなど要素名を指定してスタイルを適用する方法。指定した要素がHTMLファイル内に複数含まれている場合その全てに対して適用される。 22

２．class属性で指定 23 構文 .クラス名 {プロパティ; } .red { background-color :
ff0000; } 例

２．class属性で指定 HTMLファイルにて要素にclass属性を設定しその値を指定する方法。「.クラス名」という形で指定する。 24

２．class属性で指定 HTMLファイルにて要素にclass属性を設定しその値を指定する方法。「.属性値」という形で指定する。 25

３．id属性で指定 26 構文 #id値 {プロパティ; } #name { color :
ff0000; } 例

３．id属性で指定 HTMLファイルにて特定の要素にid値を設定しその値を指定する方法。「#id値」という形で指定する。 27

３．id属性で指定 HTMLファイルにて特定の要素にid値を設定しその値を指定する方法。「#属性値」という形で指定する。 28

classとidの使い分け class 種類名を割り当てる。同じものを何度でも使用可能。 Id 固有名を割り当てる。名前は一意（ユニーク）である必要がある。そのため、同じ名前は使用不可！ 29 指定方法
同名優先順位 class . (ドット) 可低 id # (いげた) 不可高

４．全称セレクタで指定 30 構文 *{プロパティ; } *{ color : green; }
例

４．全称セレクタで指定 *（アスタリスク）で指定する。全ての要素に対して適用される。 31

４．全称セレクタで指定 *（アスタリスク）で指定する。全ての要素に対して適用される。 32

５．複数セレクタで指定 33 構文要素名, 要素名 {プロパティ; } h2, p {
color : ffff33; } 例

５．複数セレクタで指定複数のセレクタを指定する方法。セレクタごとにカンマ（ , ）で区切って指定する。 34

５．複数セレクタで指定複数のセレクタを指定する方法。セレクタごとにカンマ（ , ）で区切って指定する。 35

６．子孫セレクタで指定 36 構文要素名要素名 {プロパティ; } div p {
color : ffff33; } 例

６．子孫セレクタで指定要素の下の階層に配置された要素を指定する方法。要素ごとにスペースで区切って指定する。 37

７．子セレクタで指定 38 構文セレクタ1 > セレクタ2 {プロパティ; } div.blue>p {
background-color : 0000ff; } 例

７．子セレクタで指定要素の直下に存在する（子要素）要素・属性を指定する方法。「要素>要素」と指定する。 39

７．子セレクタで指定要素の直下に存在する（子要素）要素・属性を指定する方法。「要素>要素」と指定する。 40

８．隣接セレクタで指定 41 構文直前の要素 + 対象の要素 {プロパティ; } li +
li { color : ffff33; } 例

８．隣接セレクタで指定ある要素と同じ階層で隣接する要素を指定する方法。 +（プラス）で区切って指定する。 42 直前の要素 + 対象の要素 {プロパティ; }

９．後続セレクタで指定 43 構文前の要素 ~ 対象の要素 {プロパティ; } h2 ~
p { font-weight : bold; } 例

９．後続セレクタで指定同じ階層で指定した要素より後にくる要素を指定する方法。「要素名 ~ 要素名」という形で指定する。 44

９．後続セレクタで指定同じ階層で指定した要素より後にくる要素を指定する方法。「要素名 ~ 要素名」という形で指定する。 45

10．擬似要素で指定 46 構文セレクタ::疑似要素 { プロパティ; } p::first-line { text-transform:
uppercase; } 例

10．擬似要素で指定「セレクタ : 擬似要素名」で指定し、擬似要素ごとに指定された場所にスタイルを適用する。 47 p:after{background-color: #987654;} ⚫ :before
指定した要素の前 ⚫ :after 指定した要素の後 ⚫ :first-line 指定した要素の最初の行 ⚫ :first-letter 指定した要素の最初の文字

11．擬似クラスで指定 48 構文セレクタ:疑似クラス { プロパティ; } div:hover { background-color:
#F89B4D; } 例

11．擬似クラスで指定擬似クラスごとに指定された条件を満たした場合に適用する。「要素名：擬似クラス名」 49 a:link{ color: #abcdef; } ⚫ :link
a要素で作ったリンクにのみ適用される ⚫ :visited a要素で作ったリンクが訪問済みの場合 ⚫ :hover マウスカーソルが要素の上にある場合 ⚫ :active 要素がアクティブである場合 ⚫ :first-child 指定した要素の内最初の要素 ⚫ :last-child 指定した要素の内最後の要素

11．擬似クラスで指定 50 :not( ) コロンの前に指定した要素の中で（）内に指した条件に合致するもの以外にスタイルを適用する * :not(h2){ color:
#123456; } p:not(.red){ color: #00ff00; }

演習 3-1 疑似要素

演習 3-1 疑似要素での指定 52 1. 「NetTeam」フォルダ内に「net3-1.html」を作成「CSS」フォルダ内に「net3-1.css」を作成 2. net3-1.html を開き、!
[tab] でテンプレートを作成 <body>タグ内に以下を入力

演習 3-1 疑似要素での指定 53 3. 「net3-1.css」を開き以下のように記述

演習 3-1 疑似要素での指定 54 4. 「net3-1.html」に「net3-1.css」へのリンクを追加（net2.htmlと同じ要領） <link rel=“stylesheet” href=“~~~”>
5. ファイルを保存後、「net3-1.html」をブラウザで開く

演習 3-2 擬似クラス

演習 3-2 疑似クラスでの指定 56 1. 「NetTeam」フォルダ内に「net3-2.html」を作成「CSS」フォルダ内に「net3-2.css」を作成 2. net3-2.html を開き、!
[tab] でテンプレートを作成以下を入力

演習 3-2 疑似クラスでの指定 57 3. 「net3-2.html」に「net3-2.css」へのリンクを追加 4. 「net3-2.css」を開き以下のように記述

演習 3-2 疑似クラスでの指定 58 5. 「net3-2.html」を開く

本日はここまでお疲れ様でした

第03回Network講座2019

第03回Network講座2019

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Education

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部