初心者による初心者の為のスタイルシート覚え書き>画像の設定がわかんない 

画像の設定がわかんない

画像もスッキリ整理しましょう

外部スタイルシート(css)ファイル内で背景画像を設定する際、「画像ファイルの場所」を記述しなければなりません。
それは「外部スタイルシート(CSS)ファイルから画像の置き場への相対パス」を記入します。

具体的な説明の前に画像の置き方について書きます。
私は今までHTML文書に貼り付ける時にそのまま同じフォルダに画像も保存していたので、
同じサーバー上に同じ画像ファイルが何十個も存在していました。

例えば背景に「star.gif」を使っていたとします。
「index.html」「twinsフォルダの各htmlファイル」「hamstarフォルダの各htmlファイル」にその同じ背景を使ってた時に
各フォルダにそのまま保存していたので同じファイル(青背景いの文字)があちこちにあるのが分かりますか?
↑上 index.html star.gif twins hamstar
mie.html jangari.html
階層の深さ tomo.html canberu.html
↓下 star.gif star.gif
(backとiconフォルダは同階層)
これではサーバーの容量もどんどん使われていってしまいます。

要は、この外部スタイルシートの様に一箇所に画像ファイルの置き場を作ってそこから呼び出せばいいわけです。
…でも、私にはその方法がわかりませんでした。

▲ページの最初に戻る

画像はどこに置くの?

さっきの「外部ファイルはどこに置くの?」を思い出してください。
↑上 index.html css twins img
階層の深さ sample.css mie.html back
↓下 honban.css tomo.html   mizutama.gif
(backとiconフォルダは同階層)   border.gif
icon
  usagi.gif
  kuma.gif
こんな風に画像ファイルだけのフォルダを作っちゃいましょう。(もちろん名前はお好きなものをどうぞ)
画像の種類(背景、ボタン画像や、写真など)でフォルダ分けをしておくともっと整理しやすいと思います。

▲ページの最初に戻る

画像を貼り付けるにはどう設定するの?

さぁ置き場所は決まりました。問題はこれをどうやって各ページに貼り付けるかです。
「外部スタイルシート(CSS)ファイルから画像の置き場への相対パスを記入する」ということは
先ほどのスタイルシートのリンクの仕方と同じです。

↑上 index.html css twins img
階層の深さ sample.css mie.html back
↓下 honban.css tomo.html   mizutama.gif
(backとiconフォルダは同階層)   border.gif
icon
  usagi.gif
  kuma.gif

sample.cssでusagi.gifという背景画像を設定したい時は「sample.css」から見た「usagi.gif」への置き場所を書けばいいんですね。上の表で言うと「../img/icon/usagi.gif」になるわけです。

記入例です。こんな時に使います。
「TDに対してusausaという名前で設定をつけたとして 余白は0.3文字高さ分で背景はusagi.gifを使う」という設定
td.usausa
{
padding:0.3em;
background-image:url('../img/sozai/usagi.gif');
}

先にお勧めしたWeb Frontierさんの「スタイルシートの技」超初心者のためのホームページ作成講座さんの超初心者のためのスタイルシート講座になどを見てもしつまづいたら…
これを思い出してもらえばすぐにでもスタイルシートを扱えると思います。
私もまだ勉強を始めたばかり。一緒に効率のよいページ作りの為に頑張りましょう♪

▲ページの最初に戻る

「スタイルシート、作り方がわかんない」へ トップへ戻る