スタイルを作成および適用する

重要:  この記事は機械翻訳されています。機械翻訳についての「免責事項」をお読みください。この記事の英語版を参照するには、ここをクリックしてください。

スタイルとは、カスケード スタイル シート (CSS) で定義する、一連の書式設定のことです。スタイルは、Web ページのコンテンツに対して適用できます。テキスト (各文字または段落全体)、グラフィック、レイヤ、表、さらには Web ページの内容全体に対して適用することも可能です。スタイルを使うことで、ひとまとまりのプロパティと値を効率よく再利用でき、使うたびにプロパティを毎回設定する必要がなくなります。

CSS のスタイルは、グローバルなスタイル ルールが HTML 要素に適用され、ローカルのスタイル ルールが適用される場合はそちらが優先されるという形で、順番に適用されます。一般には、全体に対するスタイル ルールよりも、ローカルのスタイル ルールの方が優先されます。たとえば、Web ページの内部 CSS で定義したスタイルは、外部 CSS で定義したスタイルよりも優先されます。同様に、Web ページの中の単一の HTML 要素内で定義したインライン CSS は、その Web ページの内部 CSS や外部 CSS で同じ要素に対して定義したスタイルよりも優先されます。HTML 要素にローカル CSS スタイルを適用する場合でも、グローバルなスタイル ルールのうちでローカル スタイルと競合しない部分については、グローバルなスタイルが適用されます。

この記事の内容

スタイルの種類

スタイルを作成します。

スタイルを適用します。

スタイルの種類

外部 CSS または内部 CSS で指定するスタイルには、クラスベースのスタイル、要素ベースのスタイル、および ID ベースのスタイルがあります。スタイルはルール セットで定義し、セレクタの後にプロパティ宣言のブロックを左中かっこ ({) と右中かっこ (}) で囲んで指定します。それぞれのスタイルの種類は、セレクタによって区別します。クラスベースのスタイルはセレクタの前にピリオド (.) を付け、ID ベースのスタイルはセレクタの前に番号記号 (#) を付け、要素ベースのスタイルは H1 要素などの HTML 要素のみをセレクタに指定します。

クラスベースのスタイル

クラスベースのスタイルは、Web ページ上の 1 つまたは複数の項目に適用する一連のプロパティを定義するときに使用します。スタイルを変更する場合は、そのスタイルのルール セットを編集すれば、そのスタイルを適用していたすべての項目に変更が自動的に反映されます。

次の例では、"introduction" がスタイルのセレクタで、"font-size: small" が 1 つのプロパティ宣言、その後にもう 1 つプロパティ宣言があります。

クラスベースのスタイルのルール セットの例

.introduction {font-size: small; color: white}

クラスベースのスタイルを適用した <p> タグの例

<p class="introduction">

要素ベースのスタイル

要素ベースのスタイルは、Web ページ上の特定の HTML 要素のすべてのインスタンスに適用する一連のプロパティを定義するときに使用します。たとえば、Web ページのすべての段落 (<p> タグで囲まれたコンテンツ) の周りに 25 ピクセル分の余白を確保するには、要素ベースのスタイルを作成し、p 要素をセレクタに指定して、余白 (margin) のプロパティを宣言します。次のコードはその例です。

要素ベースのスタイルのルール セットの例

p { margin-left: 25px; margin-right: 25px }

ID ベースのスタイル

ID ベースのスタイルは、1 つまたは複数の Web ページで、他のすべてのコンテンツと区別する単一の項目または複数項目のブロックに対して一連のプロパティを定義するときに使用します。Web ページ上の単一の HTML 要素にスタイルを適用するときには、ID ベースのスタイルを使用します。

ID ベースのスタイルのルール セットの例

#footer {background-color: #CCCCCC; margin: 15px}

ID ベースのスタイルを <p> タグに適用する例

<p id="footer">

インライン スタイル

インライン スタイルは、Web ページ上の単一の項目または複数項目のブロックに対して一連のプロパティを定義し、そのスタイルを再利用しないときに使用します。ID ベース、要素ベース、およびクラスベースのスタイルの場合は、Web ページの head セクション (内部 CSS) または外部 CSS ファイルでプロパティを定義しますが、インライン スタイル (インライン CSS) の場合は、スタイルを適用する対象の HTML 要素でプロパティを直接定義します。

インライン スタイルのルール セットの例

<p style="font-weight: bold; font-style: italic; color: #FF0000">

ページの先頭へ

スタイルを作成する

新しいスタイルを作成するには、ゼロから作成する方法と、既存のスタイルをコピーする方法とがあります。いずれの場合も、新しいスタイルに必要な項目 (セレクタの種類、プロパティ、スタイルを定義するスタイル シートなど) は、[新しいスタイル] ダイアログ ボックスですべて定義できます。新しいインライン スタイルを作成する場合は、[CSS のプロパティ] 作業ウィンドウも使用できます。プロパティを設定せずに新しいスタイルをすばやく作成してページに適用するには、[スタイル] ツールバーも使用できます。

[新しいスタイル] ダイアログ ボックスを使用して、スタイルを作成します。

  1. 次のいずれかを実行します。

    • 外部 CSS にスタイルを追加するには、.css ファイルを開きます。

    • 内部 CSS にスタイルを追加するには、Web ページを開きます。

    • インライン スタイルを追加するには、Web ページを開き、スタイルを適用するコンテンツを選択します。

  2. 次のいずれかを実行します。

    • 新しいスタイルを作成するには    [スタイルの適用] 作業ウィンドウ、[スタイルの管理] 作業ウィンドウ、[スタイル] ツールバー、[書式] メニューのいずれかの場所で [新しいスタイル] をクリックします。

    • 既存のスタイルをコピーするには    次のいずれかの操作を行います。

      • [スタイルの適用] 作業ウィンドウで、コピーするスタイルをポイントし、表示される下向きの矢印をクリックして、[新しいスタイルのコピー] をクリックします。

      • [スタイルの管理] 作業ウィンドウまたは [CSS のプロパティ] 作業ウィンドウで、コピーするスタイルを右クリックし、[新しいスタイルのコピー] をクリックします。

  3. [新しいスタイル] ダイアログ ボックスで、次の操作を行います。

使用する項目

操作

[セレクタ]

  • クラス セレクタを使用するには、ピリオド (.) に続けて一意の名前を入力します。

  • ID セレクタを使用するには、番号記号 (#) に続けて一意の名前を入力します。

    注: 複雑なセレクタを作成する場合を除き、クラス セレクタと ID セレクタの名前に空白を含めることはできません。

  • 要素セレクタを使用するには、HTML 要素の名前を入力するか、または [セレクタ] ボックスをクリックして要素名をクリックします。

  • インライン セレクタを使用するには、[インライン スタイル] を選択します。

  • 複雑なセレクタを作成するには、セレクタを入力します。

[定義先]

次のいずれかを選択します。

  • 現在の Web ページの内部 CSS に新しいスタイルを追加するには、[現在のページ] を選択します。

  • 新しい空白の外部 CSS に新しいスタイルを追加するには、[新しいスタイル シート] を選択します。

  • 既存の外部 CSS を指定して新しいスタイルを追加するには、[既存のスタイル シート] を選択します。

[新しいスタイルをドキュメントの選択範囲に適用する]

現在の Web ページの現在の選択範囲にスタイルを適用します。

[URL]

[定義先] で [既存のスタイル シート] を選択した場合は、.css ファイルの URL を入力します。

[カテゴリ]

次のいずれかを選択し、ダイアログ ボックスの右側に表示されるプロパティを設定します。

ヒント: [カテゴリ] の一覧で、太字で表示されているカテゴリには、設定されたプロパティがあります。

  • [フォント] では、フォントのサイズ、太さ、装飾、色などを設定します。

  • [ブロック] では、行間、文字の配置、インデント、および文字間隔を設定します。

  • [背景] では、背景色と背景イメージのプロパティを設定します。

  • [枠線] では、境界とその関連プロパティを設定します。

  • [ボックス] では、ボックスおよびブロックのレベルの要素の間隔と余白を設定します。

  • [配置] では、ボックスおよびブロックのレベルの要素のサイズと位置を設定します。

  • [レイアウト] では、ボックスおよびブロックのレベルの要素の表示、浮動および折り返しの動作、クリップ、およびその他のレイアウト プロパティを設定します。

  • [リスト] では、リスト要素の種類、位置、イメージなどのプロパティを設定します。

  • [テーブル] では、テーブルの間隔、レイアウト、境界プロパティなど、テーブルに関連する要素のプロパティを設定します。

注: CSS 間でスタイルをコピーすることもできます。[スタイルの管理] 作業ウィンドウで、目的のスタイルを含む CSS から、コピー先の CSS の名前、または目的の CSS のスタイルの一覧の中の特定の部分に、スタイルをドラッグします。

[CSS のプロパティ] 作業ウィンドウを使用してインライン スタイルを作成します。

  1. デザイン ビューまたはコード ビューで、Web ページ内でインライン スタイルを追加するコンテンツを選択します。

  2. [CSS のプロパティ] 作業ウィンドウの [適用されているルール] で、インライン スタイルを適用する対象のセレクタを右クリックします。"(ルールは適用されていません)" と表示されている場合は、[適用されているルール] のいずれかの部分を右クリックします。次に、ショートカット メニューの [新しいインライン スタイル] をクリックします。

  3. [CSS のプロパティ] で、目的のプロパティを設定します。

新しい未定義のスタイルを作成および適用する

スタイルの作成と項目への適用を先に済ませたうえで、そのスタイルの定義を後から行うことができます。たとえば、デザイナと協力してページの外観を作成する場合には、未定義のスタイルをページ上の項目に適用してから、スタイルの定義を後でデザイナと行うことができます。

  1. デザイン ビューまたはコード ビューで、Web ページ内でスタイルを適用するコンテンツを選択します。

  2. プロパティを定義せずに新しいスタイルを作成および適用するには、[スタイル] ツールバーで、[クラス] ボックスまたは [ID] ボックスに、新しいスタイルの一意の名前を入力します。

ページの先頭へ

スタイルを適用する

内部または外部のカスケード スタイル シート (CSS) で定義した、クラスベースまたは ID ベースのスタイルを適用するには、[スタイルの適用] 作業ウィンドウ、[スタイルの管理] 作業ウィンドウ、または [スタイル] ツールバーを使用できます。[スタイルの適用] 作業ウィンドウでは、選択範囲に複数のスタイルを適用できるのに対し、[スタイルの管理] 作業ウィンドウおよび [スタイル] ツールバーでは、1 つのスタイルのみを適用できます。[スタイル] ツールバーでは、新しい未定義のスタイルに名前を付けてページに適用する操作をすばやく実行できます。

セレクタとして要素を指定するスタイル (要素ベースのスタイル) は、適用の操作は必要ありません。Web ページ全体の該当する要素に自動的に適用されます。要素ベースのスタイルは、[スタイルの適用] 作業ウィンドウの [コンテキスト セレクタ] に表示され、[スタイルの管理] 作業ウィンドウでスタイル名の横に青丸が表示されます。[スタイル] ツールバーには要素ベースのスタイルは表示されません。

  1. デザイン ビューまたはコード ビューで、Web ページ内でスタイルを適用する項目を選択します。

  2. 次のいずれかを実行します。

    • 複数の既存のスタイルを適用するには    [スタイルの適用] 作業ウィンドウで、Ctrl キーを押しながら目的の各スタイルをクリックします。

    • 単一の既存のスタイルを適用するには    次のいずれかの操作を行います。

      • [スタイルの適用] 作業ウィンドウで、目的のクラスまたは ID スタイルをクリックします。

      • [スタイル] ツールバーの [クラス] ボックスまたは [ID] ボックスで、目的のスタイルをクリックします。

      • [スタイルの管理] 作業ウィンドウで、目的のクラスまたは ID スタイルを右クリックし、ショートカット メニューの [スタイルの適用] をクリックします。

    • プロパティを定義せずに新しいスタイルを作成および適用するには    [スタイル] ツールバーの [クラス] ボックスまたは [ID] ボックスに、新しいスタイルの一意の名前を入力します。

ページの先頭へ

注: 機械翻訳についての免責事項: この記事の翻訳はコンピューター システムによって行われており、人間の手は加えられていません。マイクロソフトでは、英語を話さないユーザーがマイクロソフトの製品、サービス、テクノロジに関するコンテンツを理解するのに役立てるため、こうした機械翻訳を提供しています。記事は機械翻訳されているため、用語、構文、文法などに誤りがある場合があります。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×