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

第５章 スタイルシートによる
レイアウトデザイン
5.1 セレクタの種類
5.2 スタイルシートを用いたレイアウト手順
5.3 floatプロパティ
5.4 positionプロパティ
5.5 positionプロパティ
5.1 セレクタの種類
5.1.1 IDセレクタ
5.1.2 セレクタの名前の付け方
5.1.3 クラスセレクタ
5.1.4 子孫セレクタ
5.1.5 擬似クラス
5.1.1 IDセレクタ
（１）IDセレクタとは
■ HTML文書とスタイルシートを接続するための
オリジナルのシンボルを定義
HTML文書
スタイルシートファイル
<div id=“content”>
#content{
</div>
}
（２）使用例
■ 指定前
<div id="content">
<h3>ひよの山</h3>
<p>日本相撲協会のWeb上で物語が紹介されている
「ハッケヨイ！せきトリくん」の主人公。
日本相撲協会の公式キャラクタ。</p>
</div>
使用例
■ 指定後
<div id="content">
<h3>ひよの山</h3>
<p>日本相撲協会のWeb上で物語が紹介されている
「ハッケヨイ！せきトリくん」の主人公。
日本相撲協会の公式キャラクタ。</p>
</div>
#content{
margin: 20px;
padding: 30px;
background-color: #FFFF00;
}
5.1.2 セレクタの名前の付け方
■ 自由だが，スタイルや書式に関する名前よりも，HTMLの内
容や文書の構造に関する名前にしよう！！
【よく使われるIDセレクタ名】
IDセレクタ名 用途
wrapper
body要素の中身丸ごとを指すとき。
containerという名前も用いられる。
header
HTML上部の部分
content
コンテンツ部分
footer
HTML文書の最後の部分
nav
ナビゲーションをデザインする場合。
menuと記述されることも多い。
sidebar
コンテンツ部分に付属した要素。
subと名付けられることも多い。
5.1.3 クラスセレクタ
（１）指定方法
■ 複数個所を同一のスタイルにするときに使用する。
クラスの呼び出しのときはドット（．）を先頭に付ける。
HTML文書
スタイルシートファイル
<div id=“style1”>
.style1 {
</div>
}
■ 例題とする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>
<p class="style2">
となるから，答えは「101×50 = 5050だ」と即座に解答したそうです。
14歳のとき領主の援助でゲッチンゲン大学に入学し，
電気や数学の分野で主に活躍しました。
</p>
<p class="style2">
-------（後略）--------------
（２）例題
■ 複数個所を同一のスタイルにするときに使用する。
クラスの呼び出しのときはドット（．）を先頭に付ける。
body { font-size: 80%;
color: green;
}
.style1 { color: red;}
.style2 { color: blue;}
ol li {
list-style-type:
lower-roman;}
（３） クラス名の名前の付け方
■ 自由だが，スタイルや書式に関する名前よりも，HTMLの内
容や文書の構造に関する名前にしよう！！
【クラス名はマチマチ。しかし参考例】
クラス名
用途
block
文書構造上,ひとまとまりにしたいとき
article
記事全体をひとまとまりにしたいとき
list
同じリストをデザインするとき
link
同じ種類のリンクをデザインするとき
section
見出しとその見出しに含まれる要素を
ひとまとまりにしたいとき
date
日付の文字列をデザインしたいとき
style
同一のスタイルをまとめたいとき
（４）要素を特定してスタイルを指定
■ IDセレクタやクラスセレクタは，そのスタイルを指定したい
要素を特定することができる。
【HTML】
<h3 class=“style1”>h3要素</h3>
<p class=“style1”>p要素</p>
【CSS】
h3.style1{ color: red; }
（５）セレクタをグループ化する
■ セレクタをカンマ（，）で区切ることで，複数のセレクタに同じス
タイルを割り当てることができる。
div, .article {
line-height: 120%;
border 1px solid #7777CC;
}
5.1.4 子孫セレクタ
（１）指定方法
■ 複数個所を同一のスタイルにするときに使用する。
クラスの呼び出しのときはドット（．）を先頭に付ける。
スタイルシートファイル
HTML文書
<div id=“content”>
<p>
</div>
</p>
#contents p {
}
半角スペース
（２）指定例
■ contentのp要素を特定する例
<div id="content">
<p>青森の「味噌カレー牛乳ラーメン」ってちょっと不思議な味・・・
。青森行ったら，食べてみる価値あるかも</p></div>
<div id="footer">
<p>Copyright &copy; 2010 Yutaka Shirai All Right Reserved.</p>
#content p {
background: #FFFF00;
padding : 20px;
}
5.1.5 擬似セレクタ
（１）指定方法
■ a要素に擬似クラスを設定することで，リンクの色を変えたり，
背景色を変えたり，アンダーラインを引いたりする。
擬似クラス
説
明
link
リンク先をまだ訪問していないときのデザイン
visited
一度でもリンク先を訪問したときのデザイン
hover
マウスカーソルがa要素の領域内にあるときのデザイン
active
ブラウザがアクセスしているときのデザイン
（必ず上記の順に指定する）
（２）指定例
■ a要素に擬似クラスを設定することで，リンクの色を変えたり，
背景色を変えたり，アンダーラインを引いたりする。
<p><a href="050103.html">
味噌カレー牛乳ラーメン</a></p>
a { text-decoration: none;}
a:link { color: #000077;}
a:visited{ color: #007700;}
a:active,a:hover{
color: #FF0000;
text-decoration: underline;
}
（３）もうひとつの例
■アンダーラインがないとリンクがないと思われてしまう。
<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;
}
リンクが開
かれたら色
が変わって
いることに
注意
5.2スタイルシートを用いた
レイアウト手順
5.2.1 手順概要
5.2.2 ブロック分け
5.2.3 idセレクタの決定
5.2.4 スタイルの選定
5.2.5 構造化するブロック要素を決定
5.2.6 スタイルの指定，クラス指定
5.2.1 手順概要
■できるだけ，以下のように段階を追って記述しよう。
① ブロック分け
② idセレクタの決定
③ スタイルの選定
④ 構造化するブロック要素を決定
⑤ スタイルの指定，クラス指定
■カスケーディング・スタイルシート（Cascading Style Sheets）
の名前のとおり「段階的に連結（cascade）」させながら決
めていくこと。
5.2.2 ブロック分け
■記事ができたら，ページに載せる情報をどのようにまとめ
るかを考える。
■ひとつのまとまりをボックスとして，どのように配置するか
を考える。
5.2.3 idセレクタの決定
■決定したブロックに対してidセレクタ名を決める。
■複数個所を同じような書式にする場合，クラスの利用を
考える。
■ヘッダ，フッタ，コンテンツ，ナビゲーションなど決まりきっ
たブロックには，普通に使われる名前を使おう。
5.2.4 スタイルの選定
■ レイアウトを決めるスタイルを選択する。
■ 位置決めは，floatプロパティとpositionプロパティを使う。
■ 表現したいレイアウトに応じて，臨機応変に位置決めの
方法を選択する。
■ マージンや枠線などは，ピクセル単位で大きさを決めて
おく。
5.2.5 構造化するブロック要素を決定
■ 文章構造を明示するタグ，ナビゲーションを作るリストタ
グ，表組みのためのテーブルタグ等を決める。
■ ブロックをどのようにマークアップするかを考える。
5.2.6 各要素のスタイル指定，クラス指定
■ ブロック内の情報に対して詳細なスタイルを決める。
■ なるべく見やすいスタイルにすることに気をつける。
■ 記事本文等のフォントサイズ等については，ユーザが決
められるように相対的に指定することに心がける。
5.3 floatプロパティ
5.3.1 ボックスによるレイアウト
5.3.2 ID属性の記述
5.3.3 flatプロパティで段組レイアウト
5.3.4 ナビゲーションスタイル
5.3.5 displayプロパティを用いたリンク
5.3.1 ボックスによるレイアウト
■スタイルシートを使う場合，コンテンツをそのものをひとま
とまりの四角い箱（ボックス）として扱う。
wrapper
wrapper
header
header
nav
nav
content
content
col1
col1
col2
col2
footer
footer
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>
<div id="content">
<div id=”col1"><p>
連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは，
煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。
幼い頃から明敏な子で，教師から1から100までの
数字すべてを足す課題が出されたとき
ＩＤ属性の記述（その２）
■（前頁から続く）
<blockquote>
1+100=101，99+2=101，98+3=101，…
</blockquote>
となるから，答えは「101×50 = 5050だ」と即座に解答したそうです。
14歳のとき領主の援助でゲッチンゲン大学に入学し，
電気や数学の分野で主に活躍しました。
</p></div>
<div id="col2"><p>
1801年には“数論研究”を発刊しました。
1829年には，ガウスの線束定理を発表し，
電気力線、磁力線の発源点からの総湧出量を
表面積分により求める式を導き，
1832年には，磁界の絶対測定法をあみ出し，
電気史にも多大な貢献をしています。
</p></div>
</div>
<div id="footer">
<p>Copyright &copy Yutaka Shirai All Rights Reserved.</p>
</div>
</div>
5.3.3 floatプロパティで段組レイアウト
■navとcontentを段組で
body
{
#header {
#nav
{
#content{
font-size: 80%; width:678px;}
color: red; border-bottom: 1px solid #777777;}
background-color:#FFFF77; width:150px; float: left;}
color: blue; width:500px; float: right;
padding-left: 25px;}
#footer { clear:both; border-top: 1px solid #777777;}
}
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;
}
（２）ナビゲーションスタイルと段組の組み合わせ
■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;
}
（３）全体表示
#col1と#col2が
左右に並ぶ。
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;
}
5.4 positionプロパティ
5.4.1 positionプロパティとは
5.4.2 positionプロパティを使ったレイアウト
5.4.3 スクロールバーを使う
5.4.4 ボックスの重ね順
5.4.1 positionプロパティとは
（１）プロパティの種類
■ウィンドウ内のボックスの表示位置を詳細にレイ
アウトするためのプロパティ
プロパティ
position
top
left
right
bottom
値
配置のルールを指定するキーワード
基点となる位置上端から，ボックス上端までの距離
基点となる位置左端から，ボックス左端までの距離
基点となる位置右端から，ボックス右端までの距離
基点となる位置下端から，ボックス下端までの距離
（２）positionプロパティで指定するキーワード
■ 4種類のキーワードを使って指定する
プロパティ
absolute
relative
fixed
static
値
基点の位置からの絶対位置(基点が指定されていなけれ
ば表示領域の左上隅)
positionが指定されていなければ配置される位置から
の図る。
absoluteと同じだがスクロールしても配置位置を固定
positionが指定されていない場合と同じ位置に配置
（３）基本とするHTML文書とスタイルシート
【指定なし】
HTML
<div id="box1">&nbsp;</div>
<div id="box2">&nbsp;</div>
CSS
#box1 {
background-color: #CCCCCC;
width: 250px; border: 1px solid black;
padding: 20px;
}
#box2 {
background-color: #FFCCFF;
width: 250px; border: 1px solid black;
padding: 20px;
}
absolute
#box2のみのcss
#box2 {
position: absolute;
top: 50px; left:100px;
background-color: #FFCCFF;
width: 250px; border: 1px solid black;
padding: 20px;
}
100px
50px
relative
#box2のみのcss
#box2 {
position: relative;
top: 50px; left:100px;
background-color: #FFCCFF;
width: 250px; border: 1px solid black;
padding: 20px;
}
100px
50px
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;
width: 250px;
border: 1px solid black;
padding: 20px;
}
Absoluteと同じだが，
スクロールしても
box2の位置が変わらない
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>
（２）スタイルシートで正確に位置を指定する
CSS
#wrapper
#dragon
#julia
#mandelbro
#mengar
{
{
{
{
{
width:500; margin: 20px;}
position: absolute; top: 20px;
position: absolute; top: 10px;
position: absolute; top: 120px;
position: absolute; top: 120px;
left: 40px;}
left:160px;}
left: 40px;}
left:160px;}
5.4.3 スクロールバーを使う
（１）指定方法
■overflowプロパティを使うとスクロールバー付き
のボックスを作成することができる。
値
visible
scroll
Hiden
説明
オーパフローしたときボックスからはみ出して
表示される。ブラウザによってはボックス自体
も大きくなる（デフォルト）
スクロールバーが表示されてボックス内に収め
られる。
はみ出た部分は見えなくなる。
（１）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>
（２）スタイルシートと表示結果
#wrapper {
width :
margin :
}
#content {
width :
height :
padding :
border :
overflow:
}
500px;
20px;
400px;
200px;
10px;
1px solid black;
scroll;
5.4.4 ボックスの重ね順
z-indexを使う
■値が大きいほど前に表示される
#wrapper
#dragon
#julia
#mandelbro
#mengar
{width:500;
{ position:
{ position:
{ position:
{ position:
margin: 20px;}
absolute; top:
absolute; top:
absolute; top:
absolute; top:
20px;
80px;
160px;
240px;
left: 40px;
left:100px;
left:150px;
left:200px;
z-index:
z-index:
z-index:
z-index:
1;}
2;}
3;}
4;}