CSS とは何ですか? CSS はどこで使用されますか?

Web サイトは、画像、テキスト、さまざまなドキュメントなど、多数の個々の要素で構成されています。これらのドキュメントには、PDF ファイルなどのさまざまなページからリンクされる可能性のあるドキュメントだけでなく、ページ自体を構成するために使用されるドキュメントも含まれます。HTML ドキュメントページの構造を決定するためのドキュメントと、ページの外観を決定するための CSS (Cascading Style Sheet) ドキュメント。この記事では、CSS について詳しく説明し、現在の Web サイトで CSS が使用されている場所について説明します。

CSS の歴史の教訓

CSS は、Web 開発者が作成する Web ページの外観を定義する方法として、1997 年に初めて開発されました。これは、Web プロフェッショナルが 内容を分ける 視覚的なデザインからウェブサイトのコードの構造を作成することは、これまで不可能でした。

構造とスタイルを分離することで、HTML は元の機能 (コンテンツのマークアップ) をより多く実行できるようになり、ページ自体のデザインやレイアウト (一般に「ルック アンド フィール」として知られるもの) を気にする必要がなくなります。ページの。

CSSの進化

CSS は、Web ブラウザーがこのマークアップ言語の基本的なフォントと色の側面以上のものを使用し始める 2000 年頃まで人気を博しませんでした。今日、最新のブラウザはすべて、CSS レベル 1 のすべて、CSS レベル 2 のほとんど、さらには CSS レベル 3 のほとんどの側面をサポートしています。CSS が進化し続け、新しいスタイルが導入されるにつれて、Web ブラウザは新しい CSS サポートをもたらすモジュールを実装し始めていますこれらのブラウザーに組み込み、Web デザイナーが使用できる強力な新しいスタイリング ツールを提供します。

(何年も)過去に、CSS の使用を拒否した厳選された Web デザイナーがいました。 ウェブサイトのデザインと開発、 しかし、その慣行は今日の業界からほとんどなくなっています。 CSS は現在、Web デザインで広く使用されている標準であり、今日の業界で働いている人で、少なくともこの言語の基本を理解していない人を見つけるのは難しいでしょう.

CSSは略語です

すでに述べたように、CSS という用語は「Cascading Style Sheet」の略です。これらの文書が何をするのかをより完全に説明するために、このフレーズを少し分解してみましょう。

「スタイルシート」という言葉はドキュメント自体を指します (HTML と同様に、CSS ファイルは実際には、さまざまなプログラムで編集できる単なるテキスト ドキュメントです)。スタイル シートは、ドキュメントのデザインに長年使用されてきました。これらは、印刷物であれオンラインであれ、レイアウトの技術仕様です。印刷デザイナーは長い間スタイル シートを使用して、デザインが仕様どおりに正確に印刷されるようにしてきました。 Web ページのスタイル シートも同じ目的を果たしますが、表示されているドキュメントをレンダリングする方法を Web ブラウザーに伝える機能が追加されています。今日では、CSS スタイル シートも使用できます。 メディアクエリ ページの検索方法を変更するには さまざまなデバイスと画面サイズ .アクセスに使用されている画面に応じて、単一の HTML ドキュメントを異なる方法でレンダリングできるため、これは非常に重要です。

カスケード 「カスケーディング スタイル シート」という用語の本当に特別な部分です。 Web スタイル シート 滝の上の川のように、そのシート内の一連のスタイルをカスケードすることを意図しています。川の水は滝のすべての岩にぶつかりますが、水が流れる正確な場所に影響を与えるのは底の岩だけです。 Web サイトのスタイル シートのカスケードについても同じことが言えます。

デザイナーのスタイル シートはブラウザーの既定のスタイル シートをオーバーライドします。

Web デザイナーがスタイルを適用しなくても、すべての Web ページは少なくとも 1 つのスタイル シートの影響を受けます。このスタイルシートは ユーザー エージェント スタイル シート — 他の指示が提供されていない場合に Web ブラウザがページを表示するために使用するデフォルト スタイルとも呼ばれます。たとえば、既定では、ハイパーリンクは青でスタイル設定され、下線が引かれています。これらのスタイルは、Web ブラウザーの既定のスタイル シートから取得されます。ただし、Web デザイナーが他の指示を提供する場合、ブラウザはどの指示が優先されるかを知る必要があります。すべてのブラウザーには独自の既定のスタイルがありますが、それらの既定のスタイルの多く (青い下線付きのテキスト リンクなど) は、すべてまたはほとんどの主要なブラウザーとバージョンで共有されています。

ブラウザーのデフォルトの別の例として、私たちの Web ブラウザーでは、デフォルトのフォントは ' タイムズ ニュー ローマン ' サイズ 16 で表示されます。ただし、このフォント ファミリとサイズで表示されるページはほとんどありません。これは、デザイナー自身が設定した 2 番目のスタイル シートが再定義することをカスケードが定義しているためです。 フォントサイズ およびファミリであり、Web ブラウザのデフォルトを上書きします。 Web ページ用に作成したスタイル シートは、ブラウザのデフォルト スタイルよりも具体性が高いため、これらのデフォルトは、スタイルシートがオーバーライドしない場合にのみ適用されます。リンクを青色で下線付きにしたい場合は、それがデフォルトであるため何もする必要はありませんが、サイトの CSS ファイルでリンクを緑色にする必要があると指定されている場合、その色がデフォルトの青色を上書きします。特に指定していないため、この例では下線が残ります。

CSS はどこで使用されますか?

CSS を使用して、Web ページ以外のメディアで表示したときに Web ページがどのように表示されるかを定義することもできます。 ウェブブラウザ .たとえば、Web ページの印刷方法を定義する印刷スタイル シートを作成できます。ナビゲーション ボタンや Web フォームなどの Web ページ アイテムは、印刷されたページでは意味がないため、印刷スタイル シートを使用して、ページの印刷時にこれらの領域を「非表示」にすることができます。多くのサイトではあまり一般的ではありませんが、印刷スタイル シートを作成するオプションは強力で魅力的です (私たちの経験では、ほとんどの Web 専門家はこれを行いません。これは、サイトの予算の範囲からこの追加作業を行う必要がないという理由だけです)。 ）。

CSS が重要な理由

CSS は、Web デザイナーが習得できる最も強力なツールの 1 つです。CSS を使用すると、Web サイトの視覚的な外観全体に影響を与えることができるからです。適切に記述されたスタイル シートはすばやく更新でき、サイトは画面上で視覚的に優先されるものを変更できます。これにより、基になる部分を変更する必要なく、訪問者に価値と注目を示すことができます。 HTML マークアップ .

CSS の主な課題は、学ぶべきことがかなりあるということです。ブラウザーは日々変化しているため、新しいスタイルがサポートされるようになり、何らかの理由で他のスタイルが廃止されたり支持されなくなったりするため、今日うまく機能しているものは明日には意味をなさない可能性があります。 .

CSS 学習曲線はそれだけの価値がある

CSS はカスケードおよび結合が可能であり、さまざまなブラウザーがどのようにディレクティブを異なる方法で解釈および実装できるかを考慮すると、CSS はプレーンな HTML よりも習得が難しい場合があります。 CSS は、HTML が実際には変更しない方法で、ブラウザーでも変更されます。ただし、CSS を使い始めると、スタイル シートの機能を活用することで、Web ページのレイアウト方法やルック アンド フィールの定義方法が驚くほど柔軟になることがわかります。その過程で、過去にうまくいったスタイルやアプローチの「一袋のトリック」を蓄積し、それらを次の段階で再び利用することができます。 新しい Web ページを作成する 将来。