【HTML Living Standard】alternate stylesheet属性値の使い方
alternate stylesheet属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
alternate stylesheet定数は、HTMLドキュメント内で代替スタイルシートを表す定数です。この定数は、<link>要素のrel属性に指定される値の一つとして使用されます。この指定により、ウェブブラウザに対し、リンクされたスタイルシートがユーザーが選択可能な追加のデザインオプションであることを伝えます。
通常のスタイルシート（rel="stylesheet"と指定されたもの）は、ページが読み込まれた際に自動的に適用されますが、alternate stylesheetと指定されたスタイルシートは自動では適用されません。代わりに、ブラウザはこれを代替スタイルシートとして認識し、ユーザーがウェブページの表示スタイルを切り替えるための選択肢として提供します。例えば、ブラウザのメニューや設定を通じて、ユーザーが手動で異なるデザインテーマを選択できるようにする場合に利用されます。
この定数を使用する際は、通常、<link rel="alternate stylesheet" href="styles/dark-theme.css" title="ダークテーマ">のようにtitle属性と組み合わせて使用します。title属性の値は、ユーザーインターフェース上でその代替スタイルシートの名前として表示され、ユーザーがスタイルシートを選択する際の目印となります。
alternate stylesheetは、ウェブサイトに複数のデザインテーマや印刷用スタイル、アクセシビリティ対応スタイルなどを提供し、ユーザーが自身の好みや必要に応じて表示をカスタマイズできるようにすることで、ウェブサイトのユーザビリティと柔軟性を向上させる重要な手段です。システムエンジニアとして、ユーザー体験を豊かにするためのWebデザインの選択肢を理解し、適切に実装することが求められます。
構文(syntax)
1<link rel="alternate stylesheet" href="path/to/alternate-style.css" title="Style Name">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
代替スタイルシートを適用する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>代替スタイルシートの例</title> 7 8 <!-- 9 この<link>要素は、ページのデフォルトのスタイルシートを定義します。 10 ユーザーが代替スタイルシートを選択しない限り、これが適用されます。 11 --> 12 <link rel="stylesheet" href="default-style.css"> 13 <!-- 14 [default-style.css の内容例] 15 body { 16 font-family: Arial, sans-serif; 17 margin: 20px; 18 background-color: #f0f0f0; 19 color: #333; 20 } 21 h1 { 22 color: #0056b3; 23 } 24 --> 25 26 <!-- 27 この<link>要素は、ユーザーが選択可能な代替スタイルシートを定義します。 28 'rel="alternate stylesheet"' と 'title' 属性が必須です。 29 'title' 属性の値がブラウザのスタイル選択メニューに表示されます。 30 --> 31 <link rel="alternate stylesheet" href="dark-theme.css" title="ダークテーマ"> 32 <!-- 33 [dark-theme.css の内容例] 34 body { 35 background-color: #222; 36 color: #eee; 37 } 38 h1 { 39 color: #99ccff; 40 } 41 --> 42 43 <!-- 44 もう一つの代替スタイルシートの例です。 45 複数の代替スタイルシートを定義できます。 46 --> 47 <link rel="alternate stylesheet" href="large-font.css" title="大きな文字"> 48 <!-- 49 [large-font.css の内容例] 50 body { 51 font-size: 1.2em; 52 } 53 h1 { 54 font-size: 2.5em; 55 } 56 --> 57 58</head> 59<body> 60 <h1>代替スタイルシートの例</h1> 61 <p>このページはデフォルトのスタイルで表示されています。</p> 62 <p>ウェブブラウザのメニュー（例: Firefoxの「表示」>「スタイルシート」）から、 63 「ダークテーマ」や「大きな文字」などの代替スタイルを選択してみてください。</p> 64 <p>これにより、ページの見た目が切り替わります。</p> 65</body> 66</html>
HTMLにおけるalternate stylesheetは、ウェブページにユーザーが選択できる複数のスタイルシート（CSSファイル）を提供する仕組みです。これは<link>要素のrel属性に指定する値の一つで、ウェブページの見た目を変更するための「代替スタイルシート」であることを示します。
このサンプルコードでは、まずrel="stylesheet"で指定されたdefault-style.cssがページの標準的な見た目を定義しています。その次に、rel="alternate stylesheet"とtitle属性が組み合わせて使われた<link>要素が複数登場します。例えば、dark-theme.cssは「ダークテーマ」という名前で、large-font.cssは「大きな文字」という名前で、それぞれ代替スタイルシートとして定義されています。
title属性に指定された値は、ウェブブラウザのメニュー（例えば、Firefoxの「表示」>「スタイルシート」など）に表示され、ユーザーがそこから好みのスタイルを選択することで、ページの見た目を動的に切り替えることが可能になります。このように、一つのHTMLファイルで複数のデザインオプションを提供できるのが、代替スタイルシートの主な利点です。
alternate stylesheetは<link>要素のrel属性の値として機能するため、直接的な引数や戻り値は持ちません。これは、単にスタイルシートの種類を識別するためのキーワードとして扱われます。ウェブアクセシビリティの向上や、ユーザーの好みに合わせた表示の提供に役立ちます。
alternate stylesheetは、ユーザーがページの見た目を切り替えられる代替スタイルシートを指定する際に使用します。最も重要な点は、rel="alternate stylesheet"を使う場合、必ずtitle属性を指定する必要があることです。このtitleの値が、ウェブブラウザのメニューでユーザーに提示されるスタイルシート名となります。rel="stylesheet"のみでtitle属性がないスタイルシートは、ユーザーが代替スタイルシートを選択しない限り適用される、ページのデフォルトスタイルです。
現代のウェブ開発では、JavaScriptを用いて同様のテーマ切り替え機能を実現することが一般的ですが、HTMLの標準機能として理解しておくことは重要です。この機能は、一部のブラウザ（例えばFirefox）でのみ、ユーザーインターフェースから選択できる機能が提供されています。ブラウザによるサポート状況を考慮し、利用を検討してください。
HTML代替スタイルシートの仕組みを理解する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Alternate Stylesheet Example</title> 7 8 <!-- デフォルトのスタイルシート --> 9 <!-- rel="stylesheet" を持つスタイルシートは、ページがロードされたときにデフォルトで適用されます。 --> 10 <!-- title 属性は、ブラウザや拡張機能が代替スタイルシートを識別するために使用します。 --> 11 <link rel="stylesheet" href="data:text/css;charset=utf-8,body{font-family:Arial,sans-serif;margin:20px;background-color:#f0f0f0;color:#333;}h1{color:#0056b3;}p{line-height:1.6;}" title="Default Style"> 12 13 <!-- 代替スタイルシート1 (ダークモード) --> 14 <!-- rel="alternate stylesheet" を持つスタイルシートは、ユーザーが選択した場合に適用されます。 --> 15 <link rel="alternate stylesheet" href="data:text/css;charset=utf-8,body{background-color:#333;color:#f0f0f0;}h1{color:#ADD8E6;}" title="Dark Mode"> 16 17 <!-- 代替スタイルシート2 (ライトモード) --> 18 <link rel="alternate stylesheet" href="data:text/css;charset=utf-8,body{background-color:#fff;color:#222;}h1{color:#FFA500;}" title="Light Mode"> 19</head> 20<body> 21 <h1>代替スタイルシートのサンプル</h1> 22 <p> 23 このページは、`link`タグの`rel="alternate stylesheet"`属性を使って、複数のスタイルシートを定義しています。<br> 24 ブラウザの機能や拡張機能を使って、表示スタイルを切り替えることができます。 25 </p> 26 <p> 27 <strong>注:</strong> Google Chromeブラウザには、標準で代替スタイルシートを切り替えるためのUIがありません。 28 これらのスタイルを実際に切り替えるには、ブラウザの拡張機能を使用するか、JavaScriptで動的にスタイルシートを有効/無効にする必要があります。 29 </p> 30 <p> 31 このコードは、単体で動作するように、`link`タグの`href`属性に`data:`URLスキームを使用してCSSの内容を直接埋め込んでいます。 32 本来は、`href`属性で指定された別々の`.css`ファイルにスタイルが記述されます。 33 </p> 34</body> 35</html>
HTMLのrel="alternate stylesheet"属性は、ウェブページに複数の異なるスタイルシート（見た目の設定）を用意し、ユーザーがそれらを切り替えられるように定義するために使用されます。これは<link>タグのrel属性の値として指定されます。
通常、rel="stylesheet"と指定されたスタイルシートは、ページが読み込まれた際にデフォルトで適用されます。一方、rel="alternate stylesheet"と指定されたスタイルシートは、ユーザーが明示的に選択した場合にのみ適用されます。それぞれの代替スタイルシートには、title属性で識別名を与える必要があり、この名前がブラウザや拡張機能で表示される選択肢となります。
alternate stylesheetは<link>タグのrel属性に設定する値であり、それ自体に引数や戻り値といった概念は存在しません。
サンプルコードでは、デフォルトのスタイルに加え、「Dark Mode」や「Light Mode」といった代替スタイルシートが定義されています。ただし、Google Chromeのような一部のブラウザには、標準機能として代替スタイルシートを切り替えるためのユーザーインターフェースが提供されていません。これらのスタイルを実際に切り替えるには、ブラウザの拡張機能を利用するか、JavaScriptを用いて動的にスタイルシートを有効化・無効化する処理を実装する必要があります。
なお、サンプルコードではCSSの内容をdata:URLスキームで直接埋め込んでいますが、実際の開発では通常、href属性に別途用意された.cssファイルのパスを指定してスタイルを読み込みます。
代替スタイルシートは、ユーザーが選択した場合に適用されるスタイルシートです。title属性は必須であり、スタイルシートを識別するために使用されます。rel="stylesheet"がデフォルトで適用されるのに対し、rel="alternate stylesheet"はユーザーの選択が必要です。Google Chromeには標準で代替スタイルシートを切り替えるUIがないため、拡張機能の利用かJavaScriptでの動的な切り替えが必要となります。サンプルコードでCSSをdata:URLに直接埋め込んでいるのは、単体で動作させるための一時的な方法であり、通常は外部の.cssファイルを指定します。