A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet below:

rel="alternate stylesheet" - HTML | MDN

rel="alternate stylesheet"

Limited availability

alternate stylesheet キーワードペアは、 <link> 要素の rel 属性の値として使用されると、ターゲットリソースが代替スタイルシートであることを示します。ウェブページに代替スタイルシートを指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。

メモ: この機能は、ブラウザーの拡張機能なしではあまり対応していません。ユーザーの既存の環境設定に合わせて別の表示を提供するには、 CSS のメディア特性である prefers-color-scheme および prefers-contrast を参照してください。

Firefox では、 title 属性の値を表示している[表示] > [ページスタイル]のサブメニューを使用して、ユーザーに代替スタイルシートを選択させることができます。それ以外のブラウザーでは、この機能を有効にするために拡張機能が必要です。また、ウェブページでユーザーがスタイルを切り替えることができるように、独自のユーザーインターフェイスを提供することもできます。

例 代替スタイルシートの指定

代替スタイルシートは、次のように <link> 要素に rel="alternate stylesheet" およびび title="…" 属性を使用することで指定されます。

<link href="reset.css" rel="stylesheet" />

<link href="default.css" rel="stylesheet" title="既定のスタイル" />
<link href="fancy.css" rel="alternate stylesheet" title="ファンシー" />
<link href="basic.css" rel="alternate stylesheet" title="基本" />

この例では、 Firefox の[ページスタイル]サブメニューに既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。

どのスタイルが選択されても、 reset.css のルールが常に適用されます。

やってみましょう

こちらから動作する例を試してみてください。

詳細

文書内のスタイルシートはどれも、以下のカテゴリーのうち一つに当てはまります。

スタイルシートメニューが存在し、 <link rel="stylesheet"> または <style> 要素の title 属性とともに参照された場合、そのタイトルがユーザーに与えられる選択肢のひとつとなります。同じ title でリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 title 属性を付けずにリンクされたスタイルシートは常に適用されます。

標準スタイルシートへリンクするには rel="stylesheet" を、代替スタイルシートへリンクするには rel="alternate stylesheet" を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。

仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4