メディア芸術基礎 Ⅰ 第４回：CSS入門情報の形を視覚化する

メディア芸術基礎 Ⅰ第４回：CSS入門情報の形を視覚化する2013年5月27日 (Aクラス)、6月3日 (Bクラス)多摩美術大学情報デザイン学科メディア芸術コース担当：田所淳

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

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

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

CSSとは‣ CSS = Cascading Style Sheet‣ カスケーディング・スタイル・シート

‣ 最も広く使用されている、スタイルシート言語のひとつ‣ 現在はCSS2からCSS3への移行期‣ この授業では、基本部分はCSS2で、必要に応じて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="style.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では全ての要素を長方形のボックスを単位として考える‣ ブラウザの画面の中で積み木をしている感覚‣ いままで学んできたHTMLのほとんどタグ(ブロックレベル要素)は、その周囲に見えない長方形のボックスを持っていた

‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与えることで様々なスタイルを実現する

ボックスモデル‣ 例えば、多摩美術大学のトップページもボックス(長方形)の集合から構成されている

ボックスモデル‣ Webページのほとんどの要素は、ボックス(長方形)の集合からなりたっている

‣ この最小単位を組み合わせて、レイアウトをしていく‣ この最小単位のボックスを、ボックスモデルという

‣ 重要となる要素は3つ！‣ margin‣ padding‣ border

‣ ボックスモデル

ボックスモデル

要素の内容 (コンテント)

margin

padding

border

隣接するボックスとの境界

ボックスモデル‣ コンテント‣ 要素の内容そのもの

‣ border‣ 要素を取り囲む枠線

‣ padding‣ コンテントとボーダーまでの余白

‣ magin‣ 隣接する他のボックス要素とボーダーまでの余白

‣ padding、margin 余白のサイズを調整して、レイアウトを整えていく

‣ border の線の太さ、線の種類、色、を調整して枠線をデザインする

ボックスモデル‣ margin, padding, borderは、上下左右を個別に設定できる

プロパティ適用される場所

margin-toppadding-topborder-top

上

margin-rightpadding-rightborder-right

右

margin-bottompadding-bottomborder-bottom

下

margin-leftpadding-leftborder-left

左

ボックスモデル‣ 上下左右を一括して設定することも可能‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する‣ 複数の値をスペースで区切ってまとめて記述できる

値の記述数設定される方向

1 上下左右をまとめて設定

2 上下、左右の順に設定

3 上、左右、下の順に設定

4 上、右、下、左の順で設定。(上から時計まわり)

ボックスモデル‣ borderのプロパティー‣ 幅 (width)、色 (color)、形 (style) を設定できる

プロパティ設定できる値

border-width 大きさの単位

border-color 色の単位

border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset

一括指定 width style color の順で設定する

より詳細なセレクタの指定‣ 文脈セレクタ‣ li em {color: #369;}‣ li < em {color: #369;}‣ h2 + p {color: #369;}

‣ classとid‣ p.note {color: red;}‣ p#note1 {color:red;}

‣ 疑似クラスセレクタ‣ a:link {color: #00f}‣ a:visited {color: #999}‣ a:hover {color: #f90}

より詳細なセレクタの指定‣ 子孫要素に適用‣ 複数のセレクタを半角スペースで区切って列挙する‣ ある特定の要素タイプの子孫要素であるときにだけ適用される

‣ 直接の子要素にだけ適用‣ 複数のセレクタを">"で区切って列挙する‣ 直接の子要素にだけ適用される

‣ 兄弟要素に適用‣ 複数のセレクタを"+"で区切って列挙する‣ 同じ親要素を持つ「兄弟」要素にだけ適用される

classとid‣ class属性‣ 要素名の後ろに"."をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「class="hoge"」という属性で指定される

‣ id属性‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「id="hoge"」という属性で指定される

‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用可

スタイルの設計‣ 効果的なスタイルの設計‣ CSS読み込みの優先順位を利用して管理のし易いスタイルを設計する‣ サイト全体の共通スタイル‣ プロジェクトのスタイル‣ その文書特有のスタイル‣ 特定の要素固有のスタイル

出力メディアに応じた使いわけ‣ スタイルシートを表示するメディアに応じて振り分けることができる‣ link要素のmedia属性で設定する‣ CSSの"@media"というセレクタを用いても設定可能(CSS2以降)

‣ メディアの種類‣ all：全てのメディアに適用(デフォルト)‣ aural：音声読み上げに適用‣ handheld：PDAなどの携帯端末に適用‣ print：印刷出力に適用‣ screen：一般的なカラーモニタに適用‣ tv：テレビなどに適用

ポジショニング‣ ボックスの幅・高さや、テキストの回り込みなど設定できる

‣ width：ボックスのコンテント部分の幅‣ height：ボックスのコンテント部分の高さ‣ float：テキストの回り込みの設定‣ clear：テキス回り込みの解除‣ position: top, bottom, left, right

CSSレイアウト

CSSレイアウト‣ より高度なCSSの活用‣ CSSを利用したページ全体のレイアウト‣ いくつかの方法を紹介

ベースとなるHTMLの作成‣ ベースとなるHTMLファイルを下記からダウンロードします‣ 最低限のHTMLとCSSの設定があらかじめ行われています

‣ ダウンロード先

‣http://goo.gl/jWOzk

http://goo.gl/jWOzk

http://goo.gl/jWOzk

ベースとなるHTMLの作成<!DOCTYPE HTML><html> <head> <title>CSSレイアウトのテンプレート</title> <meta charset="UTF-8" /> <link href="css/style.css" rel="stylesheet" media="all" /> </head> <body> <div id="header"> ... </div> <div id="sidebar"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> </body></html>

目標とするレイアウトのワイヤーフレーム‣ 目標とするレイアウト

Header

Content Sidebar

Footer

方法A：サイドバーの浮動化‣ CSSのfloatプロパティを利用して、段組を作成する方法

‣ 各レイアウトのセグメントごとに、ブロックを作成‣ div要素を使用する‣ divに囲まれた内容をひとつのまとまりとして扱う

‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer

方法A：サイドバーの浮動化‣ body要素の中身を3つのid要素に分ける....(略)....<body> <div id="header"> <p>ヘッダー</p> </div> <div id="sidebar"> <p>サイドバー</p> </div> <div id="content"> <p>メインコンテンツ</p> </div> <div id="footer"> <p>フッター</p> </div></body>....(略)....

方法A：サイドバーの浮動化‣ スタイルシートを作成‣ まずヘッダーとフッターのスタイルを定義する

方法A：サイドバーの浮動化‣ #headerと#footerに、スタイルを設定#header { padding: 20px; background: #ccc;}

#footer { padding: 20px; background: #ccc;}

方法A：サイドバーの浮動化‣ サイドバーを浮動化する‣ floatプロパティを使用‣ 左右どちらかにサイドバーを配置する‣ HTMLファイル内では、sidebar要素は必ずcontent要素の前になくてはならない

方法A：サイドバーの浮動化‣ sidebarを浮動化する#header { padding: 20px; background: #ccc;}

#sidebar { float: right; width: 30%; background: #999;}


方法A：サイドバーの浮動化

方法A：サイドバーの浮動化‣ まだちょっと変

‣ メインコンテンツがサイドバーの下に回り込んでしまっている

‣ contentの右側にマージンを指定することで解決できる‣ サイドバーの幅より僅かに広くcontent右のマージンをとることで、コラムの間に余白を生成する

方法A：サイドバーの浮動化‣ サイドバーを浮動化する#header { padding: 20px; background: #ccc;}


#content{ margin-right: 32%;}


方法A：サイドバーの浮動化

方法B：ダブルフロート‣ 方法Aの欠点

‣ サイドバーを浮動化する際には、必ずHTMLファイル上では、コンテンツより前に記述する必要がある部分

‣ CSSが使用できない環境 (携帯、読み上げソフトの使用など) の場合、コンテンツより先にメニューが来てしまう

‣ 文書構造としてあまり良くない

方法B：ダブルフロート‣ floatを用いて、この問題を解決する方法

‣ ダブルフロート‣ 段組の左右を両方ともfloat属性で浮動化させる‣ HTMLの順番に影響されず、左右の配置をコントロールできる

方法B：ダブルフロート‣ サイドバーとメインコンテンツを入れ替える....(略)....<body> <div id="header"> <p>ヘッダー</p> </div> <div id="content"> <p>メインコンテンツ</p> </div> <div id="sidebar"> <p>サイドバー</p> </div> <div id="footer"> <p>フッター</p> </div></body>....(略)....

方法B：ダブルフロート‣ CSSの変更

‣ contentのfloat属性を設定：右 (right) に‣ contentの幅を設定 (70%)‣ sidebarのfloat属性を設定：右 (right) に‣ sidebarの幅を設定 (30%)‣ footerの手前でコラム設定をクリアする必要がある‣ fotterのclear属性を設定：both

方法B：ダブルフロート

#header { padding: 2%; background: #ccc;}

#content{ float: right; width: 70%;}


#footer { clear: both; padding: 2%; background: #ccc;}


‣ さらに body の margin を 0 にする


body {! margin:0;}


#content{ float: right; width: 70%;}




‣ 各要素の余白(margin, padding)を微調整


body {! margin:0;}


#content{ float: right; width: 66%;! padding:2%;}

#sidebar { float: right; width: 26%;! padding: 2%; background: #999;}



方法B：ダブルフロート‣ ようやく整ったレイアウトのページが出来た!‣ この方法が段組の基本‣ あとは、この組合せ

メディア芸術基礎 Ⅰ 第４回：CSS入門 情報の形を視覚化する

Documents

メディア芸術基礎 Ⅰ 第４回：CSS入門情報の形を視覚化する