CSS構文

CSSを使用してコードを記述する前に習得する必要がある最初のトピックは、構文です。単語syntax 恐ろしいように聞こえるかもしれませんが、それは単にコードを書き出すためにCSSで使用するルールを指します。これらのルールは標準であり、他の人のコードを簡単に読み取ることができます。

CSS構文の2つの最も重要な部分は、セレクターと宣言ブロックです。セレクターは、Webページでスタイルを適用する要素を指すために使用され、宣言ブロックは、選択した要素に適用するスタイルの概要を示します。

このチュートリアルでは、CSS構文の基本と、CSSスタイルの構造を例を挙げて説明します。 CSSでコメントを書く方法についても説明します。このチュートリアルを読み終えると、独自のCSSスタイルを作成するために必要な知識が得られます。

CSSスタイルルール

CSSでは、スタイルシートに、ユーザーの画面にWebサイトを表示する方法を決定する一連のルールが格納されています。たとえば、スタイルシートは、Webページ上のテキストの色や特定のヘッダーで使用されるフォントサイズの概要を示す場合があります。

これらのルールは、セレクターと宣言の2つの部分で構成される標準構造に従います。全体として、これはCSSでのスタイルルールの表示方法です。

h1 {
	color: blue;
}

この特定のスタイルは、すべての<h1>の色を設定します Webページ上の要素を青に変更します。それでは、このスタイルを2つのコンポーネント部分に分割して、どのように機能するかを分析できるようにします。

CSS宣言

CSSスタイルの最初の部分は宣言です。 Declaration Webページの要素に適用する特定のスタイルの別の単語です。

CSSスタイルルールには、少なくとも1つの宣言を含める必要があり、必要な数の宣言を含めることができます。したがって、Webページのボックスの幅と高さを100ピクセルに設定し、その背景色を青に設定する場合は、1つの宣言で行うことができます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

宣言は、次の2つの部分で構成されます。

• プロパティ。これらは、要素に適用する必要のあるスタイルプロパティです（つまり、色、背景色、幅、高さ）。
• 値。この部分は、プロパティの表示方法をブラウザに指示します（つまり、ボックスの色を「緑」または「赤」に設定できます）。

CSS宣言の構文は次のとおりです。

property: value;

CSSプロパティが最初に表示され、次にコロン（:)で区切られていることに注意してください。コロンの後に、定義したプロパティに割り当てたい値が表示されます。

各CSS宣言は、セミコロン（;）で終了する必要があります。

次に、2つのCSS宣言の例を示します。

color: blue;
font-size: 16px;

最初の宣言は、HTML要素のフォントの色を「青」に設定します。 2番目の宣言は、単一要素のフォントサイズを「16px」に設定します。これらのセレクターは両方ともプロパティ名で始まり、その後にコンマとプロパティに割り当てる値が続きます。

宣言は中括弧内に格納されます。

CSSセレクター

前のセクションでは、宣言を使用してWeb要素にスタイルを適用する方法について説明しました。ただし、宣言はCSS構文の一部にすぎません。他の部分はセレクターで、特定の宣言セットを適用する要素をブラウザーに指示します。

CSSセレクターの構文は次のとおりです。

selector {
	// List of declarations
}

セレクターは、一連のスタイルを適用する要素をブラウザーに指示します。したがって、たとえば、すべての<div>の幅を設定したい場合 要素を「500px」にするには、次のルールを使用してこれを行うことができます：

div {
	width: 500px;
}

div この場合のセレクターはCSSルールの先頭にあります。次に、前に説明した構文を使用して、宣言を中括弧で囲んで定義します。このルールは、すべての<div>の幅を設定します Webページ上の要素を「500px」にします。

CSSセレクターについて詳しく知りたい場合は、CSSセレクターの初心者向けガイドをお読みください。

一緒に、宣言とセレクターはCSSスタイルのルールを構成します。

CSSコメント

これまで、CSSでスタイルルールを作成する方法について説明してきました。ただし、スタイルシートに記述されているすべてのテキストがスタイルルールであるとは限りません。

CSSスタイルシートはコメントを保存することもできます。コメントは、スタイルシートのコードを理解しやすくすることを目的として開発者が書いたテキストのブロックです。コメントはブラウザによって無視されるため、スタイルシートに必要な数のコメントを追加できます。

コメントを書くことは多くの理由で有益です。

まず、コメントを書くことで、コードを書いているときにコードを追跡でき、将来コードのブロックを理解するのに助けが必要な場合に参照できる考えの記録が得られます。第二に、コメントを書くことで、コードのブロックを書いたことがない開発者は、その目的とコードを書くことの背後にあるあなたの意図を理解することができます。

CSSコメントは/*構文で始まり、*/構文で終わります。

単一行および複数行のコメント

CSSに表示できるコメントには、1行と複数行の2種類があります。

1行のコメントは、スタイルシートの1行のみにまたがるコメントです。スタイルルールの上に表示されるCSSの1行のコメントの例を次に示します。

/* This style sets the font size of all <p> tags to 16px */
p {
	font-size: 16px;
}

このコードでは、コメントは/*マーカーと*/マーカーの間に表示されます。コメントの下には、前に説明した構文を使用するスタイルルールがあります。

複数行のコメントは、スタイルシートの複数行にまたがるコメントです。 CSSの複数行コメントの例を次に示します。

/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p {
	font-size: 16px;
	color: gray;
}

このコメントは2行にまたがっており、CSSスタイルについて説明しています。

結論

他のプログラミング言語と同様に、CSSには、その言語を使用してコードを記述する方法を定義するための基本的な構文がいくつかあります。

CSSには、スタイルルールを構成する2つのコンポーネントがあります。宣言とセレクターです。宣言は要素に適用するスタイルであり、セレクターは宣言が適用される要素を選択するために使用されます。

さらに、CSSにはコメント機能があり、後で参照できるようにコードにメモを書き込むことができます。コメントはブラウザによって無視されます。

このチュートリアルでは、CSS構文の基本と、CSSスタイルシートにコメントする方法について説明しました。これで、プロのWeb開発者のようにCSSスタイルのルールとコメントを書き始める準備ができました！