3−2 レイアウトの背景を指定する
背景に色を指定する
CSS(スタイルシート)の「background」で背景を指定すれば、<div>の中を好きな色にすることができます。
背景に色を付けることはデザイン的要素だけでなく、背景の色を変えるだけで、他と区別することができ、border(枠線)のような要素もあります。
色の指定方法は複数あるのですが、#(シャープ)と6ケタの英数字で表す16進数で指定する方法とカラーネームで指定する方法が一般的です。たくさんの色がありますがホームページ作成ソフトがあれば、簡単に色を選べます。
(参考サイト→いろずかん-カラーコード順のカラーチャート)
背景に画像を指定する
背景に指定できのは色だけでなく、画像を指定することもできます。画像を背景に指定した場合、画像の上に文字を表示することもできます。
少しややこしいですが、「img/header.gif」というのは
「img」フォルダの「header.gif」ファイルを指定するという意味です。
↓
background-image: url(' フォルダ名/ファイル名 ')
今回の画像は、a-boxのdivタグの大きさ(width: 750px)に合わせて、横750px の画像を用意しています。1-1で作成したimgフォルダへ保存してください。
Internet Explorer
「右クリック + 対象をファイルに保存」でダウンロードできます。
Firefox
「右クリック + 名前を付けてリンク先を保存」でダウンロードできます。
↓ここへ保存する
ホームページソース
画像をダウンロードするか、自分で画像を用意しなければ、スタイルシートを書いても、画像は表示されません。
<head>
<title></title>
</head>
<body>
<div id="site-box">
</div>
</body>
</html>
width : 750px;
border: 1px solid #FF9900;
}
border-bottom: 1px solid #FF9900;
background-image: url('img/header.gif');
}
float: left;
width: 500px;
}
float: right;
width: 250px;
}
clear: both;
width: 750px;
background-color: #FFFF99;
}
(「まぐまぐ」にて殿堂入りしました)
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか?
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
こんなヤツ!
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ
必要なものは?
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。