div

T2V技術
Web製作ラボ
6
4/18, 2012
hayashiLabo
セレクタ、プロパティ、値
h3.ore1 {color:red;}
セレクタ
プロパティ
値
プロパティいくつか紹介
使えるプロパティはかなりたくさんある。
以下は一部。実際にやって見てみよう
color
font-size
font-style
font-family
text-align
line-height
letter-spacing
background-color
background-image
width
height
margin
padding
border
divタグとspanタグ
div
タグ →段落に対するタグ
<div style="color:red;">
ところで、ホイットニー・ヒューストンが女優復帰す
ることがわかったそうだ
</div>
span
タグ →文書の一部に対するタグ
ところで、 <span style="color:red; font-size:xx-large;">
ホイットニー・ヒューストン</span>が女優復帰すること
がわかったそうだ
スタイルシートの文法いくつか
１）タグに対する設定
・一つのタグに設定
h3 {color:red;}
・複数のタグに設定
h1, h2, h3 {font-size:50px;}
・タグの中のタグに設定
p strong {color:blue;}
２）クラスによる設定
・スタイルに名前をつける
h1.big {font-size:100px}
.big {font-size:100px}
３）IDによる設定
・クラスとほぼ同じだがページに一つだけ
#head {width:600px}
１）タグに対する設定
・既存の一つのタグに対して設定
h3 {color:red;}
・既存の複数のタグに対して同じスタイルを設定
h1, h2, h3 {font-size:50px;}
このようにカンマで並べる
・タグの中のタグにだけ設定する
p strong {color:blue;}
<p>タグに囲まれた<strong>タグにだけ作用する
<p>タグの外の<strong>には作用しない
２）クラスによる設定
スタイルに自分の好きな名前をつけて、その名前でスタイル設定でき
・既存のタグに対してクラスを定義
h3.ore1 {color:red;}
h3.ore2 {color:blue; font-size:50px;}
<h3 class="ore2">はじめに</h3>
これらはh3タグだけに定義されたスタイルです
・すべてのタグに対して作用するクラスを定義
.ore1 {color:red;}
.ore2 {color:blue; font-size:50px;}
<h1 class="ore2">つぎに</h1>
このクラスはどこでも使える
３）IDによる設定
クラスと機能的にはほとんど同じ。文書の中で一回だけ使うとき
・クラスのときのピリオドの代わりにシャープを使って記述する
だけで、あとはクラスと同じ
h3#kimi1 {color:red;}
#kimi3 {color:purple;font-size:120pt;}
<h1 id="kimi3">はじめに</h1>
このIDは、文書全体のレイアウトをするときなどによく使われる。
#container {width:600}
#header {width:600}
#content {width:600}
#footer {width:600}
というような感じ
次回予告
•
•
•
•
Webの仕組み（サーバーとクライアント）
レンタルサーバーにアクセスしてみる
FTP
サーバーのレンタルとドメイン取得の話
GWの課題を出します
次回（4/25）は来週です

Download Report