Webデザイン演習

第５章スタイルシートによる
レイアウトデザイン
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 © 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"> </div>
<div id="box2"> </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;}

Download Report