KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/8th/review のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/8th/review へ行く。
  • 1 (2007-02-24 (土) 07:05:44)
  • 2 (2007-02-24 (土) 07:10:26)

前回の復習

前回の内容

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

「クラス」や「ID」を設定することで、 ひとつの要素に複数のスタイルを用意したり、 複数の要素でひとつのスタイルを共有する方法を、紹介しました。

• クラスやIDを使った設定
• div・span要素を使った設定

また、ひとつのブロック要素について、 余白や揃え方の指定をする方法を紹介しました。

• 枠線関係をまとめた設定
• マージンの設定
• 内容のまわりの空間の設定
• 行揃えの設定

また、フォントの設定も紹介しました。

• フォントスタイルの設定
• フォントの太さの設定
• フォントサイズの設定
• フォントの指定
• フォント関係をまとめた設定
• リンク部分の設定

おさらい: クラスとID

「クラス」を使うと、 特定の要素やその他の要素に、 特定のスタイルを設定することができます。

たとえば、次のようなクラスの設定がある場合、

p.note {
  color: #ff0000;
  background: #ffeeee;
}
.example {
  color: #666666;
  background: #ffffff;
}
</pre>
HTML文書では、次のように利用することができます。
#pre(novervatim){{
<p class="note">
次のことに注意しましょう。<br>
...
</p>
<p class="example">
例: h1〜h6の使い方
...
</p>
</pre>


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

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

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



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

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



次へ進んで、
今回の内容を見てください。
----
#navi2(Lecture/InfoDesignB2005/8th,toc,next)