メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,437 views

 

Statistics

Views

Total Views
1,437
Views on SlideShare
665
Embed Views
772

Actions

Likes
0
Downloads
10
Comments
0

2 Embeds 772

http://yoppa.org 769
http://cloud.feedly.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. メディア芸術基礎 Ⅰ第4回:CSS入門情報の形を視覚化する2013年5月27日 (Aクラス)、6月3日 (Bクラス)多摩美術大学 情報デザイン学科 メディア芸術コース担当:田所淳
  • 2. CSS = 意味と構造(HTML)に表現を与える‣ CSS → Webページに、表現を加える‣ HTMLの構造の表現からは独立している‣ 情報のかたちを視覚化する機能HTMLマークアップ意味・構造CSSスタイルシート表現・デザイン
  • 3. CSSとは‣ CSS = Cascading Style Sheet‣ カスケーディング・スタイル・シート‣ 最も広く使用されている、スタイルシート言語のひとつ‣ 現在はCSS2からCSS3への移行期‣ この授業では、基本部分はCSS2で、必要に応じてCSS3をとり入れていきます
  • 4. CSSによる表現の指定‣ 表示の流れHTML文書HTML文書HTML文書
  • 5. CSSによる表現の指定‣ 表示の流れWebブラウザ要素を分解(ツリー構造)スタイルシートの指定HTML文書HTML文書HTML文書
  • 6. CSSによる表現の指定‣ 表示の流れWebブラウザ要素を分解(ツリー構造)スタイルシート(CSS2)スタイルシートの指定HTML文書HTML文書HTML文書
  • 7. CSSによる表現の指定‣ 表示の流れWebブラウザ要素を分解(ツリー構造)要素ごとにスタイルを適用スタイルシート(CSS2)スタイルシートの指定HTML文書HTML文書HTML文書
  • 8. CSSによる表現の指定‣ 表示の流れWebブラウザ要素を分解(ツリー構造)要素ごとにスタイルを適用スタイルシート(CSS2)表示スタイルシートの指定HTML文書HTML文書HTML文書
  • 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.htmlcss (フォルダ) default.cssimg (フォルダ) (画像ファイル)
  • 21. CSSを用いた文字のデザイン‣ 自己紹介のHTMLの例‣ まだスタイルシートは適用していない状態
  • 22. 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>...
  • 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. CSSを用いた文字のデザイン‣ スタイル適用後:文字の大きさが変化
  • 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. ‣ スタイル適用後:文字の色が変化CSSを用いた文字のデザイン
  • 28. ‣ 色の指定方法 1:16進数で指定する方法‣ RGBを、それぞれ 00 ∼ ffまでの16進数で表現する‣ 最初にシャープ # をつける‣ 例:‣#3690c9;‣ R → 36‣ G → 90‣ B → c9CSSを用いた文字のデザイン
  • 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. CSSを用いた文字のデザイン‣ 文字の背景色を指定する
  • 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. CSSを用いた文字のデザイン‣ 行 えを変更
  • 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. CSSを用いた文字のデザイン‣ 行間を拡げる
  • 40. CSSを用いた文字のデザイン‣ 斜体の設定...li {font-size: 0.8em;color: #333333;}address{font-size: 0.75em;font-style: italic;}
  • 41. CSSを用いた文字のデザイン‣ 斜体の設定
  • 42. CSSを用いた文字のデザイン‣ テキストに関するスタイルプロパティ 適用箇所 値font-size フォントの大きさ サイズの単位font-style 斜字体の設定 normal, italic, obliquefont-weight 文字の太さ 100∼900, normal, boldtext-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
  • 44. ボックスモデル
  • 45. ボックスモデル‣ CSSでは全ての要素を長方形のボックスを単位として考える‣ ブラウザの画面の中で積み木をしている感覚‣ いままで学んできたHTMLのほとんどタグ(ブロックレベル要素)は、その周囲に見えない長方形のボックスを持っていた‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与えることで様々なスタイルを実現する
  • 46. ボックスモデル‣ 例えば、多摩美術大学のトップページもボックス(長方形)の集合から構成されている
  • 47. ボックスモデル‣ Webページのほとんどの要素は、ボックス(長方形)の集合からなりたっている‣ この最小単位を組み合わせて、レイアウトをしていく‣ この最小単位のボックスを、ボックスモデルという‣ 重要となる要素は3つ!‣ margin‣ padding‣ border
  • 48. ‣ ボックスモデルボックスモデル要素の内容 (コンテント)marginpaddingborder隣接するボックスとの境界
  • 49. ボックスモデル‣ コンテント‣ 要素の内容そのもの‣ border‣ 要素を取り囲む枠線‣ padding‣ コンテントとボーダーまでの余白‣ magin‣ 隣接する他のボックス要素とボーダーまでの余白‣ padding、margin 余白のサイズを調整して、レイアウトを整えていく‣ border の線の太さ、線の種類、色、を調整して枠線をデザインする
  • 50. ボックスモデル‣ margin, padding, borderは、上下左右を個別に設定できるプロパティ 適用される場所margin-toppadding-topborder-top上margin-rightpadding-rightborder-right右margin-bottompadding-bottomborder-bottom下margin-leftpadding-leftborder-left左
  • 51. ボックスモデル‣ 上下左右を一括して設定することも可能‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する‣ 複数の値をスペースで区切ってまとめて記述できる値の記述数 設定される方向1 上下左右をまとめて設定2 上下、左右の順に設定3 上、左右、下の順に設定4 上、右、下、左の順で設定。(上から時計まわり)
  • 52. ボックスモデル‣ borderのプロパティー‣ 幅 (width)、色 (color)、形 (style) を設定できるプロパティ 設定できる値border-width 大きさの単位border-color 色の単位border-stylenone, dotted, dashed, solid, double, groove, ridge,inset, outset一括指定 width style color の順で設定する
  • 53. より詳細なセレクタの指定‣ 文脈セレクタ‣ 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}
  • 54. より詳細なセレクタの指定‣ 子孫要素に適用‣ 複数のセレクタを半角スペースで区切って列挙する‣ ある特定の要素タイプの子孫要素であるときにだけ適用される‣ 直接の子要素にだけ適用‣ 複数のセレクタを">"で区切って列挙する‣ 直接の子要素にだけ適用される‣ 兄弟要素に適用‣ 複数のセレクタを"+"で区切って列挙する‣ 同じ親要素を持つ「兄弟」要素にだけ適用される
  • 55. classとid‣ class属性‣ 要素名の後ろに"."をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「class="hoge"」という属性で指定される‣ id属性‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「id="hoge"」という属性で指定される‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用可
  • 56. スタイルの設計‣ 効果的なスタイルの設計‣ CSS読み込みの優先順位を利用して管理のし易いスタイルを設計する‣ サイト全体の共通スタイル‣ プロジェクトのスタイル‣ その文書特有のスタイル‣ 特定の要素固有のスタイル
  • 57. 出力メディアに応じた使いわけ‣ スタイルシートを表示するメディアに応じて振り分けることができる‣ link要素のmedia属性で設定する‣ CSSの"@media"というセレクタを用いても設定可能(CSS2以降)‣ メディアの種類‣ all:全てのメディアに適用(デフォルト)‣ aural:音声読み上げに適用‣ handheld:PDAなどの携帯端末に適用‣ print:印刷出力に適用‣ screen:一般的なカラーモニタに適用‣ tv:テレビなどに適用
  • 58. ポジショニング‣ ボックスの幅・高さや、テキストの回り込みなど設定できる‣ width:ボックスのコンテント部分の幅‣ height:ボックスのコンテント部分の高さ‣ float:テキストの回り込みの設定‣ clear:テキス回り込みの解除‣ position: top, bottom, left, right
  • 59. CSSレイアウト
  • 60. CSSレイアウト‣ より高度なCSSの活用‣ CSSを利用したページ全体のレイアウト‣ いくつかの方法を紹介
  • 61. ベースとなるHTMLの作成‣ ベースとなるHTMLファイルを下記からダウンロードします‣ 最低限のHTMLとCSSの設定があらかじめ行われています‣ ダウンロード先‣http://goo.gl/jWOzk
  • 62. ベースとなる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>
  • 63. 目標とするレイアウトのワイヤーフレーム‣ 目標とするレイアウトHeaderContent SidebarFooter
  • 64. 方法A:サイドバーの浮動化‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ div要素を使用する‣ divに囲まれた内容をひとつのまとまりとして扱う‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer
  • 65. 方法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>....(略)....
  • 66. 方法A:サイドバーの浮動化‣ スタイルシートを作成‣ まずヘッダーとフッターのスタイルを定義する
  • 67. 方法A:サイドバーの浮動化‣ #headerと#footerに、スタイルを設定#header {padding: 20px;background: #ccc;}#footer {padding: 20px;background: #ccc;}
  • 68. 方法A:サイドバーの浮動化‣ サイドバーを浮動化する‣ floatプロパティを使用‣ 左右どちらかにサイドバーを配置する‣ HTMLファイル内では、sidebar要素は必ずcontent要素の前になくてはならない
  • 69. 方法A:サイドバーの浮動化‣ sidebarを浮動化する#header {padding: 20px;background: #ccc;}#sidebar {float: right;width: 30%;background: #999;}#footer {padding: 20px;background: #ccc;}
  • 70. 方法A:サイドバーの浮動化
  • 71. 方法A:サイドバーの浮動化‣ まだちょっと変‣ メインコンテンツがサイドバーの下に回り込んでしまっている‣ contentの右側にマージンを指定することで解決できる‣ サイドバーの幅より かに広くcontent右のマージンをとることで、コラムの間に余白を生成する
  • 72. 方法A:サイドバーの浮動化‣ サイドバーを浮動化する#header {padding: 20px;background: #ccc;}#sidebar {float: right;width: 30%;background: #999;}#content{margin-right: 32%;}#footer {padding: 20px;background: #ccc;}
  • 73. 方法A:サイドバーの浮動化
  • 74. 方法B:ダブルフロート‣ 方法Aの欠点‣ サイドバーを浮動化する際には、必ずHTMLファイル上では、コンテンツより前に記述する必要がある部分‣ CSSが使用できない環境 (携帯、読み上げソフトの使用など)の場合、コンテンツより先にメニューが来てしまう‣ 文書構造としてあまり良くない
  • 75. 方法B:ダブルフロート‣ floatを用いて、この問題を解決する方法‣ ダブルフロート‣ 段組の左右を両方ともfloat属性で浮動化させる‣ HTMLの順番に影響されず、左右の配置をコントロールできる
  • 76. 方法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>....(略)....
  • 77. 方法B:ダブルフロート‣ CSSの変更‣ contentのfloat属性を設定:右 (right) に‣ contentの幅を設定 (70%)‣ sidebarのfloat属性を設定: 右 (right) に‣ sidebarの幅を設定 (30%)‣ footerの手前でコラム設定をクリアする必要がある‣ fotterのclear属性を設定:both
  • 78. 方法B:ダブルフロート#header {padding: 2%;background: #ccc;}#content{float: right;width: 70%;}#sidebar {float: right;width: 30%;background: #999;}#footer {clear: both;padding: 2%;background: #ccc;}
  • 79. 方法B:ダブルフロート
  • 80. ‣ さらに body の margin を 0 にする方法B:ダブルフロート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;}
  • 81. 方法B:ダブルフロート
  • 82. ‣ 各要素の余白(margin, padding)を微調整方法B:ダブルフロート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;}
  • 83. 方法B:ダブルフロート
  • 84. 方法B:ダブルフロート‣ ようやく整ったレイアウトのページが出来た!‣ この方法が段組の基本‣ あとは、この組合せ