構造化文書 - 東京大学

構造化文書
I. html
II. スタイルシート
III. 参考書：ホームページ辞典
ＨＴＭＬ
現在のブラウザでしばしば表示されている
構造化テキスト
典型的なマークアップ言語
表示構造と論理構造が渾然一体
タグの意味が曖昧
H1とはタイトルなのか強調なのか？
情報交換用文書としては、これでは困る
スタイルシート
Ｗｅｂページのレイアウトを定義する技術
ＨＴＭＬは論理構造を記述
スタイルシートは表示構造を記述
という立場
現在良く使われている CSSについて説明
スタイルシートの設定方法
1. 外部スタイルシートを読み込む
2. ＨＴＭＬ文書にまとめて設定
3. タグに直接スタイルを設定
 スタイルシートはボックス（領域）に対して
指定する。背景色指定のおよぶ領域とな
る
外部スタイルシートを読み込む
<title>外部スタイルシート</title>
<link rel=“stylesheet” href=“h1design.css” type=“text/css”>
</head>
<body>
<h1>スタイルシート</h1>
</body>
h1design.css
h1
{
background-color:#cfc;
color:rgb(0,128,0)
}
ＨＴＭＬ文書にまとめて設定
<title>ＨＴＭＬ文書にまとめて設定
</title>
<style type=“text/css”>
<!-h1 {
background-color:#cfc;
color:rgb(0,128,0)
}
-->
</style>
</head>
<body>
<h1>スタイルシート</h1>
</body>
タグに直接スタイルを設定
<title>タグに直接スタイルを設定
</title>
</head>
<body>
<h1 style=“background-color:#cfc; color:rgb(0,128,0)” >
スタイルシート</h1>
</body>
クラスとＩＤ
• #名前
 id=“名前”
– 要素に名前をつける。同一文書中で1回だけ
しか使えない
• .クラス名  class=“クラス名”
– 要素にクラス名をつける。同一文書の中で複
数の要素に対して同じ名前を繰り返して使え
る
Class . ID # span strong
<!-.sample3
#sample4
{color*blue}
{color:white;
background-color:#ff0099
}
-->
<span class=“sample3”>東京大学</span>
<strong class=“sample4”>入学</strong>
<span class=“sample3”>おめでとう</span>
東京大学入学おめでとう
span
インラインレベル（文字列に対する）範囲指定
div
ブロックレベル（段落、見出しなど）範囲指定
strong em より強い強調
span strong という指定されたタグの前でだけ
Class . ID #が有効
<!-span.sample1 {color*blue}
strong#sample2
{color:white;
background-color:#ff0099 }
-->
<span class=“sample1”>東京大学<strong id=“sample2”>入
学</strong>おめでとう</span>
東京大学入学おめでとう
span
インラインレベル（文字列に対する）範囲指定
div
ブロックレベル（段落、見出しなど）範囲指定
Aタグの属性を色分けする
• :link まだ見ていないリンク
• :visited 既に見たリンク
• :hover マウスが要素と重なり、まだactiveではな
いとき
• :active リンク部分を選択した瞬間
a:link
a:visited
{color: #0000ff}
{color: #00ee00}
文字装飾：text-decoration
•
•
•
•
•
text-decoration:none  装飾なし
text-decoration:overline  上線
text-decoration:underline:  下線
text-decoration:line-through  取り消し線
text-decoration:blink  点滅
表示形式の指定
• display:block  ブロック（行末まで範囲にな
る）で表示
• display:inline  文字列単位で表示
• display:list-itme
 項目のリストとして表示

<span class=“sample”>windows</span><span class = “sample>
unix</span>
windows
unix
配置する位置の指定
• <!—
.sample
{
position: static( or relative or absolute or fixed);
top: 200px;
left: 300px;
background-color:#ff9933
}
 static 配置方法指定なし
 relative 通常の配置位置からの相対位置指定
 absolute 親要素からの絶対位置 (親の例： <body>…)
 fixed 親要素からの絶対位置でスクロールしても移動せ
ず

Download Report