CSSとは何ですか？

公開: 2019-03-08

最終更新日：2020年4月22日

Cascading Style Sheets for the web World Wide Web（www）では、CSSはCascadingStyleSheetsの頭字語です。 CSSは、マークアップ言語（通常はHTML）で記述されたドキュメントの表示を記述するために使用されるスタイルシート言語です。 CSSは、Webページのレイアウトとコンテンツを画面、紙、またはその他のメディアに表示する方法を規定します。 CSSは、複数のWebページのレイアウトを一度に制御するため、多くの作業を節約できます。

ドキュメントは通常、HTMLなどのマークアップ言語を使用して構造化されたテキストファイルです。 ドキュメントを提示するということは、Chrome、Firefox、Opera、MicrosoftEdgeなどのWebブラウザを介してコンピュータ画面に視覚的に提示される使用可能な形式にドキュメントを変換することを意味します。 Webブラウザーは、CSSルールをドキュメントに適用して、それらの表示方法に影響を与えます。

このブログは、カスケードスタイルシート（CSS）の一般的な紹介であり、それらが何であるか、およびWeb上で何に使用されるかを定義しています。 これは、CSSの素晴らしくて興味深い世界に深く入り込むことなく、それに関する基本的な質問に答える紹介です。

それか！ 同社は、世界中の代理店に魅力的で効果的なWebデザインサービスを提供しています。 ホワイトラベルWebデザインサービスの詳細と、お客様とお客様のクライアントがWebプレゼンスを作成または改善するのをどのように支援できるかをご覧ください。 今日から始めましょう！

CSSは1994年に開始されました。これは、W3Cによって作成および保守されています。 W3CのCSSワーキンググループは、仕様と呼ばれるドキュメントを作成します。 仕様がW3Cメンバーによって議論され、正式に承認された後、それらは推奨事項になります。

カスケードスタイルシートレベル1（CSS1）は、1996年12月に勧告としてW3Cから出ました。CSS2は1998年5月にW3C勧告になりました。1998年に開始されたCSSレベル3はまだ開発中です。 CSS3は、CSS2仕様とモジュールと呼ばれる新しい仕様を組み合わせたものです。 CSS仕様は、HTMLコンテンツの表示方法を更新するために設定された値を持つ一連のプロパティから形成されます。

CSSは、マークアップ言語ドキュメントを提示するプロセスを簡素化するようになりました。 次のようなさまざまなプロパティを制御できます。

  • テキストの色、
  • フォントのスタイル、
  • 段落間の間隔、
  • 列のサイズとレイアウト方法、
  • 背景画像や色、
  • レイアウトデザイン、
  • 画面サイズに応じた表示のバリエーション（メディアクエリ）。

CSSをどのように適用しますか？

Cascading Style Sheets for the web HTMLドキュメントにスタイルを適用する方法は4つあります。 最も一般的に使用されるメソッドは、HTMLドキュメント内の<style>要素に埋め込まれている外部CSSファイルです。 異なるシートスタイルが指定されている場合、スタイルは次の優先度で新しいスタイルにカスケードされます（数値が大きいほど重要性は低くなります）。

優先度4：ブラウザのデフォルト

ブラウザには、私たちのために事前に作成されたいくつかのスタイルが含まれています。 これらのプリロードされたスタイルが必要ない場合があるため、オーバーライドできます。 最新のCSS仕様をサポートしていない、またはCSSプロパティを使用する独自の形式を持っているブラウザがいくつかあります。 このため、CSSをHTMLドキュメントに書き込む際には注意が必要です。

That! Company White Label Services

優先度3：外部スタイルシートファイル

<link>要素を使用して、HTMLドキュメントに外部スタイルシートファイルを含めることができます。 外部スタイルシートは、拡張子が「.css」の別のテキストファイルです。 このテキストファイル内ですべてのスタイルルールを定義してから、<link>要素を使用して<head>…</head>タグ内の任意のHTMLドキュメントにこのファイルを含めます。

 <link rel = "stylesheet" type = "text / css" href = "style.css" />

優先度2：HTMLドキュメントに埋め込まれている

<style>要素を使用してCSSルールをHTMLドキュメントに配置し、ルールを含めることができます。 <style>…</style>タグは<head>…</head>タグ内に配置されます。

 <スタイル>
 セレクター{
 プロパティ：値;
 }
 </ style>

優先度1：HTML要素のインライン

任意のHTML要素のstyle属性を使用して、スタイルルールを定義できます。 これらのルールは、その要素にのみ適用されます。

 <p> Hello World！</ p>

CSSルールのオーバーライド

HTMLドキュメントにスタイルシートルールを適用する4つの方法について説明しました。 スタイルシートルールを上書きするルールは次のとおりです。

インラインスタイルシートはすべて最優先されます。 したがって、<style>…</style>タグで定義されたルールまたは外部スタイルシートファイルで定義されたルールを上書きします。

<style>…</style>タグで定義されたルールは、外部スタイルシートファイルで定義されたルールを上書きします。

外部スタイルシートファイルで定義されたルールは最も優先度が低く、このファイルで定義されたルールは、上記の2つのルールが適用されない場合にのみ適用されます。

CSSセレクター

CSSルールはブラウザによって解釈され、HTMLドキュメント内の対応する要素に適用されます。 スタイルルールは、次の3つの部分で構成されます。

  • セレクター-要素名、ID、クラス、属性などに基づいてHTML要素を「検索」（または選択）するために使用されます。
  • プロパティ-はCSSのスタイルの一種です。 色、境界線、背景、フォント、表示、テキストの配置、余白、行間隔などがあります。
  • 値-プロパティに割り当てられます。 たとえば、background-colorプロパティの値はredまたはgreenのいずれかです。

CSSルール構文

CSSルールの構文は、セレクターとプロパティおよび値の宣言で構成されます。

 セレクター{プロパティ：値; }

セレクターは、スタイルを設定するHTML要素を指します。

宣言ブロック（中括弧内）には、セミコロンで区切られた1つ以上の宣言が含まれます。

各宣言には、コロンで区切られたCSSプロパティ名と値が含まれています。

CSSルールを記述してから、同じルールを複数のHTML要素やドキュメントで再利用できます。 CSSを使用すると、スタイル設定された要素にのみ適用されるHTMLインラインタグ属性を毎回記述する必要はありません。 1つのCSSルールを記述し、それをそのタグ要素のすべてのオカレンスに適用するだけです。 したがって、コードが少ないほどページが速くなります。

外部または埋め込みスタイルのルールを使用すると、HTMLドキュメントの変更と保守が簡単になります。 スタイルルールを変更するだけで、HTMLドキュメントのすべての要素が自動的に更新されます。 CSSを使用すると、メディアクエリを介して複数のデバイス画面サイズにアクセスできます。 メディアクエリを使用すると、HTMLドキュメントを複数の種類のデバイス用に最適化できます。 同じHTMLドキュメントを使用して、さまざまなバージョンのWebページを表示できます。

続きを読む

繰り返しになりますが、この投稿は、CSS、およびHTMLドキュメントを制御するために利用できるさまざまなことについて学ぶことへの読者の興味をほとんど開きません。 これは非常に強力で、Webの非常に重要な部分です。 あなたがそれをより深く掘り下げることができるいくつかの主なリソースは次のとおりです：

W3Cスクール

MDN

CSSチュートリアル