Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第03回Network講座2019

 第03回Network講座2019

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

Other Decks in Education

Transcript

  1. 絶対パスと相対パス 8 絶対パス ルートディレクトリ(一番上の階層にあるフォルダ) から見たファイル・フォルダの位置を表す。 WindowsであればCドライブ ”C:” などが ルートディレクトリになる。 "C:¥NetTeam¥css¥net2.css”

    相対パス カレントディレクトリ(現在作業しているファイル・フォルダ) から目的のファイル・フォルダへの道筋を示す。 現在いるフォルダよりも一つ上のフォルダに アクセスするとき、”../”と記述する。 “./css/net2.css”
  2. 絶対パスと相対パス 9 ←現在位置 ↑目的ファイル C: pic work css ←ルートディレクトリ index.html

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

    style.css image.png style.css から image.png へアクセス 絶対パス:”C:/pic/image.png” 相対パス:”../../pic/image.png”
  4. カスケーディング 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> 階層1 <div> 階層2 <p>階層3</p> </div> </body> </html> body { color: red; } div { font-size: 25px; } p { font-weight: bold; }
  5. セレクタの指定方法 19 1. 要素名 2. class 属性 3. id 属性

    4. 全称セレクタ 5. 複数セレクタ 6. 子孫セレクタ 7. 子セレクタ 8. 隣接セレクタ 9. 後続セレクタ 10.擬似要素 11.擬似クラス
  6. 10.擬似要素で指定 「セレクタ : 擬似要素名」で指定し、擬似要素ごとに 指定された場所にスタイルを適用する。 47 p:after{background-color: #987654;} ⚫ :before

    指定した要素の前 ⚫ :after 指定した要素の後 ⚫ :first-line 指定した要素の最初の行 ⚫ :first-letter 指定した要素の最初の文字
  7. 11.擬似クラスで指定 擬似クラスごとに指定された条件を満たした場合に適用 する。「要素名:擬似クラス名」 49 a:link{ color: #abcdef; } ⚫ :link

    a要素で作ったリンクにのみ適用される ⚫ :visited a要素で作ったリンクが訪問済みの場合 ⚫ :hover マウスカーソルが要素の上にある場合 ⚫ :active 要素がアクティブである場合 ⚫ :first-child 指定した要素の内最初の要素 ⚫ :last-child 指定した要素の内最後の要素