2006年11月24日

作業2 CSSその8  background-image について

では、「#header」領域に背景画像を表示してみましょう。

画像は、下記の「ダウンロードはココから」を右クリックし【対象をファイルに保存】を選択しデスクトップに保存しておいてください。フォルダ名は「gazou」で「LZH」形式になっています。各自解凍をお願いします。

ダウンロードはココから

解凍すると「head1.jpg」と「head2.jpg」の2枚の画像ファイルがありますので、ご自分の「csstips」フォルダの中の「images」フォルダに入れて下さい。

「style1.css」を開いて下さい。

以下のソースを探して下さい。

#header {
width: 763px;
}


以下のように記述足します。太字の部分です。

#header {
width: 763px;
height:230px;
background-image:url('images/head1.jpg');
}


「part1.html」ファイルをブラウザで確認してみましょう。

うまく画像が表示されていますね。

この画像は2枚とも横幅763ピクセル、高さが230ピクセルにしてありますから、高さを指定する「height」を230ピクセルに指定しておきます。

「#header」の領域にある<h1>はデフォルトの位置に表示されているのでこの位置を好きな場所に指定します。

「padding」で指定してみましょう。

「style1.css」ファイルを開いて新たに「h1」を記述します。

以下のように記述して下さい。太字の部分です。

h1{
padding-top:80px;
padding-left:40px;
}

これで「見出し1」の<h1>の位置を上から80ピクセル、左から40ピクセルのスペースを確保したことになります。


今度は、画像を変えてみましょう。赤字のところの数字を「2」に変えるだけです。これで「head2.jpg」の画像ファイルを入れ替えることが出来ます。

#header {
width: 763px;
height:230px;
background-image:url('images/head2.jpg');
}


ブラウザで確認すると<h1>の文字の一部が背景に溶け込んでいます。この文字を「白色」にしましょう。太字の部分を記述足してください。

h1{
padding-top:80px;
padding-left:40px;
color:#FFFFFF;
}


文字色も背景画像にあわせてお好きな色を指定して下さい。

最後に、「#header」と「#honbun」の領域がくっついているので「margin」で調整します。今回は「#header」領域の「bottom」を調整しましょう。

太字の部分を記述足します。

#header {
width: 763px;
height:230px;
background-image:url('images/head2.jpg');
margin-bottom:20px;
}


このように、「CSS」をうまく利用すればサイトの更新が楽になりますね。

今回はココまで……。だいぶホームページらしくなってきましたね。

次回は「#footer」の領域についてです。

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 11:17 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。