Home > P.106

P.106

Last Modified: 2008年11月24日 16:49

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。（ ZIP アーカイブには解説文は含まれていません。）

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        3 章
        
        P.106
前： P.099
次： P.108

解説 (1)

XHTML 文書に組み込む場合、文書の冒頭で記述するようにしましょう。位置としては XML 宣言の直後あるいは DOCTYPE 宣言の直後のどちらかになります（次ページのコラム「 xml-stylesheet 処理命令を挿入する位置」を参照してください）。

XHTML(1)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="fixed.css" type="text/css" media="screen" charset="UTF-8"?>
<?xml-stylesheet href="basic.css" type="text/css" title="優先スタイル" media="screen, tv" charset="UTF-8"?>
<?xml-stylesheet href="alternate01-basic.css" type="text/css" title="代替スタイル01" media="screen" charset="UTF-8" alternate="yes"?>
<?xml-stylesheet href="alternate01-blue.css" type="text/css" title="代替スタイル01" media="screen" charset="UTF-8" alternate="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Download(1)

3-3-10-1.html

解説 (2)

なお、 HTML 文書におけるスタイルシートの関連付けは link 要素による指定（＝外部スタイルシート）だけでなく style 要素による指定（＝内部スタイルシート）もありました。これを、 XML としてパースされることを期待する XHTML 文書における関連付けを行う場合は、 style 要素に id を指定し、次のような記述を行います。

XHTML(2)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>内部スタイルシートの例</title>
    <style type="text/css" id="internalStyle">
    em {
      color: red;
      font-weight: bold;
    }
    </style>
  </head>
  <body>
  <p>この部分のテキストは<em>内部スタイルシートによって</em>スタイルを指定しています。</p>
  </body>
</html>