メディア芸術基礎 Ⅰ 第４回：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文書
HTML文書
HTML文書

‣ 表示の流れ
Webブラウザ
要素を分解
(ツリー構造)
(CSS2)
HTML文書
HTML文書
HTML文書

‣ 表示の流れ
Webブラウザ
要素を分解
(ツリー構造)
要素ごとに
スタイルを
適用
(CSS2)
HTML文書
HTML文書
HTML文書

‣ 表示の流れ
Webブラウザ
要素を分解
(ツリー構造)
要素ごとに
スタイルを
適用
(CSS2)
表示
HTML文書
HTML文書
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 (フォルダ) (画像ファイル)

‣ 自己紹介のHTMLの例
‣ まだスタイルシートは適用していない状態

‣ 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フォルダ内の default.css に以下の記述をする
‣ リロードすると何が変化するか?
h1 {
font-size: 1.75em;
}
h2 {
font-size: 1.25em;
}
p {
font-size: 0.8em;
}
li {
font-size: 0.8em;
}

‣ スタイル適用後：文字の大きさが変化

‣ 長さ、大きさの単位
単位単位
px ピクセル
pt ポイント
em 親要素の文字サイズを1としたときの比率
% 親要素の文字サイズを100としたときの比率

‣ さらに文字の色を指定してみる
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;
}

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

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

‣ 色を指定するには?
‣ 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)
‣ 11111111 11111111 11111111
‣ #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%で指定

‣ 文字の背景色を指定する
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;
}

‣ 文字の背景色を指定する

‣ 色と背景効果に関するプロパティ
プロパティ適用箇所値
color 要素内の文字の色色の単位
background-color 要素内の背景の色色の単位

‣ 行えを変更してみる - h1要素をセンタリング
h1 {
font-size: 1.75em;
color: #3399cc;
text-align: center;
}
h2 {
font-size: 1.25em;
color: #ffffff;
}
p {
font-size: 0.8em;
color: #333333;
}
li {
font-size: 0.8em;
color: #333333;
}

‣ 行えを変更

‣ 行間を拡げる
h1 {
font-size: 1.75em;
color: #3399cc;
text-align: center;
}
h2 {
font-size: 1.25em;
color: #ffffff;
}
p {
font-size: 0.8em;
color: #333333;
line-height: 1.75em;
}
li {
font-size: 0.8em;
color: #333333;
}

‣ 行間を拡げる

‣ 斜体の設定
...
li {
font-size: 0.8em;
color: #333333;
}
address{
font-size: 0.75em;
font-style: italic;
}

‣ 斜体の設定

‣ テキストに関するスタイル
プロパティ適用箇所値
font-size フォントの大きさサイズの単位
font-style 斜字体の設定 normal, italic, oblique
font-weight 文字の太さ 100∼900, normal, bold
text-decoratoin 下線などの装飾
none, underline, overline,
line-through

‣ ここまでのまとめ (これだけは憶えて欲しいリスト)
‣ 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-top
padding-top
border-top
上
margin-right
padding-right
border-right
右
margin-bottom
padding-bottom
border-bottom
下
margin-left
padding-left
border-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：ボックスのコンテント部分の高さ
‣ ﬂoat：テキストの回り込みの設定
‣ clear：テキス回り込みの解除
‣ position: top, bottom, left, right

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

ベースとなるHTMLの作成
‣ ベースとなるHTMLファイルを下記からダウンロードします
‣ 最低限のHTMLとCSSの設定があらかじめ行われています
‣ ダウンロード先
‣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のﬂoatプロパティを利用して、段組を作成する方法
‣ 各レイアウトのセグメントごとに、ブロックを作成
‣ div要素を使用する
‣ divに囲まれた内容をひとつのまとまりとして扱う
‣ 4つのブロックに分けて、それぞれにid属性を指定する
‣ header
‣ sidebar
‣ content
‣ footer

‣ 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>
....(略)....

‣ スタイルシートを作成
‣ まずヘッダーとフッターのスタイルを定義する

‣ #headerと#footerに、スタイルを設定
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #ccc;
}

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

‣ sidebarを浮動化する
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #ccc;
}

‣ まだちょっと変
‣ メインコンテンツがサイドバーの下に回り込んでしまっている
‣ contentの右側にマージンを指定することで解決できる
‣ サイドバーの幅よりかに広くcontent右のマージンをとるこ
とで、コラムの間に余白を生成する

‣ サイドバーを浮動化する
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#content{
margin-right: 32%;
}
#footer {
padding: 20px;
background: #ccc;
}

方法B：ダブルフロート
‣ 方法Aの欠点
‣ サイドバーを浮動化する際には、必ずHTMLファイル上では、
コンテンツより前に記述する必要がある部分
‣ CSSが使用できない環境 (携帯、読み上げソフトの使用など)
の場合、コンテンツより先にメニューが来てしまう
‣ 文書構造としてあまり良くない

‣ ﬂoatを用いて、この問題を解決する方法
‣ ダブルフロート
‣ 段組の左右を両方ともﬂoat属性で浮動化させる
‣ HTMLの順番に影響されず、左右の配置をコントロールできる

‣ サイドバーとメインコンテンツを入れ替える
....(略)....
<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>
....(略)....

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

#header {
padding: 2%;
background: #ccc;
}
#content{
float: right;
width: 70%;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
clear: both;
padding: 2%;
background: #ccc;
}

‣ さらに body の margin を 0 にする
body {
! margin:0;
}
#header {
padding: 2%;
background: #ccc;
}
#content{
float: right;
width: 70%;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
clear: both;
padding: 2%;
background: #ccc;
}

‣ 各要素の余白(margin, padding)を微調整
body {
! margin:0;
}
#header {
padding: 2%;
background: #ccc;
}
#content{
float: right;
width: 66%;
! padding:2%;
}
#sidebar {
float: right;
width: 26%;
! padding: 2%;
background: #999;
}
#footer {
clear: both;
padding: 2%;
background: #ccc;
}

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

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

Recommandé

Recommandé

Contenu connexe

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

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

Plus de Atsushi Tadokoro

Plus de Atsushi Tadokoro (20)