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