*前回の復習 [#gea60fa9] **前回の内容 [#pb35c13a] 前回は、前々回にひきつづき、 CSS (Cascading Style Sheet)を使った、 Webページの表現を実習しました。 次のような設定を紹介し、Webページに設定しました。 「''クラス''」や「''ID''」を設定することで、 ひとつの要素に複数のスタイルを用意したり、 複数の要素でひとつのスタイルを共有する方法を、紹介しました。 -[[クラスやIDを使った設定>Lecture/InfoDesignB2005/7th/class_id]] -[[div・span要素を使った設定>Lecture/InfoDesignB2005/7th/div_span]] また、ひとつのブロック要素について、 余白や揃え方の指定をする方法を紹介しました。 -[[枠線関係をまとめた設定>Lecture/InfoDesignB2005/7th/border]] -[[マージンの設定>Lecture/InfoDesignB2005/7th/margin]] -[[内容のまわりの空間の設定>Lecture/InfoDesignB2005/7th/padding]] -[[行揃えの設定>Lecture/InfoDesignB2005/7th/align]] また、フォントの設定も紹介しました。 -[[フォントスタイルの設定>Lecture/InfoDesignB2005/7th/font_style]] -[[フォントの太さの設定>Lecture/InfoDesignB2005/7th/font_width]] -[[フォントサイズの設定>Lecture/InfoDesignB2005/7th/font_size]] -[[フォントの指定>Lecture/InfoDesignB2005/7th/font_type]] -[[フォント関係をまとめた設定>Lecture/InfoDesignB2005/7th/font]] -[[リンク部分の設定>Lecture/InfoDesignB2005/7th/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):"> 1番目の注意は次のとおりです。<br> ... </p> </pre> }} ただし、 クラスはひとつのHTML文書の中で何箇所でも指定できますが、 COLOR(red):''ひとつのIDは1ヶ所にしか使えません''。 注意してください。 **今回の内容 [#s67f51b5] 「クラス」や「ID」と''div''要素を併用することで、 複数の要素をひとつの「ブロック」としてまとめることができます。 このようなブロックや画像イメージを、 CSSを使って''レイアウト''する方法を紹介します。 また、 ブロックでの背景イメージの利用なども、 あわせて紹介します。 &br; &navi2(Lecture/InfoDesignB2005/8th,next);進んで、 今回の内容を見てください。 ---- #navi2(Lecture/InfoDesignB2005/8th,toc,next) }} |