第03回Web講座2018

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

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

前回のおさらい

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

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

PATH 絶対パス・相対パス

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

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

セレクタの指定方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

演習５疑似要素

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

演習５疑似要素での指定 49 3. 「ex05.css」を開き以下のように記述

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

演習６擬似クラス

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

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

演習６疑似クラスでの指定 54 5. 「ex06.html」を開く

演習７カスケーディング（Cascading）とは

演習７カスケーディングとは 56 1. 「NetTeam」フォルダ内に「ex07.html」を作成「CSS」フォルダ内に「ex07.css」を作成 2. ex07.html ex07.css に以下を入力

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

演習７カスケーディングとは 58 Cascade 滝 Cascading 連鎖的に繋がるすなわち先祖要素のスタイルを引き継ぐからカスケーディングスタイルシート

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

第03回Web講座2018

第03回Web講座2018

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

Featured

Transcript

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