Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to メディア芸術基礎 Ⅰ 第5回：CSSレイアウト
Similar to メディア芸術基礎 Ⅰ 第5回：CSSレイアウト (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
Recently uploaded
Recently uploaded (16)
メディア芸術基礎 Ⅰ 第5回：CSSレイアウト
- 1. メディア芸術基礎 Ⅰ 第5回：CSSレイアウト 2013年6月10日 (Aクラス)、6月17日 (Bクラス) 多摩美術大学 情報デザイン学科 メディア芸術コース 担当：田所淳
- 2. 本日の内容 ‣ ボックスモデルについて (復習) ‣ CSSで段組レイアウトをする ‣ CSSでページのフレームワークを作成する ‣ まずはシンプルな2段組レイアウトに挑戦 ‣ ヘッダー ‣ コンテント ‣ サイドバー ‣ フッター ‣ ポピュラーな2つの方法 ‣ float ‣ position
- 3. ボックスモデル ‣ CSSでは全ての要素を長方形のボックスを単位として考える ‣ ブラウザの画面の中で積み木をしている感覚 ‣ いままで学んできたHTMLのほとんど要素(ブロックレベル要 素)はその周囲に見えない長方形のボックスを持っていた ‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与え ることで様々なスタイルを実現する
- 4. ボックスモデル ‣ コンテント ‣ 要素の内容そのもの ‣ border ‣ 要素を取り囲む枠線 ‣ padding ‣ コンテントとボーダーまでの余白 ‣ magin ‣ 隣接する他のボックス要素とボーダーまでの余白
- 6. ボックスモデル ‣ marginとpaddingの値の設定 ‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する ‣ 複数の値をスペースで区切ってまとめて記述できる ‣ 値の記述数 ‣ 1：上下左右をまとめて設定 ‣ 2：上下、左右の順に設定 ‣ 3：上、左右、下 ‣ 4：上、右、下、左の順で設定。(上から時計まわり)
- 7. ボックスモデル ‣ borderのプロパティ ‣ 3つのプロパティを持つ ‣ border-width：枠線の幅 ‣ border-color：枠線の色 ‣ border-style：枠線の種類 ‣ none、solid、double、dotted、dashed、 groove、inset、outset、ridge
- 8. セレクタ詳細
- 10. classとid ‣ class属性 ‣ 要素名の後ろに"."をつけて、その後のクラス名をつける ‣ クラス属性はHTMLのタグに「class="hoge"」という属 性で指定される ‣ id属性 ‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける ‣ クラス属性はHTMLのタグに「id="hoge"」という属性で 指定される ‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用 可
- 11. div と span ‣ divとspanで選択範囲をまとめる ‣ div要素やspan要素で複数の要素を囲むことによって、一定 の範囲にまとめてスタイルを指定することができる ‣ divやspan要素は、classやidによってCSSから識別する <div class=”myclass”> ... </div> <div id=”myid”> ... </div> .myclass { ... } #myid { ... }
- 12. div と span ‣ div要素 - 高度なスタイル指定の基本となる ‣ ページ内の機能の応じてHTMLを区分分けする ‣ ヘッダ ‣ フッタ ‣ メニューバー ‣ サイドバー ...etc ‣ 段組に応用
- 13. CSSレイアウト
- 14. CSSレイアウト ‣ より高度なCSSの活用 ‣ CSSを利用したページ全体のレイアウト ‣ いくつかの方法を紹介
- 15. ベースとなるHTMLの作成 ‣ ベースとなるHTMLファイルを下記からダウンロードします ‣ 最低限のHTMLとCSSの設定があらかじめ行われています ‣ ダウンロード先 ‣http://goo.gl/jWOzk
- 16. ベースとなる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>
- 18. 方法A：サイドバーの浮動化 ‣ CSSのfloatプロパティを利用して、段組を作成する方法 ‣ 各レイアウトのセグメントごとに、ブロックを作成 ‣ div要素を使用する ‣ divに囲まれた内容をひとつのまとまりとして扱う ‣ 4つのブロックに分けて、それぞれにid属性を指定する ‣ header ‣ sidebar ‣ content ‣ footer
- 19. 方法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> ....(略)....
- 21. 方法A：サイドバーの浮動化 ‣ #headerと#footerに、スタイルを設定 #header { padding: 20px; background: #ccc; } #footer { padding: 20px; background: #ccc; }
- 22. 方法A：サイドバーの浮動化 ‣ サイドバーを浮動化する ‣ floatプロパティを使用 ‣ 左右どちらかにサイドバーを配置する ‣ HTMLファイル内では、sidebar要素は必ずcontent要素の 前になくてはならない
- 23. 方法A：サイドバーの浮動化 ‣ sidebarを浮動化する #header { padding: 20px; background: #ccc; } #sidebar { float: right; width: 30%; background: #999; } #footer { padding: 20px; background: #ccc; }
- 24. 方法A：サイドバーの浮動化
- 25. 方法A：サイドバーの浮動化 ‣ まだちょっと変 ‣ メインコンテンツがサイドバーの下に回り込んでしまっている ‣ contentの右側にマージンを指定することで解決できる ‣ サイドバーの幅より かに広くcontent右のマージンをとるこ とで、コラムの間に余白を生成する
- 26. 方法A：サイドバーの浮動化 ‣ サイドバーを浮動化する #header { padding: 20px; background: #ccc; } #sidebar { float: right; width: 30%; background: #999; } #content{ margin-right: 32%; } #footer { padding: 20px; background: #ccc; }
- 27. 方法A：サイドバーの浮動化
- 28. 方法B：ダブルフロート ‣ 方法Aの欠点 ‣ サイドバーを浮動化する際には、必ずHTMLファイル上では、 コンテンツより前に記述する必要がある部分 ‣ CSSが使用できない環境 (携帯、読み上げソフトの使用など) の場合、コンテンツより先にメニューが来てしまう ‣ 文書構造としてあまり良くない
- 29. 方法B：ダブルフロート ‣ floatを用いて、この問題を解決する方法 ‣ ダブルフロート ‣ 段組の左右を両方ともfloat属性で浮動化させる ‣ HTMLの順番に影響されず、左右の配置をコントロールできる
- 30. 方法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> ....(略)....
- 31. 方法B：ダブルフロート ‣ CSSの変更 ‣ contentのfloat属性を設定：右 (right) に ‣ contentの幅を設定 (70%) ‣ sidebarのfloat属性を設定： 右 (right) に ‣ sidebarの幅を設定 (30%) ‣ footerの手前でコラム設定をクリアする必要がある ‣ fotterのclear属性を設定：both
- 32. 方法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; }
- 33. 方法B：ダブルフロート
- 34. ‣ さらに 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; }
- 35. 方法B：ダブルフロート
- 36. ‣ 各要素の余白(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; }
- 37. 方法B：ダブルフロート
- 38. 方法B：ダブルフロート ‣ ようやく整ったレイアウトのページが出来た! ‣ この方法が段組の基本 ‣ あとは、この組合せ
- 41. Twitter Bootstrapとは ‣ Twitter Bootstrap： ‣ Twitter社が開発／提供するオープンソースな「CSSフレーム ワーク」 ‣ 簡単に高度なWebデザインをすることが可能 ‣ 2013年5月現在のバージョンは、Version 2.3.2
- 42. Twitter Bootstrapとは ‣ Bootstrapを使用したサイト ‣ http://builtwithbootstrap.com/ で多数紹介
- 43. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの一例 ‣ http://logobro.com/
- 44. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの例 ‣ http://demo.color-theme.com/?theme=NewsTrick
- 45. Twitter Bootstrapとは ‣ Bootstrapを利用したサイトの例 ‣ https://dotvita.com/
- 47. Twitter Bootstrapを使ってみる ‣ まずは、Bootstrapをダウンロード ‣ http://twitter.github.com/bootstrap/index.html ‣ Download Bootstrap ボタンから
- 48. Twitter Bootstrapを使ってみる ‣ Zipファイルを解凍すると、以下のような内容になっている ‣ この「bootstrap」フォルダにページを作成していく bootstrap/ !"" css/ # !"" bootstrap.css # !"" bootstrap.min.css !"" js/ # !"" bootstrap.js # !"" bootstrap.min.js $"" img/ !"" glyphicons-halflings.png $"" glyphicons-halflings-white.png
- 49. <link rel="stylesheet" href="css/bootstrap.css" /> Twitter Bootstrapを使ってみる ‣ 導入は簡単、下記のリンクを入れるだけ
- 50. <!DOCTYPE HTML> <html> ! <head> ! ! <link rel="stylesheet" href="css/bootstrap.css" /> ! ! <meta charset="utf-8" /> ! ! <title>Bootstrapのテスト</title> ! </head> ! <body> ! </body> </html> Twitter Bootstrapを使ってみる ‣ では早速、Bootstrapを入れたHTMLのベースを作成
- 51. <!DOCTYPE HTML> <html> ! <head> ! ! <link rel="stylesheet" href="css/bootstrap.css" /> ! ! <meta charset="utf-8" /> ! ! <title>Bootstrapのテスト</title> ! </head> ! <body> ! ! <div class="container"> ! ! </div> ! </body> </html> Twitter Bootstrapを使ってみる ‣ 次に、Bootstrapのコンテント全体を、 class="container"のdiv要素で囲む
- 52. <!DOCTYPE HTML> <html> ! <head> ! ! <link rel="stylesheet" href="css/bootstrap.css" /> ! ! <meta charset="utf-8" /> ! ! <title>Bootstrapのテスト</title> ! </head> ! <body> ! ! <div class="container"> ! ! ! <h1>Twitter Bootstrapのテスト</h1> ! ! </div> ! </body> </html> Twitter Bootstrapを使ってみる ‣ H1で見出しをつくってみる
- 53. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapでのレイアウトは「グリッドシステム」 が基本となっている ‣ Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung
- 55. Twitter Bootstrapを使ってみる ‣ グリッドシステム ‣ エディトリアル (出版) デザインの分野では、レイアウトの基 本となっている ‣ Webデザインにおいても、グリッドシステムはデザインやレ イアウトの基本
- 56. Twitter Bootstrapを使ってみる ‣ Twitter Bootstrapにおけるグリッドは、12コラムが基本 ‣ 12の分割から、様々な組合せが生まれる ‣ このシステムを利用してレイアウトしていく
- 57. <!DOCTYPE HTML> <html> ! <head> ! ! <link rel="stylesheet" href="css/bootstrap.css" /> ! ! <meta charset="utf-8" /> ! ! <title>Bootstrapのテスト</title> ! </head> ! <body> ! ! <div class="container"> ! ! ! <h1>Twitter Bootstrapのテスト</h1>!! ! ! ! ! <div class="row"> ! ! ! </div> ! ! </div> ! </body> </html> Twitter Bootstrapを使ってみる ‣ たとえば、4 + 4 + 4の3コラムを組んでみる ‣ まずコラムの先頭を<div class="row">で囲む
- 58. ... ! ! ! <div class="row"> ! ! ! ! <div class="span4"> ! ! ! ! </div> ! ! ! ! <div class="span4"> ! ! ! ! </div> ! ! ! ! <div class="span4"> ! ! ! ! </div> ! ! ! </div> ... Twitter Bootstrapを使ってみる ‣ <div class="row">の中に ‣ 3つの<div class="span4">を入れる
- 59. ... ! ! ! <div class="row"> ! ! ! ! <div class="span4"> ! ! ! ! ! <h2>Span 4</h2> ! ! ! ! ! <p> このコラムは、4つのスパン... </p> ! ! ! ! </div> ! ! ! ! <div class="span4"> ! ! ! ! ! <h2>Span 4</h2> ! ! ! ! ! <p> このコラムは、4つのスパン... </p> ! ! ! ! </div> ! ! ! ! <div class="span4"> ! ! ! ! ! <h2>Span 4</h2> ! ! ! ! ! <p> このコラムは、4つのスパン... </p> ! ! ! ! </div> ! ! ! </div> ... Twitter Bootstrapを使ってみる ‣ それぞれの<div class="span4">の中に、内容を記述
- 62. <!DOCTYPE HTML> <html> ! <head> ! ! <link rel="stylesheet" href="css/bootstrap.css" /> ! ! <meta charset="utf-8" /> ! ! <title>Bootstrapのテスト</title> ! </head> ! <body> ! ! <div class="container">!! ! ! ! ! <div class="hero-unit"> ! ! ! ! <h1>Hello Twitter Bootstrap!!</h1> ! ! ! ! <p>このページは、Twitter Bootstrapを利用して作成し たページのサンプルです。</p> ! ! ! ! <p><a class="btn btn-primary btn-large">もっと 詳しく</a></p> ! ! ! </div> ... Twitter Bootstrapを使ってみる ‣ 冒頭のH1をよりヘッダーらしく
- 66. レスポンシブなページに ‣ レスポンシブWebデザイン（Responsive Web Design） ‣ 現在、WebサイトはPCで見るものとは限らない ‣ スマートフォン ‣ タブレット ‣ サイネージ ..etc. ‣ あらゆるデバイスに最適化したWebサイトを、単一のHTML で実現する制作手法を「レスポンシブ」なWebデザインとい う
- 67. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="css/bootstrap-responsive.css" rel="stylesheet" /> レスポンシブなページに ‣ BootstrapでレスポンシブWebデザイン ‣ あらかじめ、レスポンシブなサイト制作を想定しているので、 とても簡単 ‣ <head>...</head>内に下記のコードを入れるだけ ‣ 先程の段組サンプルに入れてみる
- 72. ページサンプルを解析する ‣ Basic marketing site ‣