序章
このチュートリアルでは、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
ファイル(このシリーズをフォローしている場合)を作成し、次のルールセットを追加します。
/* 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コメントに使用されるタグ。- The
font-family: "Helvetica", Sans-Serif;
宣言は、Webページ上のすべてのテキストのフォントファミリ(Helvetica)と汎用フォントファミリ(Sans-Serif)を設定します。 (後でCSSルールを追加することにより、同じWebページのテキストコンテンツに異なるフォントファミリを指定できることに注意してください)。 汎用フォントファミリは、最初のフォントファミリが使用できず、ブラウザがバックアップフォントを選択する必要がある場合に備えて、バックアップとして提供されます。 「Helvetica」を次のような他のフォント名に置き換えることで、他のフォントを探索できます。Times
,Courier
、 またPalatino
. - The
background-image: url("../images/background-image.jpeg;")
宣言は、指定されたファイルパスで見つかったファイルを使用してWebページに背景画像を追加するようにブラウザに指示します。 を追加したことに注意してください../
ファイルパス名に移動して、ブラウザにimages
作業中のファイルが含まれているディレクトリの上のディレクトリにあるフォルダ(styles.css
).
あなたの styles.css
ファイルをロードし、 index.html
ブラウザのページ。 HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法にアクセスしてください。
背景画像以外のコンテンツが含まれていないページが表示されます。
画像が届かない場合は、ファイルパスが正しいことと、エラーがないことを確認してください。 index.html
ファイルと styles.css
ファイル。
ハイパーリンクされたテキストの色を変更する
次に、すべてのハイパーリンクされたテキストの色をWebサイトのカラーパレットにより適した色に変更するCSSルールを追加します。
あなたの下部に styles.css
ファイルに、次のルールセットを追加します。
a {
color: #112d4e;
}
このルールセットは、でマークアップされたテキストのスタイルを設定します <a>
HTMLカラーコードでタグ付け #112d4e
. 追加するまでスタイルはわかりません <a>
あなたへの要素 index.html
ページ(前回のチュートリアルHTMLとCSSを使用して静的フッターを作成する方法で行います。 このCSSルールのHTMLカラーコードを変更することで、スタイルの色を変更できます。
結論
これで、大きな背景画像を含むWebページが作成されます。 さらに、テキストコンテンツの追加を開始するときに適用されるフォントファミリを宣言しました。 このようなルールセットを使用すると、Webページのルールセットを作成して、Webページのフォントと背景画像を変更できます。 body
タグセレクター。 最後に、ページに追加するハイパーリンクされたテキストの色を指定するスタイルルールを作成しました。
次のチュートリアルでは、デモンストレーションWebサイトのヘッダーセクションを再作成します。