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

Transcript

1. 第四回ネットワーク チーム講座資料 CSSのプロパティ
2. 概要 • パスについて（補足） • 疑似クラス（補足） • IDとクラスの使い方 • CSSでの色の指定 • 文字関連のプロパティ
3. パスの指定 index.html から style.css へアクセスするためのパスは、 絶対パス：”C:/work/css/style.css” 相対パス：”css/style.css” ←現在位置 ↑目的ファイル C: pic work work ←ルートディレクトリ index.html style.css image.png
4. パスの指定 style.css から image.png へアクセスするためのパスは、 絶対パス：”C:/pic/image.png” 相対パス：”../../pic/image.png” ↓現在位置 ←目的ファイル C: pic work css index.html style.css image.png
5. パスの指定 前回のP9～15の例での図 C: circle network cg index.html style.css css img sample.gif sample.png
6. 疑似クラス • :nth-child(n) 指定した要素の内、前から数えてn番目の要素にスタイルを適用する • :nth-last-child(n) 指定した要素の内、後ろから数えてn番目の要素にスタイルを適用す る
7. 使用例
8. 使用例
9. 解説 上から2番目の li 要素の文字色をオレンジ色に変更
10. 解説 後ろから数えて奇数番目の li 要素の背景色を水色に変更
11. 解説 前から数えて3の倍数番目の li 要素の背景色を緑色に変更 ※複数のセレクタに当てはまる要素がある時、後ろに書いた方のスタイルを適用する ※n>=0
12. リスト要素 <ul>：順序のないリスト（・が先頭） <ol>：順序のあるリスト（1. 2. 3.・・・が先頭） <li>：リスト項目
13. リスト要素 ul要素は ↓ のように、ページメニューなどに使用されることが多い ↓コレ
14. クラスとID CSSのセレクタでクラスでの指定とIDでの指定を説明したが、これ を使用するにはHTMLで前もって設定する必要がある。 Emmetを使う場合、「要素名.クラス名」や「要素名#ID名」のよう に設定する。
15. プロパティ プロパティとは、文字色・フォントなど、どのスタイルを適用す るかを指定する部分 コロン（：）で区切ったうしろに値を入力する h2 { color: #a40019; }
16. ちなみに Emmetの機能はCSSのプロパティにも使える。 CSSファイル内で、プロパティ名の頭文字と値を指定して以下のよう に補完できる。 tabキー tabキー
17. 要素の大きさの指定 • width ･･･ 幅の指定 • height ･･･ 高さの指定 共に 数値 または ％ で指定する
18. 要素の大きさの指定
19. 色の指定方法 1. カラーコード（6桁） 16進数6桁で指定する方法。 #記号の後、前から2桁分が赤、次の2桁分が緑、残る2桁で青のそ れぞれの濃さを指定する。 color: #ff0000;
20. 色の指定方法 2. カラーコード（3桁） 16進数3桁で指定する方法。 #記号の後、各一桁ずつ赤、緑、青の順に濃さを指定する。 color: # f00;
21. 色の指定方法 3. rgbによる指定 rgb() を使用して各色の濃さを指定する。 括弧内で赤、緑、青の順にカンマ区切りで数値を指定する。 0～255の範囲で数値を入力する。または、％入力でもよい。 color: rgb(255,0,0);
22. 色の指定方法 4. rgbaによる指定 rgba() を使用して各色の濃さを指定する。 括弧内で赤、緑、青、透明度の順にカンマ区切りで数値を指定する。 透明度は0~1の範囲で指定し、0に近くなるほど透明になる。 color: rgba(255,0,0,0.5);
23. font font プロパティを用いると、以下の六つのプロパティを一括指定できる 1. font-style 2. font-variant 3. font-weight 4. font-size 5. line-height 6. font-family
24. font-style 文字をイタリック体と斜体にできる。 • normal : 標準。初期値 • italic : イタリック体。日本語だとただの斜体と同じ • oblique : 斜体
25. font-variant 文字をスモールキャップにする際に使用する。 スモールキャップとは、アルファベットの小文字を小さいサイズの アルファベット大文字として表示すること。 • normal : 標準。初期値 • small-caps : スモールキャップのフォントで表示します
26. font-variant • normal の場合 • small-caps の場合 • normal で大文字
27. font-weight 文字の太さを指定する。 • normal : 標準。初期値 • bold : 太字 • lighter : 現在のフォントより一段階細くする • bolder : 現在のフォントより一段階太くする
28. font-size 文字の大きさを指定する。 • 数値(px)で指定 • ％で指定 • キーワードで指定 小さい順に、xx-small, x-small, small, medium, large, x-large, xx-large の7段階あり、medium が標準。また、smaller, larger は他の要素と比べて相対的に文字の大きさを上下させる。
29. line-height 行の高さを指定する。 • 数値で指定  他と同様pxなどの単位をつけた指定はもちろん、数値のみの指定も可能。そ の場合、その値にフォントサイズをかけた高さになる。 • ％で指定
30. font-family フォントの種類を指定する。 • フォント名で指定 : 「メイリオ」、「MS ゴシック」など • sans-serif : ゴシック系のフォント • serif : 明朝系のフォント • cursive : 筆記体・草書体のフォント • fantasy : 装飾的なフォント • monospace : 等幅フォント
31. font-family 以下のように、カンマで区切って複数の値を指定することも出来、 先に指定したフォントがユーザー側の環境で使用できない場合、後 に指定したフォントを表示する。 font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
32. text-align 行揃えの位置を指定する • left : 左寄せにする • right : 右寄せにする • center : 中央揃えにする text-align: left; text-align: right; text-align: center;
33. テキスト関連プロパティ 全て数値に単位をつけて指定する。 • text-indent ･･･ 文章の段落などの1行目のインデント幅を指定する • letter-spacing ･･･ 文字同士の間隔を指定する • word-spacing ･･･ 英単語同士の間隔を指定する
34. text-decoration テキストに装飾を行う。 • underline : テキストにアンダーラインをつける • overline : テキストに上線をつける • line-through : テキストに打消し線をつける
35. おしまい 次回は続けてCSSのプロパティです