開発者ドキュメント

CSSを使用してWebサイトの本文のスタイルを設定する方法

序章

このチュートリアルでは、CSSルールを使用してWebページの本文のスタイルを設定します。 このルールを使用して、背景画像を適用およびスタイル設定し、Webページのフォントファミリを設定します。 また、すべてのハイパーリンクされたテキストの色を、デモWebサイトのカラーパレットにより適した色に変更するスタイルルールを作成します。

この演習は、デモンストレーションサイトのスタイルを再現するために使用されますが、他のHTML /CSSWebサイトプロジェクトにここで使用されているのと同じルールを適用および変更できます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

このチュートリアルでは、このリンクからをダウンロードできるデモサイトの背景画像を使用することをお勧めします。 背景として別の画像を使用することもできますが、画像が画面全体に表示されるのに十分な大きさであることを確認してください。

:デモサイトの背景画像をダウンロードするには、このリンクにアクセスしてクリックしてください CTRL + Left Click (Macの場合)または Right Click (Windowsの場合)画像上で[名前を付けて画像を保存]を選択し、名前を付けて保存します background-image.jpeg 「画像」フォルダに移動します。

画像を選択したら、その画像が「background-image.jpeg」として保存されていることを確認してください。 images フォルダ。 これで、次のステップに進む準備ができました。

CSSを使用してWebサイトに背景画像を追加する

ウェブページの本文のスタイルルールを宣言するには、CSSルールを作成する必要があります body タグセレクター。 これらのルールは、開閉の内側に配置されるすべての要素に適用されます。 <html> 追加したタグ index.html 以前のチュートリアルCSSおよびHTMLWebサイトプロジェクトの設定方法のファイル。

サイトに背景画像を追加するには、を使用してCSSルールを作成します <body> タグセレクター。 中のすべてを消去します styles.css ファイル(このシリーズをフォローしている場合)を作成し、次のルールセットを追加します。

styles.css
/* General Website Style rules */
body {
  font-family: "Helvetica", Sans-Serif;
  background-image: url("../images/background-image.jpeg");
}

強調表示されたファイルパスに注意してください。これは、背景画像の場所をブラウザに指示します。 画像の名前または場所を変更した場合は、それに応じてここでファイルパスを調整する必要があります。

このルールセットの各宣言を理解するために、少し一時停止してみましょう。

あなたの 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ページが作成されます。 さらに、テキストコンテンツの追加を開始するときに適用されるフォントファミリを宣言しました。 このようなルールセットを使用すると、Webページのルールセットを作成して、Webページのフォントと背景画像を変更できます。 body タグセレクター。 最後に、ページに追加するハイパーリンクされたテキストの色を指定するスタイルルールを作成しました。

次のチュートリアルでは、デモンストレーションWebサイトのヘッダーセクションを再作成します。

モバイルバージョンを終了