HTMLを知ろう！その5
2009年9月25日
ありがたいことに最近お仕事が忙しく
か～な～り久しぶりにHTML講座を更新。
今回は、引き続き装飾に関することを書いてみます。
前回で文字を少し装飾することができました。
次にやりたいことと言えば、背景を変えたい、と来るのではないでしょうか？
背景を指定する方法も、2通りあります。
CSSで設定する方が細かく指定できるのでおすすめですが
今回も、とりあえずはもう1個の方、タグで指定する方法をご紹介します。
背景は基本的にボディに設定するものなので
ブラウザに指示してあげましょう。
色を変えるだけなら
<body bgcolor=”#FFFFCC”>
これだけでOKです。
>> サンプル01はこちら
色が変えられるようになると、画像を使いたい！と来ますが
これがちょっとだけ難しいです。
何故難しいかと言うと、書き方さえわかれば表示するのは簡単なのですが
「画像」
に対する注意点が多いからです。
このことは話が長くなるのでまた次回以降詳しく書きたいと思います。
今は、↓ここにサンプル用の画像を用意しましたので
ちょうど良い画像が手元にない人はダウンロードしてご利用ください。
画像を右クリックして「名前を付けて画像を保存」をクリックすると
保存できます。保存した場所を忘れがちなので、とりあえず
デスクトップかマイピクチャに保存すると無難です。
では、画像名が「bgimg5.gif」だったとして説明します。
書き方自体は簡単です
<body background=”bgimg5.gif”>
と、画像を指定してください。
これでOKです。
>> サンプル02はこちら
■同じようにやっても背景画像が表示されない場合
・HTMLファイルと、画像ファイルが同じフォルダに入っていますか？
違うフォルダに入っていると、表示されません。
・ファイル名は合っていますか？
サンプルをダウンロードしてもらったならファイル名は合っているはずですが
ご自身で用意したファイルだと、ファイル名が例と違います。
「abc.gif」だったとしたら
<body background=”abc.gif”>
と変更してしてください。
さて、サンプルを見てもらうとわかりますが、字が読みずらいです。
（サンプル用の背景画像はあえて見ずらいものを用意しました。）
背景に画像を使う難しさはここにもあります。
自分が好きな画像を使うのは良いのですが、字が読みにくくなってしまってるサイトを
たまに見かけます。
もともとホームページを作る目的はいろんな人に見てもらう
「書いてあることを読んでもらう」
ことですから、かわいい背景画像を使ったせいで字が読めなかったら本末転倒です。
でも、ネコの柄が使いたい！花柄にしたい！！と思う事も多いですよね。
そんな時は本文の背景を白くするのも一つの手です。
テーブルタグを使って、本文の背景を白に変更してみます。
<table width=”500″ bgcolor=”#ffffff”>
<tr><td>
<p><font color=”blue”>今日のランチ</font></p>
<p>レタスとトマトとハムのサンドイッチ<br>
ポタージュスープ<br>
野菜ジュース<br>
<br>
今日はお天気が良かったので、公園に行って食べました～。</p>
</td>
</tr>
</table>
>> サンプル03はこちら
文字はだいぶ読みやすくなったと思います。
デザイン性をアップさせようと思うと、CSSが必要になるので
とりあえずは文章と、背景を設定する方法として。
表示などをもう少し調整したものもアップしてみました。
>> サンプル04はこちら
背景も設定したことで、だいぶホームページらしくなってきました。
次回はサンプル04のように、画像を表示する方法を載せる予定です。
<<HTMLを知ろう！その4へ ｜ HTMLを知ろう！その6へ>>
