5.1.4. スタイルシート

1. 概要

　スタイルシートは、HTMLやXMLなどのマークアップ言語で記述されたドキュメントの構造と表示形式を分離するための仕様です。この技術の主な目的は、ウェブページの内容とデザインを別々に管理することで、効率的な開発と保守を可能にすることです。

　スタイルシートの重要性は以下の点にあります：

コンテンツとデザインの分離による保守性の向上
一貫したデザインの適用が容易
デバイスやメディアに応じた柔軟な表示制御
ページ読み込み速度の向上

2. 詳細説明

　スタイルシートの主要な技術として、CSS（Cascading Style Sheets：段階スタイルシート）とXSL（Extensible Stylesheet Language：拡張可能なスタイルシート言語）があります。

2.1. CSS（Cascading Style Sheets）

　CSSは、HTMLやXMLで記述されたウェブページのレイアウトやデザインを制御するための言語です。主な特徴は以下の通りです：

セレクタ：要素を指定する方法
プロパティ：スタイルを定義する属性
値：プロパティに設定する具体的な値
カスケーディング：複数のスタイル定義の優先順位付け

　CSSの基本的な構文は以下の通りです：

セレクタ {
    プロパティ: 値;
}

2.2. XSL（Extensible Stylesheet Language）

　XSLは、XMLドキュメントの変換と表示を制御するための言語群です。主に以下の3つの部分から構成されています：

XSLT（XSL Transformations）：XMLドキュメントを他の形式に変換するための言語
XPath：XMLドキュメント内の要素や属性を指定するための言語
XSL-FO（XSL Formatting Objects）：XMLドキュメントの表示形式を定義するための言語

　XSLは、XMLデータの変換や複雑なレイアウトの制御に適しています。

3. 応用例

　スタイルシートは、ウェブ開発やドキュメント管理など、様々な分野で広く応用されています：

レスポンシブウェブデザイン：デバイスの画面サイズに応じてレイアウトを変更
ウェブアプリケーション：ユーザーインターフェースのデザインと動的な変更
印刷用スタイルシート：ウェブページを印刷に適した形式に変換
テーマ切り替え：ユーザー設定に応じて色やレイアウトを変更
データの可視化：XMLデータをグラフや図表として表示

4. 例題

　以下に、スタイルシートに関する練習問題とその回答例を示します。

例題1

　次のHTMLに対して、段落（<p>要素）のテキストを赤色にし、フォントサイズを16ピクセルにするCSSを記述してください。

<body>
    <p>これは段落です。</p>
</body>

回答例1:

p {
    color: red;
    font-size: 16px;
}

例題2

　XSLTを使用して、以下のXMLデータをHTML表に変換するスタイルシートを記述してください。

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book>
        <title>XML入門</title>
        <author>山田太郎</author>
    </book>
    <book>
        <title>XSLT実践ガイド</title>
        <author>鈴木花子</author>
    </book>
</books>

回答例2:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <table border="1">
                    <tr>
                        <th>タイトル</th>
                        <th>著者</th>
                    </tr>
                    <xsl:for-each select="books/book">
                        <tr>
                            <td><xsl:value-of select="title"/></td>
                            <td><xsl:value-of select="author"/></td>
                        </tr>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

5. まとめ

　スタイルシートは、マークアップ言語の構造と表示形式を分離するための重要な技術です。主にCSSとXSLがあり、それぞれウェブページのデザインやXMLデータの変換・表示に使用されます。この技術を理解し活用することで、効率的なウェブ開発やドキュメント管理が可能になります。応用情報技術者試験では、これらの概念と実際の適用方法について理解を深めることが重要です。