もくじ

スタイルシートの切替のための元データ

注意

bodyの内部だけを示しています。DOCTYPE宣言やheadタグ、bodyタグなどを書き加える必要があります。

このページは内容を書き換えてもかまいません。しかし「このページでは次のように見栄えが変化します」の記述に合わせて見栄えが変化するようになっていなければなりません。

見栄えの変化も追加、書き換えをして構いませんが、その場合はどのような変化をするかを書いてください。

元データ

ここにDOCTYPE宣言やheadタグ、bodyタグなどを書き加える必要があります。

<div class="header" id="top">
<p class="navbar"> <a href="index.html">総目次へ</a> </p>
<h1>スタイルシートの切替</h1>
</div>

<div class="main">
<h2>スタイルシートの切替の普及</h2>
<p>スタイルシートをユーザーが選択できるというのはまだ一般的ではありません。Windowsに附属しているために使用者の多いインターネットエクスプローラ(IE)がつい最近まで(多分ver7まで)対応していなかったというのも大きな理由ですが、ページ制作者にとって複数のスタイルを用意するのは負担であり、それほどメリットのある使い方を思いつかなかったということもあるでしょう。</p>
<p>IE ver8 ではこれに対応しましたので、これから使われていくかも知れません。</p>
<h2>学ぶ意義</h2>
<p>ここでスタイルシートの切替を学ぶのはhtmlの内容と見栄えの分離というページ制作の大きな流れをより強く意識してほしいからです。同じ内容を様々に表示できるということは様々な装置で同じデータを利用できるということです。</p>
<p>また、自分の見やすいスタイルを用意しておいて他人の作ったページでも自分の好みの見栄えで閲覧できるようにもなるでしょう。</p>
</div>
<div class="rule">
<h2>このページでは次のように見栄えが変化します</h2>
<dl>
<dt>共通<dt>
<dd>h1はborderで囲まれている<dd>
<dt>A<dt>
<dd>h2の背景色が緑色<dd>
<dt>B<dt>
<dd>h2の背景色が青色<dd>
<dt>C<dt>
<dd>h2の背景色が黄色<dd>
</dl>
</div>

<div class="footer">
<hr>
<address>
聖愛中学高等学校<br>
<a href="http://www.seiai.ed.jp/">http://www.seiai.ed.jp/</a>
</address>
</div>

ここにbody,htmlの終了タグを書き加える必要があります。


ウェブページ(Oct.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Oct.2009 初稿