Download as PDF, PPTX
情報編集(Web) 第５回：CSS入門 情報の形を視覚化する
- 1.
- 2. CSS = 意味と構造(HTML)に表現を与える ‣CSS → Webページに、表現を加える ‣ HTMLの構造の表現からは独立している ‣ 情報のかたちを視覚化する機能 HTML マークアップ 意味・構造 CSS スタイルシート 表現・デザイン
- 3. CSSとは ‣ CSS =Cascading Style Sheet ‣ カスケーディング・スタイル・シート ‣ 最も広く使用されている、スタイルシート言語のひとつ ‣ 現在はCSS2からCSS3への移行期 ‣ この授業では、基本部分はCSS2で、必要に応じてCSS3 をとり入れていきます
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. スタイルシートを利用するメリット ‣ 複数の文書全体に一環したデザインを適用できる ‣ 複数文書の管理が容易になる ‣出力メディアにあわせた、表現スタイルの設定 ‣ HTMLの役割を、意味の構造を表現することに徹することが できる ‣ スタイルシートが表現部分を全て引き受ける
- 10. スタイル設定の基本 セレクタ { プロパティ: 値 } ‣ セレクタ：対象を選択する部分 ‣ プロパティ：設定するスタイルの性質 ‣ 色、大きさ、場所 ...etc ‣ 値：実際の値
- 11. スタイル設定の基本 例： p {color:blue} ‣ 適用する要素→ p要素 (段落) ‣ 適用するプロパティ → color (色) ‣ 適用する値 → blue (青)
- 12. ‣ 外部CSSファイルによるスタイル設定 ‣ 外部ファイルにスタイルを記述する ‣HTMLファイルからは、スタイルファイルの場所を指定する ‣ HTML側の定義例 ‣ head要素の中で指定する スタイル定義をする方法 <head> <link rel="stylesheet" href="style.css" /> </head>
- 13. ‣ head要素内のstyle要素に記述 ‣ head要素の中にstyle要素を加えて宣言する ‣type属性でスタイシートの種類を指定する <head> <style type="text/css"> p {color : blue} </style> </head> スタイル定義をする方法
- 14. ‣ インラインstyle属性 ‣ HTMLファイルのタグのプロパティとして直接書き込む ‣style = ... という指定でスタイルシートとして認識される スタイル定義をする方法 <p style="color:red">これは赤色</p>
- 15. ‣ カスケーディングとは ‣ スタイルを複数箇所で設定することが可能 ‣同じ要素タイプのセレクタで異なるスタイル宣言がされた場合 ‣ 一定のルールで優先順位をつけて、スタイルを適用する 「カスケーディング」の意味
- 16. ‣ 作者スタイル ‣ Webページの作成者が指定したスタイル ‣外部CSSファイルによるスタイル設定 ‣ head要素内のstyle要素に記述 ‣ インラインstyle属性 スタイルの種類
- 17.
- 18. ‣ ブラウザの標準スタイル ‣ ブラウザにあらかじめ組み込まれているスタイル設定 ‣何もスタイルを指定していないと自動的に適用される スタイルの種類
- 19.
- 20. CSSを用いた文字のデザイン ‣ まずは、実際にCSSを記述してみる ‣ 先週作成した、自己紹介のCSSを利用する ‣CSSファイルの準備 ‣ HTMLと同じ階層のフォルダに css フォルダを新規作成 ‣ default.css というファイルを作成 ‣ default.css を css 内に保存 index.html css (フォルダ) default.css img (フォルダ) (画像ファイル)
- 21.
- 22. CSSを用いた文字のデザイン ‣ HTMLファイル内に以下の記述を追加する ‣ head要素の中に、link要素としてCSSの場所を指定する <!DOCTYPEhtml> <html lang="ja"> <head> <meta charset="utf-8" /> <title>自己紹介</title> <link rel="stylesheet" href="css/default.css" type="text/css" /> </head> ...
- 23. CSSを用いた文字のデザイン ‣ cssフォルダ内の default.cssに以下の記述をする ‣ リロードすると何が変化するか? h1 { font-size: 1.75em; } h2 { font-size: 1.25em; } p { font-size: 0.8em; } li { font-size: 0.8em; }
- 24.
- 25. CSSを用いた文字のデザイン ‣ 長さ、大きさの単位 単位 単位 pxピクセル pt ポイント em 親要素の文字サイズを1としたときの比率 % 親要素の文字サイズを100としたときの比率
- 26. CSSを用いた文字のデザイン ‣ さらに文字の色を指定してみる h1 { font-size:1.75em; color: #3399cc; } h2 { font-size: 1.25em; color: #3399cc; } p { font-size: 0.8em; color: #333333; } li { font-size: 0.8em; color: #333333; }
- 27.
- 28. ‣ 色の指定方法 1：16進数で指定する方法 ‣RGBを、それぞれ 00 ∼ ffまでの16進数で表現する ‣ 最初にシャープ # をつける ‣ 例： ‣#3690c9; ‣ R → 36 ‣ G → 90 ‣ B → c9 CSSを用いた文字のデザイン
- 29. ‣ 色を指定するには? ‣ R(赤)G(緑) B(青)の三原色で指定する ‣ 加法混色 (光の三原色であることに注意) 参考：コンピュータの色の指定 光の三原色 色料の三原色
- 30. ‣ 色の階調 ‣ R: 255 = 8bit = 11111111(2進数) = ff (16進数) ‣ G : 255 = 8bit = 11111111(2進数) = ff (16進数) ‣ B : 255 = 8bit = 11111111(2進数) = ff (16進数) ‣ RGBの組み合わせで、何色の色を再現できるのか? ‣ 10進数では、 ‣ 255 x 255 x 255 = 16,581,375 (24bit) ‣ 2進数では、 ‣ 11111111 11111111 11111111 ‣ 16進数では、 ‣ #ffffff 参考：コンピュータの色の指定
- 31. ‣ 16進数での色の指定 ‣ R:ff, G: ff, B: ff 参考：コンピュータの色の指定 ff (0∼255) ff (0∼255) ff (0∼255)
- 32. CSSで用いられる基本単位：色 ‣ 16進数による表現 ‣ #RRGGBB：RR、GG、BBを00∼FFの範囲で指定 ‣#RGB：RGBを0∼Fの範囲で指定 ‣ 10進数による表現 ‣ rgb(R,G,B)：RGBをそれぞれ0∼255の範囲で指定 ‣ パーセントによる表現 ‣ rgb(R,G,B)：RGBをそれぞれ0%∼100%で指定
- 33. CSSを用いた文字のデザイン ‣ 文字の背景色を指定する h1 { font-size:1.75em; color: #3399cc; } h2 { font-size: 1.25em; background-color: #3399cc; color: #ffffff; } p { font-size: 0.8em; color: #333333; line-height: 1.75em; } li { font-size: 0.8em; color: #333333; }
- 34.
- 35. CSSを用いた文字のデザイン ‣ 色と背景効果に関するプロパティ プロパティ 適用箇所値 color 要素内の文字の色 色の単位 background-color 要素内の背景の色 色の単位
- 36. CSSを用いた文字のデザイン ‣ 行 えを変更してみる- h1要素をセンタリング h1 { font-size: 1.75em; color: #3399cc; text-align: center; } h2 { font-size: 1.25em; background-color: #3399cc; color: #ffffff; } p { font-size: 0.8em; color: #333333; } li { font-size: 0.8em; color: #333333; }
- 37.
- 38. CSSを用いた文字のデザイン ‣ 行間を拡げる h1 { font-size:1.75em; color: #3399cc; text-align: center; } h2 { font-size: 1.25em; background-color: #3399cc; color: #ffffff; } p { font-size: 0.8em; color: #333333; line-height: 1.75em; } li { font-size: 0.8em; color: #333333; }
- 39.
- 40. CSSを用いた文字のデザイン ‣ 斜体の設定 ... li { font-size:0.8em; color: #333333; } address{ font-size: 0.75em; font-style: italic; }
- 41.
- 42. CSSを用いた文字のデザイン ‣ テキストに関するスタイル プロパティ 適用箇所値 font-size フォントの大きさ サイズの単位 font-style 斜字体の設定 normal, italic, oblique font-weight 文字の太さ 100∼900, normal, bold text-decoratoin 下線などの装飾 none, underline, overline, line-through
- 43. CSSを用いた文字のデザイン ‣ 今日のまとめ (これだけは憶えて欲しいリスト) ‣CSSの基本単位 ‣ 色：#FFFFFF ‣ 大きさ：em, %, pt, px ‣ テキストの表示に関するCSSプロパティ ‣ 大きさ・太さ：font-size, font-weight ‣ 色：color, background-color ‣ 文字の体裁：font-style, text-decoration ‣ 行送り：text-align ‣ 行間：line-height