学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / CSSの基本 /  基本スタイルシートと代替スタイルシート

★CSSの基本

| 基本スタイルシートと代替スタイルシート

現在の主要なブラウザーからは姿を消しつつあります。

代替スタイルシート(rel="alternate stylesheet") を選択できるブラウザーの標準機能は、現在の主要なブラウザーからは姿を消しつつあります。 [1]
現在代替スタイルシートの切り替えに標準対応している主要なブラウザーは Firefoxのみ で、ChromeやEdge、Safariなどの他のブラウザーでは拡張機能などを用いない限り利用できません。

ブラウザーの対応状況(2026年6月現在)

  • Firefox:表示メニューの「ページスタイル」から選択できます。
  • Chrome / Edge / Safari:ブラウザーの標準機能としては削除、または非対応となっています。 [1, 2, 3]
【注意】以下の情報は2010年頃のブラウザーHTML4からHTML5へ移行する中でのブラウザが持っていた機能になります。

⬛︎ 閲覧者にスタイルシートの選択肢を提供する​

ウェブサイトの制作者は、複数のCSSファイルを用意することで、 閲覧者(ユーザー)に対してスタイルシートの選択肢を提供することができます。 ユーザーはスタイルシートの切り替え機能に対応したブラウザを使用することで、 自分の好みなどに応じて文書のスタイルを切り替えることが可能となります。

⬛︎ rel属性とtitle属性を指定

具体的には、複数のCSSファイルを作成した上で、<link>要素のrel属性の値にalternate stylesheet、 または、stylesheet alternateを指定して、同時にtitle属性でスタイル名を指定します。 title属性を指定しないとスタイルシートが固定されてユーザーによる切り替えができないので注意してください。

例:ユーザーに代替スタイルシートを提供する

<link rel="stylesheet" type="text/css" href="basic.css" title="標準">
<link rel="alternate stylesheet" type="text/css" href="alt1.css" title="代替1">
<link rel="alternate stylesheet" type="text/css" href="alt2.css" title="代替2">

⬛︎ 各ブラウザのスタイルシートの切り替え機能

Internet Explorer8以降、Firefox、Operaなどのブラウザには、スタイルシートを切り替える機能がサポートされています。 例えば、Internet Explorerではメニューの[表示]→[スタイル]のなかに適用可能なスタイルの候補が表示されます。
写真
2010年当時のInternet Explorer8以降ではスタイルシートを切り替える機能がサポートされていました。
Firefoxではメニューの[表示]→[スタイルシート]のなかに適用可能なスタイルの候補が表示されます。
写真
Firefoxではメニューの[表示]→[スFirefoxではタイルシートのなかに適用可能なスタイルの候補が表示されます。
Operaでは、メニューの[表示]→[スタイル]のなかに適用可能なスタイルシートが表示されます。
写真
Operaでは、メニューの[表示]→[スタイル]のなかに適用可能なスタイルシートが表示されます。
Internet Explorer7以下にはスタイルシートの切り替え機能はありませんでした。

記事一覧へ
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ