初心者でもわかるスタイルシート書き方入門(3ページ目)CSS(スタイルシート)とは何なのかをわかりやすく解説。いった基本的な疑問を解消して、セレクタやプロパティなどのCSS用語を簡単に解説。代表的なブラウザのCSSサポート状況の調べ方も紹介。文宏ホームページ作成ガイド各ブラウザのCSSサポート状況の調べ方CSS(スタイルシート)の文法で定義されているすべてのプロパティが、すべてのブラウザで表示できるわけではありません。ブラウザによって、サポートされているプロパティの量は異なります。サポートされていても部分的だったり、何らかのバグが含まれている場合もあります。比較的新しい仕様で追加されたプロパティを使いたい場合は、「そのプロパティがどれくらいのブラウザでサポートされているのか」を把握しておく必要があるでしょう。自力で各ブラウザのサポート状況を調べるのは手間がかかります。このサイトでは、使いたいプロパティ名などを入力すると、そのサポート状況を下図のように分かりやすいグラフで教えてくれます。上図は、mask-imageプロパティのサポート状況を表示したところです。緑色が完全にサポートされているバージョン、黄色は一部分だけサポートされているバージョン、赤色がまったくサポートされていないバージョンを表しています。上図の表示状態から、mask-imageプロパティは、IE・Edgeではまったく使用できない。Firefoxでは、Ver.54以降で完全に使える。Chromeでは、ベンダープレフィックスを付加すれば使える。いったサポート状況が分かります。All」というボタンを押せば、過去のバージョンも含めて全体のサポート状況を見ることもできます。これによって、「いつのバージョンからサポートされたのか」を調べられます。上図は、text-shadowプロパティのサポート状況を表示したところです。図の左側を見れば分かるとおり、代表的なすべてのブラウザの最新版でサポート済みです。All」ボタンを押すと、図の右側のように表示され、IE9以下ではサポートされていないこと、Safari3.2以下では一部のみのサポートであることなどが分かります。デザインの幅を広げたいなら、CSSソースも記述できるようになろうホームページ作成ソフトを使えば、CSSについて詳しく知らなくてもさまざまなデザインを作れます。CSSソースを読み解いたり自力で記述したりできれば、もっと自由に思い通りのデザインが作れるようになります。当ガイドサイト内でも、多数の装飾・レイアウト方法を紹介しています。3※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。