カスケードスタイルシートとは何ですか？
ウェブサイトは、画像、テキスト、および様々な文書を含むいくつかの個別の部分で構成されています。 これらのドキュメントには、PDFファイルなどのさまざまなページからリンクされるドキュメントだけでなく、ページの構造やCSS（Cascading Style Sheet）ドキュメントを判断するHTMLドキュメントなど、ページ自体を構築するために使用されるドキュメントも含まれますページの見た目を決める。 この記事では、CSSの内容と現在のWebサイトで使用されている場所について説明します。
CSS履歴レッスン
CSSは、Web開発者が作成中のWebページの外観を定義する方法として、1997年に初めて開発されました。 ウェブの専門家が、ウェブサイトのコードのコンテンツと構造をビジュアルデザインから分離することを意図していました。これは、以前は不可能でした。
構造とスタイルを分離することで、HTMLは元々基になっていたより多くの機能を実行することができます。コンテンツのマークアップは、ページ自体のデザインやレイアウト、「ルックアンドフィール」ページの
CSSは、Webブラウザがこのマークアップ言語の基本的なフォントと色の面以上のものを使用し始めた2000年頃まで人気を得ていませんでした。 現在、すべての最新のブラウザはCSSレベル1、CSSレベル2のほとんど、CSSレベル3のほとんどの側面をサポートしています。 CSSが進化し続け、新しいスタイルが導入されるにつれ、Webブラウザは新しいCSSサポートをそれらのブラウザにもたらし、Webデザイナーに強力な新しいスタイルツールを提供するモジュールを実装し始めました。
過去（多くの）年に、ウェブサイトの設計と開発にCSSを使用することを拒否した一部のWebデザイナーがいましたが、その習慣は今日でも業界から去っています。 CSSは現在ウェブデザインで広く使用されている標準であり、今日この業界で働いている人のうち、少なくともこの言語の基本的な知識を持っていない人を見つけるのは難しいでしょう。
CSSは省略形です
すでに述べたように、CSSという用語は「カスケードスタイルシート」の略です。 これらの文書が何をするかをより完全に説明するために、このフレーズをちょっと解説しましょう。
「スタイルシート」という言葉は文書そのものを指します（HTMLのように、CSSファイルは実際には様々なプログラムで編集可能なテキスト文書です）。 スタイルシートは長年にわたって文書設計に使用されてきました。 これらは、印刷物であろうとオンラインであろうと、レイアウトの技術仕様です。 印刷デザイナーは、長い間スタイルシートを使用して、そのデザインがその仕様に正確に印刷されるようにしました。 Webページのスタイルシートは同じ目的を果たしますが、Webブラウザに表示されるドキュメントのレンダリング方法を伝える機能も追加されています。 今日、CSSスタイルシートは、 メディアクエリを使用して、ページが異なるデバイスや画面サイズを検索する方法を変更することもできます 。 これは、単一のHTML文書を、それにアクセスするために使用されている画面に従って異なる方法でレンダリングすることができるので、非常に重要です。
カスケードは、「カスケードスタイルシート」という言葉の本当に特別な部分です。 ウェブスタイルシートは、滝の上の川のような、そのシートの一連のスタイルをカスケードすることを意図しています。 川の水は滝の中のすべての岩を襲いますが、底のものだけが水が流れる場所に正確に影響します。 ウェブサイトスタイルシートのカスケードについても同様です。
Webデザイナーがスタイルを適用しなくても、すべてのWebページは少なくとも1つのスタイルシートの影響を受けます。 このスタイルシートは、ユーザーエージェントスタイルシートです。他の指示がない場合は、Webブラウザがページを表示するために使用する既定のスタイルとも呼ばれます。 たとえば、デフォルトでは、ハイパーリンクは青色で表示され、下線が引かれます。 これらのスタイルは、Webブラウザのデフォルトのスタイルシートに基づいています。 ただし、Webデザイナーが他の指示を提供している場合、ブラウザはどの指示が優先されているかを知る必要があります。 すべてのブラウザには独自のデフォルトスタイルがありますが、青い下線付きのテキストリンクのようなデフォルトの多くは、大部分のブラウザやバージョンで共有されています。
ブラウザのデフォルトの別の例として、私のウェブブラウザでは、デフォルトのフォントは " Times New Roman "です（サイズ16で表示されます）。 これは、カスケードでは、デザイナー自身が設定した2番目のスタイルシートが、 フォントサイズとファミリを再定義し 、Webブラウザのデフォルトを上書きすることを定義しているためです 。 Webページ用に作成したスタイルシートは、ブラウザのデフォルトスタイルよりも細かいので、スタイルシートがそれを上書きしない場合にのみデフォルトが適用されます。 リンクを青と下線で表示する場合は、デフォルトであるので何もする必要はありませんが、サイトのCSSファイルにリンクが緑色であると表示されている場合、その色はデフォルトの青より優先されます。 この例では、別の方法を指定していないので、下線が残ります。
CSSはどこにありますか？
CSSは、Webブラウザ以外のメディアでWebページを表示する方法を定義するためにも使用できます。 たとえば、Webページの印刷方法を定義する印刷スタイルシートを作成できます。 ナビゲーションボタンやウェブフォームのようなウェブページアイテムは印刷ページ上で目的を持たないため、プリントスタイルシートを使用して、ページが印刷されるときにそれらのエリアを「オフ」にすることができる。 多くのサイトでは一般的なプラクティスではありませんが、印刷スタイルシートを作成するオプションは強力で魅力的です（私の経験では、ほとんどのWeb専門家はサイトの予算範囲でこの追加作業を行う必要がないため、 ）。
CSSが重要な理由
CSSはWebデザイナーが学べる最も強力なツールの1つで、Webサイトの視覚的外観に影響を与えることができるためです。 よく書かれたスタイルシートは素早く更新でき、スクリーン上で視覚的に優先順位をつけられたものをサイトが変更できるようにします。これにより、基礎となるHTMLマークアップに変更を加えることなく、
CSSの主な課題は、学習するにはかなりの時間がかかることです。毎日変化するブラウザでは、新しいスタイルがサポートされたり、別のスタイルがサポートされたり、別の理由で賛成できなくなったりすると、今日はうまくいくでしょう。
CSSはカスケードして組み合わせることができるため、さまざまなブラウザがディレクティブをどのように解釈して実装するかを考慮すると、CSSをプレーンなHTMLよりも難しくすることができます。 CSSはブラウザでもHTMLが実際には変わらないように変更されています。 しかし、CSSを使い始めると、スタイルシートの力を利用すれば、Webページのレイアウト方法やルック・アンド・フィールをどのように定義するか信じられないほどの柔軟性が得られます。 途中で、あなたは過去にあなたのために働いていたスタイルやアプローチの "罠の袋"を集め、将来新しいWebページを構築するときに再び向けることができます。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：7/5/17、