CSSを使用してWebサイトの本文のスタイルを設定する方法
序章
このチュートリアルでは、CSSルールを使用してWebページの本文のスタイルを設定します。 このルールを使用して、背景画像を適用およびスタイル設定し、Webページのフォントファミリを設定します。 また、すべてのハイパーリンクされたテキストの色を、デモWebサイトのカラーパレットにより適した色に変更するスタイルルールを作成します。
この演習は、デモンストレーションサイトのスタイルを再現するために使用されますが、他のHTML /CSSWebサイトプロジェクトにここで使用されているのと同じルールを適用および変更できます。
前提条件
このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。
このチュートリアルでは、このリンクからをダウンロードできるデモサイトの背景画像を使用することをお勧めします。 背景として別の画像を使用することもできますが、画像が画面全体に表示されるのに十分な大きさであることを確認してください。
注：デモサイトの背景画像をダウンロードするには、このリンクにアクセスし、CTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）をクリックします。画像上で「名前を付けて画像を保存」を選択し、background-image.jpegとして「画像」フォルダに保存します。
画像を選択したら、imagesフォルダに「background-image.jpeg」として保存されていることを確認してください。 これで、次のステップに進む準備ができました。
CSSを使用してWebサイトに背景画像を追加する
ウェブページの本文のスタイルルールを宣言するには、bodyタグセレクターのCSSルールを作成する必要があります。 これらのルールは、前のチュートリアルHowでindex.htmlファイルに追加した開始および終了<html>タグ内に配置されたすべての要素に適用されます。 CSSおよびHTMLWebサイトプロジェクトを設定するには。
サイトに背景画像を追加するには、<body>タグセレクターを使用してCSSルールを作成します。 styles.cssファイルのすべてを消去し（このシリーズをフォローしている場合）、次のルールセットを追加します。
styles.css
/* General Website Style rules */
body {
font-family: "Helvetica", Sans-Serif;
background-image: url("../images/background-image.jpeg");
}
強調表示されたファイルパスに注意してください。これは、背景画像の場所をブラウザに指示します。 画像の名前または場所を変更した場合は、それに応じてここでファイルパスを調整する必要があります。
このルールセットの各宣言を理解するために、少し一時停止してみましょう。
/* General Website Style rules */はCSSコメントであり、ブラウザには表示されません。 HTMLコメントと同様に、CSSコメントは、後で参照できるようにコードを説明および整理するのに役立ちます。 CSSコメントは、HTMLコメントに使用される<!--および-->タグではなく、/*および*/タグで開閉することに注意してください。font-family: "Helvetica", Sans-Serif;宣言は、Webページ上のすべてのテキストのフォントファミリ（Helvetica）と汎用フォントファミリ（Sans-Serif）を設定します。 （後でCSSルールを追加することにより、同じWebページのテキストコンテンツに異なるフォントファミリを指定できることに注意してください）。 汎用フォントファミリは、最初のフォントファミリが使用できず、ブラウザがバックアップフォントを選択する必要がある場合に備えて、バックアップとして提供されます。 「Helvetica」をTimes、Courier、Palatinoなどの他のフォント名に置き換えることで、他のフォントを調べることができます。background-image: url("../images/background-image.jpeg;")宣言は、指定されたファイルパスで見つかったファイルを使用して、Webページに背景画像を追加するようにブラウザーに指示します。 ファイルパス名の前に../を追加して、作業中のファイルが含まれているディレクトリの上のディレクトリにあるimagesフォルダを見つけるようにブラウザに指示していることに注意してください（ [X196X ]）。
styles.cssファイルを保存し、ブラウザにindex.htmlページをロードします。 HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法にアクセスしてください。
背景画像以外のコンテンツが含まれていないページが表示されます。
画像が届かない場合は、ファイルパスが正しいことと、index.htmlファイルとstyles.cssファイルにエラーがないことを確認してください。
ハイパーリンクされたテキストの色を変更する
次に、すべてのハイパーリンクされたテキストの色をWebサイトのカラーパレットにより適した色に変更するCSSルールを追加します。
styles.cssファイルの下部に、次のルールセットを追加します。
styles.css
a {
color: #112d4e;
}
このルールセットは、<a>タグでマークアップされたテキストをHTMLカラーコード#112d4eでスタイル設定します。 <a>要素をindex.htmlページに追加するまでスタイルはわかりません（前回のチュートリアルHTMLとCSSを使用して静的フッターを作成する方法 。 このCSSルールのHTMLカラーコードを変更することで、スタイルの色を変更できます。
結論
これで、大きな背景画像を含むWebページが作成されます。 さらに、テキストコンテンツの追加を開始するときに適用されるフォントファミリを宣言しました。 このようなルールセットを使用すると、bodyタグセレクターのルールセットを作成して、Webページのフォントと背景画像を変更できます。 最後に、ページに追加するハイパーリンクされたテキストの色を指定するスタイルルールを作成しました。
次のチュートリアルでは、デモンストレーションWebサイトのヘッダーセクションを再作成します。
