css入門情報の形を視覚化する - 千葉商科大 web表現

Web表現第５回：CSS入門 - 情報の形を視覚化する

2011年10月26日千葉商科大学政策情報学部担当：田所淳

CSS = 意味と構造(HTML)に表現を与える‣ CSS → Webページに、表現を加える‣ HTMLの構造の表現からは独立している‣ 情報のかたちを視覚化する機能

HTMLマークアップ意味・構造

CSSスタイルシート表現・デザイン

CSSとは‣ CSS = Cascading Style Sheet‣ カスケーディング・スタイル・シート‣ 最も広く使用されている、スタイルシート言語のひとつ‣ 現在はCSS2からCSS3への移行期‣ この授業では、CSS3をとり入れていきます

CSSによる表現の指定‣ 表示の流れ

HTML文書HTML文書

HTML文書


Webブラウザ

要素を分解(ツリー構造)

スタイルシートの指定


HTML文書


Webブラウザ


スタイルシート (CSS2)



HTML文書


Webブラウザ


要素ごとにスタイルを適用




HTML文書


Webブラウザ


要素ごとにスタイルを適用


表示



HTML文書

スタイルシートを利用するメリット‣ 複数の文書全体に一環したデザインを適用できる‣ 複数文書の管理が容易になる‣ 出力メディアにあわせた、表現スタイルの設定‣ HTMLの役割を、意味の構造を表現することに徹することができる

‣ スタイルシートが表現部分を全て引き受ける

スタイル設定の基本

セレクタ { プロパティ : 値 }

‣ セレクタ：対象を選択する部分‣ プロパティ：設定するスタイルの性質‣ 色、大きさ、場所 ...etc

‣ 値：実際の値

スタイル設定の基本例：

p {color:blue}

‣ 適用する要素 → p要素 (段落)‣ 適用するプロパティ → color (色)‣ 適用する値 → blue (青)

‣ 外部CSSファイルによるスタイル設定‣ 外部ファイルにスタイルを記述する‣ HTMLファイルからは、スタイルファイルの場所を指定する

‣ HTML側の定義例‣ head要素の中で指定する

スタイル定義をする方法

<head> <link rel="stylesheet" href="default.css" type="text/css" /></head>

‣ head要素内のstyle要素に記述 ‣ head要素の中にstyle要素を加えて宣言する‣ type属性でスタイシートの種類を指定する

<head> <style type="text/css"> p {color : blue} </style></head>


‣ インラインstyle属性 ‣ HTMLファイルのタグのプロパティとして直接書き込む‣ style = “...” という指定でスタイルシートとして認識される


<p style="color:red">これは赤色</p>

‣ カスケーディングとは‣ スタイルを複数箇所で設定することが可能‣ 同じ要素タイプのセレクタで異なるスタイル宣言がされた場合‣ 一定のルールで優先順位をつけて、スタイルを適用する

「カスケーディング」の意味

‣ 作者スタイル‣ Webページの作成者が指定したスタイル‣ 外部CSSファイルによるスタイル設定‣ head要素内のstyle要素に記述‣ インラインstyle属性

スタイルの種類

‣ ユーザースタイル‣ ブラウザの環境設定として、ブラウザユーザが指定したスタイル


‣ ブラウザの標準スタイル‣ ブラウザにあらかじめ組み込まれているスタイル設定‣ 何もスタイルを指定していないと自動的に適用される


スタイル適用の優先順位

作者スタイル

ユーザスタイル

ブラウザ基本スタイル

CSSを用いた文字のデザイン‣ まずは、実際にCSSを記述してみる‣ 先週作成した、自己紹介のCSSを利用する

‣ CSSファイルの準備‣ HTMLと同じ階層のフォルダに ”css” フォルダを新規作成‣ “default.css” というファイルを作成‣ “default.css” を “css” 内に保存

index.html

css (フォルダ) default.css

img (フォルダ) (画像ファイル)

CSSを用いた文字のデザイン‣ 自己紹介のHTMLの例‣ まだスタイルシートは適用していない状態

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> ...

CSSを用いた文字のデザイン‣ cssフォルダ内の ”default.css” に以下の記述をする‣ リロードすると何が変化するか?

h1 { font-size: 1.75em;}h2 { font-size: 1.25em;}p { font-size: 0.8em;}li { font-size: 0.8em;}

CSSを用いた文字のデザイン‣ スタイル適用後：文字の大きさが変化

CSSを用いた文字のデザイン‣ 長さ、大きさの単位

単位単位

px ピクセル

pt ポイント

em 親要素の文字サイズを1としたときの比率

% 親要素の文字サイズを100としたときの比率

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;}

‣ スタイル適用後：文字の色が変化

CSSを用いた文字のデザイン

‣ 色の指定方法 1：16進数で指定する方法‣ RGBを、それぞれ 00 ～ ffまでの16進数で表現する‣ 最初にシャープ “#” をつける‣ 例：‣#3690c9;‣R → 36‣G → 90‣B → c9

CSSを用いた文字のデザイン

‣ 色を指定するには?‣ R(赤) G(緑) B(青)の三原色で指定する‣ 加法混色 (光の三原色であることに注意)

参考：コンピュータの色の指定

光の三原色色料の三原色

‣ 色の階調

‣ 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


‣ 16進数での色の指定‣ R: ff, G: ff, B: ff


ff(0～255)

ff(0～255)

ff(0～255)

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%で指定

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;}

CSSを用いた文字のデザイン‣ 文字の背景色を指定する

CSSを用いた文字のデザイン‣ 色と背景効果に関するプロパティプロパティ適用箇所値

color 要素内の文字の色色の単位

background-color 要素内の背景の色色の単位

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;}

CSSを用いた文字のデザイン‣ 行揃えを変更

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;}

CSSを用いた文字のデザイン‣ 行間を拡げる

CSSを用いた文字のデザイン‣ 斜体の設定

...

li { font-size: 0.8em; color: #333333;}address{ font-size: 0.75em; font-style: italic;}

CSSを用いた文字のデザイン‣ 斜体の設定

CSSを用いた文字のデザイン‣ テキストに関するスタイルプロパティ適用箇所値

font-size フォントの大きさサイズの単位

font-style 斜字体の設定 normal, italic, oblique

font-weight 文字の太さ 100～900, normal, bold

text-decoratoin 下線などの装飾 none, underline, overline,line-through

CSSを用いた文字のデザイン‣ 今日のまとめ (これだけは憶えて欲しいリスト)

‣ CSSの基本単位‣ 色：#FFFFFF‣ 大きさ：em, %, pt, px

‣ テキストの表示に関するCSSプロパティ‣ 大きさ・太さ：font-size, font-weight‣ 色：color, background-color‣ 文字の体裁：font-style, text-decoration‣ 行送り：text-align‣ 行間：line-height

css入門 情報の形を視覚化する - 千葉商科大 web表現

Technology

css入門情報の形を視覚化する - 千葉商科大 web表現