第4回web講座

fonnt　テキスト周り

Transcript

1. 第４回Web講座 present by kagawa
2. テキストプロパティ 文字に関するプロパティを演習しましょう。  カラー  間隔・表示位置  サイズ指定
3. color カラー 文字色を指定する。色の指定方法は以下の通り。 color: #FF0000; color: #F00; color: rgb(255,0,0); color: rgba(100%,0%,0%,40%);
4. 色の指定方法 1. カラーコード（6桁） 16進数（６or３)桁で指定する方法。 #記号の後,前から1,2桁ずつ、赤、緑、青 の順に各色の濃さを指定する。 color: #F00; color: #FF0000;
5. 色の指定方法 2. rgbaによる指定 rgba() を使用して各色の濃さを指定する。 括弧内で赤、緑、青、透明度の順にカンマ区切りで数値を指定する。 透明度は0~1の範囲で指定し、0に近くなるほど透明になる。 color: rgba(255,0,0,0.5); カラーコードの7-8桁で透明度は指定できる。
6. 色の指定方法 HTML内でCSSを書くことも可能 <style type =“test/css> // 開始—終了タグの間に記述する。 </style> ただ、冗長になるので非推奨
7. font フォント font プロパティを用いると、以下の六つのプロパティを一括指定できる 1. font-style 2. font-variant 3. font-weight 4. line-height 5. font-size 6. font-family 優先順位 1. font-style、font-variant、font-weight（順不同） 2. font-size 3. line-height 4. font-family ←familyは一番最後
8. font-style 文字をイタリック体と斜体にできる。 ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示する。  normal : 標準。初期値  italic : イタリック体。斜体  oblique : こちらも斜体。h2にも対応
9. font-style
10. font-variant 文字をスモールキャップにする際に使用する。 アルファベットを小さいサイズの大文字として表示すること。  normal : 標準。初期値  small-caps : スモールキャップのフォントで表示
11. font-variant
12. font-weight 文字の太さを指定する。  100~900：ほぼ [太字：標準] の２つになる。  normal : 標準。初期値。 400の指定  bold : 太字。 700の指定  lighter : 現在のフォントより一段階細くする  bolder : 現在のフォントより一段階太くする
13. font-weight p要素内でstrongタグで囲む方と強調される。
14. font-weight
15. line-height 行の高さを指定する。  数値で指定  pxなどの単位をつけた指定はもちろん、数値のみも可能。 その場合、その値にフォントサイズをかけた高さになる。  ％で指定...他
16. font-size 文字の大きさを指定する。  キーワードで指定 xx-small, x-small, small, medium, large, x-large, xx-large の7段階 medium が標準。また、smaller, larger は他の要素と比べて 相対的に文字の大きさを上下させる。(1.2倍比率)
17. -size サイズの指定方法２。他のオプションと共通するので詳しく  px ：絶対値（absolute）pixelで指定する。  ％ ：相対値（relative）親要素のサイズによって可変する。  em ：パーセントと同じ、ただし、100％=1em となる。  ex ：パーセントと同じ、小文字の大きさを1とする。  rem：<html>に適用したフォントサイズに対する 「rem」のブラウザサポート Firefox3.6+, Chrome, Safari5, IE9+
18. -size サイズの指定方法３。 ブラウザの幅(viewport) に応じてフォントサイズを可変に対応する  vw ：viewport width ビューポートの幅に対する割合  vh ：viewport height ビューポートの高さに対する割合。 比較的新しいオプション、対応するかはブラウザによる。 次のページに対応verを記載。
19. vw wh vmin vmax 対応表 Browser vw, vh vmin vmax Chrome v20.0 ~ v20.0 ~ v26.0 ~ Safari v6.0 ~ v6.0 ~ v6.1 ~ Firefox v19.0 ~ v19.0 ~ v19.0 ~ Opera v15.0 ~ v15.0 ~ v15.0 ~ iOS Safari v6.0 ~ v6.1 ~ v7.0 ~ Android Brower v4.4 ~ v4.4 ~ v4.4 ~ Internet Explorer v9.0 ~ v9.0 ~ v11.0 ~
20. -size
21. レスポンシブwebデザイン レスポンシブデザインとは Webページを表示するとき、PC・スマホ・タブレットでユーザーは観覧する。 画面サイズによってページの幅やレイアウトが 見 や す い よ う に 移 動 す る 。 ピクセル指定や、vw指定を駆使する。動的に配信する。別々のURLを用意する...他多々 メリット / デメリット があるので詳しく調べて見ましょう！
22. 復習:リスト演習 ul要素は ↓ のように、ページメニューなどに使用されることが多い ↓コレ
23. リスト・疑似クラス  :nth-child(n) 指定した要素の内、前から数えてn番目の要素にスタイルを適用する  :nth-last-child(n) 指定した要素の内、後ろから数えてn番目の要素にスタイルを適用す る
24. 使用例
25. 使用例
26. 解説 上から2番目の li 要素の文字色をオレンジ色に変更
27. 解説 後ろから数えて奇数番目の li 要素の背景色を水色に変更
28. 解説 前から数えて3の倍数番目の li 要素の背景色を緑色に変更 ※複数のセレクタに当てはまる要素がある時、後ろに書いた方のスタイルを適用する ※n>=0
29. 本日はここまで。