スタイルシートの切替

スタイルシートの切り替え

1つのページに複数のスタイルシートを用意して閲覧者に選んでもらうようにすることができます。

例として、A,B,C の3つのスタイルシートを選択できるようにしてみます。

固定の部分はひとつだけのスタイルシートと同じです。title=の指定がついている部分が選択になります。rel=に"alternate stylesheet"と書いたものは後から選択するもの(代替)、"stylesheet"と書いてあるのは初期状態で選択してあるもの(優先)です。

(href, title, rel, type の順番は任意です)

固定 <link href="kihon.css" rel="stylesheet" type="text/css" />
優先 <link href="aaa.css" title="A" rel="stylesheet" type="text/css" />
代替 <link href="bbb.css" title="B" rel="alternate stylesheet" type="text/css" />
代替 <link href="ccc.css" title="C" rel="alternate stylesheet" type="text/css" />

選択の状態をまとめるとこのようになります。

  種類

状態  
固定スタイルシート
(kihon.css)
優先/代替スタイルシート

(aaa.css)

(bbb.css)

(ccc.css)
初期状態
または
Aを選択
Bを選択
Cを選択

firefoxでの切り替え

固定スタイルシート

この場合でも、共通に設定したいものがあるかも知れません。そのときは A,B,C に同じことを書くのは無駄なので、共通部分の指定を書いたファイルを別に作ります。これを固定スタイルシートといいます。(persistent style sheet)

優先スタイルシート

複数のスタイルのうちどれかを最初に適応させておき、後で他のものを選択できるようにできます。このスタイルシートを優先スタイルシートといいます。(preferred style sheet)

代替スタイルシート

選択するために用意しておくスタイルシートは代替スタイルシートと呼ばれます。(alternate style sheet)

title属性

切り替えるスタイルシートにはtitle属性で名前を付けておきます。この名前はグループとして扱われますから、複数のファイルに同じ名前を付けることもできます。

rel属性(relationship)

優先スタイルシートにはrel属性に"stylesheet"と指定します。これは固定スタイルシートも同じです。

代替スタイルシートにはrel属性に"alternate stylesheet"と指定します。

優先も代替も切り替えるものには、title属性をつけます。

課題 astyle.html

スタイルシートが A, B, C と3つありユーザーが切り替えられるページを作りなさい。

内容は、次のページ「スタイルシートの切替のための元データ」からコピーします。DOCTYPE宣言やheadタグ、bodyタグなどを書き加えて作ります。ファイル名は astyle.html

head部に上記の<link href="kihon.css" … などを書きます。

スタイルシートを kihon.css, aaa.css, bbb.css, ccc.css と作り、それぞれ保存します。

元データの文章に従い A, B, C の選択で次の様に変わるようにします。

共通
h1はborderで囲まれている
A
h2の背景色が緑色
B
h2の背景色が青色
C
h2の背景色が黄色

うまくいったら、さらにスタイルシートの指定を追加、書き換えをして構いませんが、その場合はどのような変化をするかをページ内に書いてください。

さらにページの内容も書き加えてもかまいません。

もちろん index.html からのリンクと、戻るリンクを作成します。目次のリンクは「スタイル切替」という文字列にすること。


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