前回の復習前回の内容前回は、CSS (Cascading Style Sheet)を使った、 前回は、前々回にひきつづき、 CSS (Cascading Style Sheet)を使った、 Webページの表現を実習しました。 次のような設定を紹介し、Webページに設定しました。 まず、CSSの使い方について紹介しました。
おさらい: クラスとID「クラス」を使うと、 特定の要素やその他の要素に、 特定のスタイルを設定することができます。 たとえば、次のようなクラスの設定がある場合、#spanend #spanadd p.note { #spanend color: #ff0000; background: #ffeeee; #spanadd } #spanend #spanadd .example { #spanend color: #666666; background: #ffffff; #spanadd } #spanend #spanaddHTML文書では、次のように利用することができます。 #spanend #spanadd <p class="note"> #spanend #spanadd 次のことに注意しましょう。<br> #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanadd <p class="example"> #spanend #spanadd 例: h1〜h6の使い方 #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanaddまた、「ID」を使うと、 特定の要素に、 特定のスタイルを設定することができます。 たとえば、次のようなクラスの設定がある場合、 #spanend #spanadd #note1 { #spanend color: #ff0000; background: #ffeeee; #spanadd } #spanend #spanaddHTML文書では、次のように利用することができます。 #spanend #spanadd <p id="note1"> #spanend #spanadd 1番目の注意は次のとおりです。<br> #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanaddただし、 クラスはひとつのHTML文書の中で何箇所でも指定できますが、 ひとつのIDは1ヶ所にしか使えません。 注意してください。 今回の内容「クラス」や「ID」とdiv要素を併用することで、 複数の要素をひとつの「ブロック」としてまとめることができます。 このようなブロックや画像イメージを、 CSSを使ってレイアウトする方法を紹介します。 また、 ブロックでの背景イメージの利用なども、 あわせて紹介します。次へ進んで、 今回の内容を見てください。 }} |