ホームページ作成/CSS3とは

CSSとは? 初心者でもわかるスタイルシート書き方入門(3ページ目)

CSS(スタイルシート)とは何なのかをわかりやすく解説。CSSとHTMLの関係は? CSSソースの書き方は? CSSファイルの読み込み方は? CSS3やCSS4とは? レスポンシブWebデザインとは? CSSの基本的な構造は? といった基本的な疑問を解消して、セレクタやプロパティなどのCSS用語を簡単に解説。代表的なブラウザのCSSサポート状況の調べ方も紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

各ブラウザのCSSサポート状況の調べ方

CSS(スタイルシート)の文法で定義されているすべてのプロパティが、すべてのブラウザで表示できるわけではありません。ブラウザによって、サポートされているプロパティの量は異なります。また、サポートされていても部分的だったり、何らかのバグが含まれている場合もあります。

比較的新しい仕様で追加されたプロパティを使いたい場合は、「そのプロパティがどれくらいのブラウザでサポートされているのか」を把握しておく必要があるでしょう。しかし、自力で各ブラウザのサポート状況を調べるのは手間がかかります。そのような場合に便利なウェブサイトが、Can I useです。このサイトでは、使いたいプロパティ名などを入力すると、そのサポート状況を下図のように分かりやすいグラフで教えてくれます。

mask-imageプロパティのサポート状況

mask-imageプロパティのサポート状況


上図は、mask-imageプロパティのサポート状況を表示したところです。緑色が完全にサポートされているバージョン、黄色は一部分だけサポートされているバージョン、赤色がまったくサポートされていないバージョンを表しています。上図の表示状態から、mask-imageプロパティは、
  • IE・Edgeではまったく使用できない。
  • Firefoxでは、Ver.54以降で完全に使える。
  • Chromeでは、ベンダープレフィックスを付加すれば使える。
といったサポート状況が分かります。

また、「Showing All」というボタンを押せば、過去のバージョンも含めて全体のサポート状況を見ることもできます。これによって、「いつのバージョンからサポートされたのか」を調べられます。

text-shadowプロパティのサポート状況

text-shadowプロパティのサポート状況


上図は、text-shadowプロパティのサポート状況を表示したところです。図の左側を見れば分かるとおり、代表的なすべてのブラウザの最新版でサポート済みです。ここで「Showing All」ボタンを押すと、図の右側のように表示され、IE9以下ではサポートされていないこと、Safari3.2以下では一部のみのサポートであることなどが分かります。


デザインの幅を広げたいなら、CSSソースも記述できるようになろう

ホームページ作成ソフトを使えば、CSSについて詳しく知らなくてもさまざまなデザインを作れます。しかし、CSSソースを読み解いたり自力で記述したりできれば、もっと自由に思い通りのデザインが作れるようになります。

当ガイドサイト内でも、多数の装飾・レイアウト方法を紹介しています。ぜひ、CSSソースを直接編集できる環境を整えて、さまざまなテクニックを試してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます