第５章 スタイルシートによる レイアウトデザイン

Presentation on theme: "第５章 スタイルシートによる レイアウトデザイン"— Presentation transcript:

1 第５章 スタイルシートによる レイアウトデザイン
5.1 セレクタの種類 5.2 スタイルシートを用いたレイアウト手順 5.3 floatプロパティ 5.4 positionプロパティ 5.5 positionプロパティ

2 5.1 セレクタの種類 5.1.1 IDセレクタ 5.1.2 セレクタの名前の付け方 5.1.3 クラスセレクタ 5.1.4 子孫セレクタ
5.1.5 擬似クラス

3 5.1.1 IDセレクタ （１）IDセレクタとは ■ HTML文書とスタイルシートを接続するための オリジナルのシンボルを定義
スタイルシートファイル HTML文書 #content{ <div id=“content”> } </div>

4 （２）使用例 ■ 指定前 <div id="content"> <h3>ひよの山</h3>
■ 指定前 <div id="content"> <h3>ひよの山</h3> <p>日本相撲協会のWeb上で物語が紹介されている 「ハッケヨイ！せきトリくん」の主人公。 日本相撲協会の公式キャラクタ。</p> </div>

5 使用例 ■ 指定後 <div id="content"> <h3>ひよの山</h3>
■ 指定後 <div id="content"> <h3>ひよの山</h3> <p>日本相撲協会のWeb上で物語が紹介されている 「ハッケヨイ！せきトリくん」の主人公。 日本相撲協会の公式キャラクタ。</p> </div> #content{ margin: 20px; padding: 30px; background-color: #FFFF00; }

6 5.1.2 セレクタの名前の付け方 ■ 自由だが，スタイルや書式に関する名前よりも，HTMLの内容や文書の構造に関する名前にしよう！！
【よく使われるIDセレクタ名】 IDセレクタ名 用途 wrapper body要素の中身丸ごとを指すとき。 containerという名前も用いられる。 header HTML上部の部分 content コンテンツ部分 footer HTML文書の最後の部分 nav ナビゲーションをデザインする場合。 menuと記述されることも多い。 sidebar コンテンツ部分に付属した要素。 subと名付けられることも多い。

7 5.1.3 クラスセレクタ （１）指定方法 ■ 複数個所を同一のスタイルにするときに使用する。
■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット（．）を先頭に付ける。 スタイルシートファイル HTML文書 .style1 { <div id=“style1”> } </div>

8 ■ 例題とするHTML 【<h3 class="style1">行列式の解法（直接法）</h3>
<p>直接法には，以下のような方法があります。</p> <ol><li>ガウス（Gauss)の消去法</li> <li>ガウス・ジョルダン（Gauss-Jordan）法（別名：掃出し法）</li> <li>LU分解法</li> </ol> <p class="style1">--ガウスってどんな人？--</p> <p style="float:right; margin-right: 10px;"> <img src=”img001.jpg" alt="ガウスの写真"> <p class="style2"> 連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは， 煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。 幼い頃から明敏な子で，教師から1から100までの 数字すべてを足す課題が出されたとき </p> <blockquote> <p class="style1">1+100=101，99+2=101，98+3=101，…</p> </blockquote> となるから，答えは「101×50 = 5050だ」と即座に解答したそうです。 14歳のとき領主の援助でゲッチンゲン大学に入学し， 電気や数学の分野で主に活躍しました。 （後略）

9 （２）例題 ■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット（．）を先頭に付ける。
■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット（．）を先頭に付ける。 body { font-size: 80%; color: green; } .style1 { color: red;} .style2 { color: blue;} ol li { list-style-type: 　　lower-roman;}

10 （３） クラス名の名前の付け方 ■ 自由だが，スタイルや書式に関する名前よりも，HTMLの内容や文書の構造に関する名前にしよう！！
【クラス名はマチマチ。しかし参考例】 クラス名 用途 block 文書構造上,ひとまとまりにしたいとき article 記事全体をひとまとまりにしたいとき list 同じリストをデザインするとき link 同じ種類のリンクをデザインするとき section 見出しとその見出しに含まれる要素を ひとまとまりにしたいとき date 日付の文字列をデザインしたいとき style 同一のスタイルをまとめたいとき

11 <h3 class=“style1”>h3要素</h3>
（４）要素を特定してスタイルを指定 ■ IDセレクタやクラスセレクタは，そのスタイルを指定したい 要素を特定することができる。 【HTML】 <h3 class=“style1”>h3要素</h3> <p class=“style1”>p要素</p> 【CSS】 h3.style1{ color: red; }

12 （５）セレクタをグループ化する div, .article { line-height: 120%;
■ セレクタをカンマ（，）で区切ることで，複数のセレクタに同じスタイルを割り当てることができる。 div, .article { line-height: 120%; border 1px solid #7777CC; }

13 5.1.4 子孫セレクタ （１）指定方法 ■ 複数個所を同一のスタイルにするときに使用する。
■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット（．）を先頭に付ける。 スタイルシートファイル HTML文書 <div id=“content”> #contents p { <p> </p> 半角スペース } </div>

14 （２）指定例 ■ contentのp要素を特定する例 <div id="content">
<p>青森の「味噌カレー牛乳ラーメン」ってちょっと不思議な味・・・。青森行ったら，食べてみる価値あるかも</p></div> <div id="footer"> <p>Copyright © 2010 Yutaka Shirai All Right Reserved.</p> #content p { background: #FFFF00; padding : 20px; }

15 5.1.5 擬似セレクタ （１）指定方法 ■ a要素に擬似クラスを設定することで，リンクの色を変えたり，背景色を変えたり，アンダーラインを引いたりする。 擬似クラス 　　　説　　明 link リンク先をまだ訪問していないときのデザイン visited 一度でもリンク先を訪問したときのデザイン hover マウスカーソルがa要素の領域内にあるときのデザイン active ブラウザがアクセスしているときのデザイン （必ず上記の順に指定する）

16 （２）指定例 ■ a要素に擬似クラスを設定することで，リンクの色を変えたり，背景色を変えたり，アンダーラインを引いたりする。
<p><a href=" html"> 味噌カレー牛乳ラーメン</a></p> a { text-decoration: none;} a:link { color: #000077;} a:visited{ color: #007700;} a:active,a:hover{ color: #FF0000; text-decoration: underline; }

17 （３）もうひとつの例 ■アンダーラインがないとリンクがないと思われてしまう。 a:link { color: #000077;}
<p>ゆとり教育の学力観</p> <ul> <li><a href="#link1">自ら考える力</a></li> <li><a href="#link1">自ら判断する力</a></li> <li><a href="#link1">自ら表現する力</a></li> </ul> a:link { color: #000077;} a:visited{ color: #007700;} a:active,a:hover{ color: #FF0000; background-color: #FFFF00; } リンクが開かれたら色が変わっていることに注意

18 5.2スタイルシートを用いた レイアウト手順 5.2.1 手順概要 5.2.2 ブロック分け 5.2.3 idセレクタの決定
5.2.4 スタイルの選定 5.2.5 構造化するブロック要素を決定 5.2.6 スタイルの指定，クラス指定

19 5.2.1 手順概要 ■できるだけ，以下のように段階を追って記述しよう。 ① ブロック分け ② idセレクタの決定 ③ スタイルの選定
④ 構造化するブロック要素を決定 ⑤ スタイルの指定，クラス指定 ■カスケーディング・スタイルシート（Cascading Style Sheets）の名前のとおり「段階的に連結（cascade）」させながら決めていくこと。

20 5.2.2 ブロック分け ■記事ができたら，ページに載せる情報をどのようにまとめるかを考える。
■ひとつのまとまりをボックスとして，どのように配置するかを考える。

21 5.2.3 idセレクタの決定 ■決定したブロックに対してidセレクタ名を決める。
■複数個所を同じような書式にする場合，クラスの利用を考える。 ■ヘッダ，フッタ，コンテンツ，ナビゲーションなど決まりきったブロックには，普通に使われる名前を使おう。

22 5.2.4 スタイルの選定 ■ レイアウトを決めるスタイルを選択する。
■ レイアウトを決めるスタイルを選択する。 ■ 位置決めは，floatプロパティとpositionプロパティを使う。 ■ 表現したいレイアウトに応じて，臨機応変に位置決めの方法を選択する。 ■ マージンや枠線などは，ピクセル単位で大きさを決めておく。

23 5.2.5 構造化するブロック要素を決定 ■ 文章構造を明示するタグ，ナビゲーションを作るリストタグ，表組みのためのテーブルタグ等を決める。
■ 文章構造を明示するタグ，ナビゲーションを作るリストタグ，表組みのためのテーブルタグ等を決める。 ■ ブロックをどのようにマークアップするかを考える。

24 5.2.6 各要素のスタイル指定，クラス指定 ■ ブロック内の情報に対して詳細なスタイルを決める。
■ ブロック内の情報に対して詳細なスタイルを決める。 ■ なるべく見やすいスタイルにすることに気をつける。 ■ 記事本文等のフォントサイズ等については，ユーザが決められるように相対的に指定することに心がける。

25 5.3 floatプロパティ 5.3.1 ボックスによるレイアウト 5.3.2 ID属性の記述
5.3.3 flatプロパティで段組レイアウト 5.3.4 ナビゲーションスタイル 5.3.5 displayプロパティを用いたリンク

26 5.3.1 ボックスによるレイアウト ■スタイルシートを使う場合，コンテンツをそのものをひとまとまりの四角い箱（ボックス）として扱う。
wrapper wrapper header header nav nav content content col1 col1 col2 col2 footer footer

27 5.3.2 ＩＤ属性の記述 ■HTMLにID属性を挿入します。 <div id="wrapper">
<div id="header"> <h3><img src=”img001.jpg" alt="ガウスの写真"> <p>--ガウスってどんな人？--<p></h3> </div> <div id="nav"> <p>menu <ul> <li><a href="#Gauss">ガウス</a></li> <li><a href="#Newton">ニュートン</a></li> <li><a href="#Jacobi">ヤコビ</a></li> </ul> </p> <div id="content"> <div id=”col1"><p> 連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは， 煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。 幼い頃から明敏な子で，教師から1から100までの 数字すべてを足す課題が出されたとき

28 ＩＤ属性の記述（その２） ■（前頁から続く） <blockquote>
　　1+100=101，99+2=101，98+3=101，… </blockquote> となるから，答えは「101×50 = 5050だ」と即座に解答したそうです。 14歳のとき領主の援助でゲッチンゲン大学に入学し， 電気や数学の分野で主に活躍しました。 </p></div> <div id="col2"><p> 1801年には“数論研究”を発刊しました。 1829年には，ガウスの線束定理を発表し， 電気力線、磁力線の発源点からの総湧出量を 表面積分により求める式を導き， 1832年には，磁界の絶対測定法をあみ出し， 電気史にも多大な貢献をしています。 </div> <div id="footer"> <p>Copyright &copy Yutaka Shirai All Rights Reserved.</p>

29 5.3.3 floatプロパティで段組レイアウト ■navとcontentを段組で
body　　{ font-size: 80%; width:678px;} #header { color: red; border-bottom: 1px solid #777777;} #nav　　{ background-color:#FFFF77; width:150px; float: left;} #content{ color: blue; width:500px; float: right; padding-left: 25px;} #footer { clear:both; border-top: 1px solid #777777;} }

30 5.3.4 ナビゲーションスタイル （１）横に並ぶナビゲーションスタイル
■横に並ぶナビゲーションのスタイル #nav li { float:left;width:118px;border:1px solid black; margin-right:5px; margin-left:0px; font-size:12px; text-align:center; background-color:#CCCCCC; }

31 （２）ナビゲーションスタイルと段組の組み合わせ
■col1とcol2を横に並ばせる body{ width:550px;} #header { color: red; border-bottom: 1px solid #777777;} #nav li{ float:left;width:118px;border:1px solid black; margin-right:5px; margin-left:0px; font-size:12px; text-align:center; background-color:#CCCCCC; } #content{clear: both; border-top: 1px solid #777777;} #col1{ width:250px; float:left;} #col2{ width:250px; float:right;} #footer{ clear:both; border-top: 1px solid #777777;

32 （３）全体表示 #col1と#col2が 左右に並ぶ。

33 5.3.5 displayプロパティを使ったリンク ■displayプロパティを使って，ブロックレベルに変換 #nav li
{ float:left;width:118px;border:1px solid black; 　margin-right:5px; margin-left:0px; text-align:center; 　background-color:#CCCCCC; text-decoration:none; } #nav a{display: block; width:118px;height:20px;color:black; 　　 text-decoration:none;} #nav a:hover{ display: block; color: #FFFFCC; 　　　　　　　background-color:#FF00FF; text-decoration:none;

34 5.4 positionプロパティ 5.4.1 positionプロパティとは 5.4.2 positionプロパティを使ったレイアウト
5.4.3 スクロールバーを使う 5.4.4 ボックスの重ね順

35 5.4.1 positionプロパティとは （１）プロパティの種類
■ウィンドウ内のボックスの表示位置を詳細にレイアウトするためのプロパティ プロパティ 値 position 配置のルールを指定するキーワード top 基点となる位置上端から，ボックス上端までの距離 left 基点となる位置左端から，ボックス左端までの距離 right 基点となる位置右端から，ボックス右端までの距離 bottom 基点となる位置下端から，ボックス下端までの距離

36 （２）positionプロパティで指定するキーワード
■ 4種類のキーワードを使って指定する プロパティ 値 absolute 基点の位置からの絶対位置(基点が指定されていなければ表示領域の左上隅) relative positionが指定されていなければ配置される位置からの図る。 fixed absoluteと同じだがスクロールしても配置位置を固定 static positionが指定されていない場合と同じ位置に配置

37 （３）基本とするHTML文書とスタイルシート
【指定なし】 HTML <div id="box1"> </div> <div id="box2"> </div> CSS #box1 { background-color: #CCCCCC; width: 250px; border: 1px solid black; padding: 20px; } #box2 { background-color: #FFCCFF;

38 absolute #box2のみのcss #box2 { position: absolute;
top: 50px; left:100px; background-color: #FFCCFF; width: 250px; border: 1px solid black; padding: 20px; } 100px 50px

39 relative #box2のみのcss #box2 { position: relative;
top: 50px; left:100px; background-color: #FFCCFF; width: 250px; border: 1px solid black; padding: 20px; } 100px 50px

40 fixed #box1, boc2のcss #box1 { background-color: #CCCCCC; width: 250px;
height: 500px; border: 1px solid black; padding: 20px; } #box2 { position: fixed; top: 50px; left:100px; background-color: #FFCCFF; Absoluteと同じだが， スクロールしても box2の位置が変わらない

41 5.4.1 positionプロパティを使ったレイアウト
（１）HTMLでIDを指定する HTML <div id="wrapper"> <div id="dragon"> <img src="image/DragonCurve.jpg” alt="ドラゴンカーブ" width=100 height=80> </div> <div id="julia"><img src="image/julia.jpg” alt="充填ジュリア集合" width=100 height=100> </div> <div id="mandelbro"><img src="image/mandelbro.jpg” alt="マンデルブロー集合" width=100 height=100></div> <div id="mengar"><img src="image/Mengar.jpg” alt="メンガーのスポンジ" width=100 height=100></div> </div>

42 （２）スタイルシートで正確に位置を指定する
CSS #wrapper { width:500; margin: 20px;} #dragon { position: absolute; top: 20px; left: 40px;} #julia { position: absolute; top: 10px; left:160px;} #mandelbro { position: absolute; top: 120px; left: 40px;} #mengar { position: absolute; top: 120px; left:160px;}

43 5.4.3 スクロールバーを使う （１）指定方法 ■overflowプロパティを使うとスクロールバー付きのボックスを作成することができる。
　値 説明 visible オーパフローしたときボックスからはみ出して表示される。ブラウザによってはボックス自体も大きくなる（デフォルト） scroll スクロールバーが表示されてボックス内に収められる。 Hiden はみ出た部分は見えなくなる。

44 （１）HTML <div id="wrapper">
<div id="header"><p>--ガウスってどんな人？--</p></h3></div> <div id="content"><p> 連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは， 煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。 幼い頃から明敏な子で，教師から1から100までの 数字すべてを足す課題が出されたとき <blockquote>1+100=101，99+2=101，98+3=101，…</blockquote> となるから，答えは「101×50 = 5050だ」と即座に解答したそうです。 14歳のとき領主の援助でゲッチンゲン大学に入学し， 電気や数学の分野で主に活躍しました。 </p><p> 1801年には“数論研究”を発刊しました。1829年には，ガウスの線束定理を発表し， 電気力線、磁力線の発源点からの総湧出量を表面積分により求める式を導き， 1832年には，磁界の絶対測定法をあみ出し，電気史にも多大な貢献をしています。 </p></div></div> <div id="footer"> <p>Copyright &copy Yutaka Shirai All Rights Reserved.</p> </div>

45 （２）スタイルシートと表示結果 #wrapper { width : 500px; margin : 20px; } #content {
height : 200px; padding : 10px; border : 1px solid black; overflow: scroll;

46 5.4.4 ボックスの重ね順 z-indexを使う ■値が大きいほど前に表示される
#wrapper {width:500; margin: 20px;} #dragon { position: absolute; top: 20px; left: 40px; z-index: 1;} #julia { position: absolute; top: 80px; left:100px; z-index: 2;} #mandelbro { position: absolute; top: 160px; left:150px; z-index: 3;} #mengar { position: absolute; top: 240px; left:200px; z-index: 4;}