Dreamweaver-パネルでcssを作成しよう!-カテゴリ「背景」

「Dreamweaver-パネルでcssを作成しよう」第2回目はカテゴリ「背景」プロパティを見直していきます。
(前回のカテゴリ「タイプ」はこちら)

Background-color
背景色を指定する際に使用。
Background-image
背景画像を指定する際に使用。「参照」ボタンで画像をアップします。noneは画像なしですね。
Background-repeat
背景画像の繰り返しパターンを設定します。

no-repeat
繰り返しなしの表示。1回のみ背景画像を表示。

repeat
縦横に背景画像を繰り返して表示。

repeat-x
横方向にのみ背景画像を繰り返して表示。

repeat-y
縦方向にのみ背景画像を繰り返して表示。

Background-attachment

fixed
背景画像の位置を固定するためスクロールしても動きません。

scroll
スクロールに伴い背景画像も移動。

Background-position
背景画像の表示を開始する位置を指定。(X)は横位置、(Y)は縦位置を示します。

left・center・right
背景画像の左・まん中・右側など、表示開始位置を指定。

(値)px・%など
背景画像の左上からの距離を指定。例えば、background-position: 10% 20%; の場合、背景画像の左端から10%、上端から20%の位置で背景画像を表示します。

背景画像のリピートについて補足:
画像サイズを小さくしてリピートさせることで画像容量を減らすことは出来ますが、その分表示するために負荷がかかります。とくにスマートフォンなどは読み込みに時間がかかるとユーザーのストレスにつながります。また、逆に画像サイズを大きくすると画像の重さでサーバーに負荷がかかります。
ではどうすることが最適なのでしょう?
web業界では、「一般的にどうしているか」ということが重要になります。
一般的に、1ページあたりの画像の容量はどれくらいなのかを調査し、自分がアップする1ページあたりの画像の総容量がその前後でおさまっているか、大幅にオーバーしていないかなどを見直し、リピートさせるのが適切か、1枚画像でアップするのが適切かを判断するようにするとよいですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>