カスケード スタイル シートを作成または変更する

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

カスケード スタイル シート (CSS) では、Web ページの表示を制御できます。CSS を使用することで、Web ページ上の要素を正確に配置し、その外観を設定できます。

CSS には、Web ページとの相対的な位置関係に応じて、外部 CSS、内部 CSS、およびインライン CSS の 3 種類があり、1 つの Web ページ内で 1 つまたは複数の種類の CSS を同時に使用できます。通常は、インライン CSS で定義したスタイルは内部 CSS および外部 CSS のスタイルより優先され、内部 CSS のスタイルは外部 CSS のスタイルより優先されます。

目的に合ったトピックをクリックしてください。

外部 CSS を作成します。

内部 CSS を作成します。

インライン CSS を作成します。

外部 CSS を作成する

外部スタイル シートは、サイト内の一部または全部の Web ページに一貫して同じスタイルを適用する場合に適しています。1 つまたは複数の外部スタイル シートでスタイルを定義し、Web ページにリンクすることで、サイト全体で一貫性のある外観を実現できます。スタイルを変更する場合は、外部 CSS を変更するだけで、そのスタイルおよび CSS を参照するすべての Web ページに変更が反映されます。

外部 CSS は .css ファイルに記述します (たとえば core.css など)。外部 CSS の構文は内部 CSS と同じですが、外部 CSS で定義するスタイルは <style> タグで囲まないという違いがあります。

空白の外部 CSS を作成する

  • [ファイル] メニューの [新規作成] をポイントし、[CSS] をクリックします。

    ヒント: 一般的なまたは標準ツールバーで、[新しいドキュメント] ボタン ボタン の下向き矢印をクリックしてもしてCSS] をクリックします。

新しいスタイルと外部 CSS を 1 つの手順で作成する

  1. [書式] メニューの [新しいスタイル] をクリックします。

    ヒント: [新しいスタイル] は [スタイルの適用] 作業ウィンドウ、[スタイルの管理] 作業ウィンドウ、または [スタイル] ツールバーでクリックすることもできます。

  2. [新しいスタイル] ダイアログ ボックスで、[定義先] ボックスの [新しいスタイル シート] をクリックします。

ページの先頭へ

内部 CSS を作成する

内部 CSS (埋め込み CSS ともいう) は、現在の Web ページのみに対してスタイルを定義する場合、および現在の Web ページにリンクした外部 CSS で定義したスタイルを上書きする場合に適しています。

内部 CSS は、Web ページの <head> タグ内に記述します。

内部スタイル シートの例

<style type="text/css">
.alert {
font-weight: bold;
color: #FF0000;
}
h1 {
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
#headlines {
border-color: #000000;
border-width: thin;
border-style: solid;
}
</style>

内部 CSS を作成する

  1. CSS を記述する Web ページを開きます。

  2. [書式] メニューの [新しいスタイル] をクリックします。

    ヒント: [新しいスタイル] は [スタイルの適用] 作業ウィンドウ、[スタイルの管理] 作業ウィンドウ、または [スタイル] ツールバーでクリックすることもできます。

  3. [新しいスタイル] ダイアログ ボックスで、[定義先] ボックスの [現在のページ] を選択します。

ページの先頭へ

インライン CSS を作成する

インライン スタイルは、ページ内の個々の要素に CSS プロパティを適用し、スタイルを再利用する必要がない場合に適しています。インライン スタイルは、Web ページ内の HTML 要素の開始タグの中で定義します。

スタイルを作成する方法の詳細については、記事「を作成しスタイルを適用するします。

インライン スタイル シートの例

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

ページの先頭へ

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

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

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

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

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

×