KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/9th/review の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2004/9th/review へ行く。

*前回の復習 [#gea60fa9]

**前回の内容 [#pb35c13a]
前回は、前々回にひきつづき、
CSS (Cascading Style Sheet)を使った、
Webページの表現を実習しました。
次のような設定を紹介し、Webページに設定しました。

「''クラス''」や「''ID''」を設定することで、
ひとつの要素に複数のスタイルを用意したり、
複数の要素でひとつのスタイルを共有する方法を、紹介しました。
-[[クラスやIDを使った設定>Lecture/InfoDesignB2004/8th/class_id]]
-[[div・span要素を使った設定>Lecture/InfoDesignB2004/8th/div_span]]

また、ひとつのブロック要素について、
余白や揃え方の指定をする方法を紹介しました。
-[[枠線関係をまとめた設定>Lecture/InfoDesignB2004/8th/border]]
-[[マージンの設定>Lecture/InfoDesignB2004/8th/margin]]
-[[内容のまわりの空間の設定>Lecture/InfoDesignB2004/8th/padding]]
-[[行揃えの設定>Lecture/InfoDesignB2004/8th/align]]

また、フォントの設定も紹介しました。
-[[フォントスタイルの設定>Lecture/InfoDesignB2004/8th/font_style]]
-[[フォントの太さの設定>Lecture/InfoDesignB2004/8th/font_width]]
-[[フォントサイズの設定>Lecture/InfoDesignB2004/8th/font_size]]
-[[フォントの指定>Lecture/InfoDesignB2004/8th/font_type]]
-[[フォント関係をまとめた設定>Lecture/InfoDesignB2004/8th/font]]
-[[リンク部分の設定>Lecture/InfoDesignB2004/8th/link]]


**おさらい: クラスとID [#j04d531e]
「''クラス''」を使うと、
特定の要素やその他の要素に、
特定のスタイルを設定することができます。

たとえば、次のようなクラスの設定がある場合、
#pre(novervatim){{
COLOR(blue):p.note COLOR(red):{
  color: #ff0000;
  background: #ffeeee;
COLOR(red):}
COLOR(blue):.example COLOR(red):{
  color: #666666;
  background: #ffffff;
COLOR(red):}
</pre>
}}
HTML文書では、次のように利用することができます。
#pre(novervatim){{
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):noteCOLOR(red):">
次のことに注意しましょう。<br>
...
</p>
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):exampleCOLOR(red):">
例: h1〜h6の使い方
...
</p>
</pre>
}}


また、「''ID''」を使うと、
特定の要素に、
特定のスタイルを設定することができます。

たとえば、次のようなクラスの設定がある場合、
#pre(novervatim){{
COLOR(blue):#note1 COLOR(red):{
  color: #ff0000;
  background: #ffeeee;
COLOR(red):}
</pre>
}}
HTML文書では、次のように利用することができます。
#pre(novervatim){{
COLOR(red):<COLOR(blue):p COLOR(red):id="COLOR(blue):note1COLOR(red):">
１番目の注意は次のとおりです。<br>
...
</p>
</pre>
}}

ただし、
クラスはひとつのHTML文書の中で何箇所でも指定できますが、
COLOR(red):''ひとつのIDは１ヶ所にしか使えません''。
注意してください。



**今回の内容 [#s67f51b5]
「クラス」や「ID」と''div''要素を併用することで、
複数の要素をひとつの「ブロック」としてまとめることができます。

このようなブロックや画像イメージを、
CSSを使って''レイアウト''する方法を紹介します。
また、
ブロックでの背景イメージの利用なども、
あわせて紹介します。

&br;
&navi2(Lecture/InfoDesignB2004/9th,next);進んで、
今回の内容を見てください。
----
#navi2(Lecture/InfoDesignB2004/9th,toc,next)

}}