文章の背景色、背景画像、配置方法をまとめて指定する
文章の背景色、背景画像、配置方法は、まとめて指定することができます。
<タグ名 style="background:
背景色 背景画像URL 画像繰返し方法 画像固定方法 画像表示位置">
背景色や画像を表示する文章</タグ名>
-
色番号または色名称:『 #008000 』などの、16進数表記または色名称で指定します。
-
背景画像URL:背景画像URL:背景画像URLを相対パスまたは絶対パスで指定します。
URLは、'(シングルクォート)または ”(ダブルクォート)で括っても構いません。
- 画像繰返し方法:繰返し方法は、下記の中から指定できます。
キーワード 繰返し方法 repeat 上下左右にパターンを繰り返す(通常の繰返し) repeat-x 左右にパターンを繰り返す repeat-y 上下にパターンを繰り返す no-repeat 繰り返さない - 画像固定方法:下記のキーワードで指定できます。
キーワード 画像固定方法 scroll 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。 fixed 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。 - 画像表示位置:画像の表示位置は、下記の絶対サイズ、相対サイズまたはキーワードから指定できます。
指定方法 表示位置 絶対サイズ、
相対サイズ表示領域の右上から、背景画像の左上までの距離を横距離、 縦距離の順番で指定 % 表示領域の各辺から、背景画像の各辺までの距離を、 左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定 キーワード 左右の配置(left , right , center)、 上下の配置(top , bottom , center)の順番で指定 絶対サイズ、相対サイズは以下の単位が使用できます。相対サイズは、その場面で使われている書体のサイズが基準です。絶対サイズ 意味 in インチ( 1 in = 25.4 mm ) cm センチメートル mm ミリメートル pt ポイント( 1 pt = 1/72 in) pc パイカ( 1 pc = 12 pt ) px※ ピクセル(表示上の 1 ドット幅) 相対サイズ 意味 em 基準書体の文字の高さ ex 基準書体の文字 x の高さ % 基準書体のサイズに対する百分率 ※正確にはデバイス依存の相対サイズ
サンプルソースです。
<div style="background:
cyan url(http://html.appelle.jp/sample/cat.gif) no-repeat right center">
この段落の背景色は、シアン色(cyan)です。背景画像に50x50ピクセルのねこの画像(sample/cat.gif)
を使用しています。<br>
画像の繰返し方法は、繰返ししない(no-repeat)です。<br>
背景画像の表示位置は、左右位置が右端(right)で、上下位置が中央(center)です。
</div>画像の繰返し方法は、繰返ししない(no-repeat)です。<br>
背景画像の表示位置は、左右位置が右端(right)で、上下位置が中央(center)です。
このソースを表示させると、次のようになります。
この段落の背景色は、シアン色(cyan)です。背景画像に50x50ピクセルのねこの画像(sample/cat.gif)
を使用しています。
画像の繰返し方法は、繰返ししない(no-repeat)です。
背景画像の表示位置は、左右位置が右端(right)で、上下位置が中央(center)です。
画像の繰返し方法は、繰返ししない(no-repeat)です。
背景画像の表示位置は、左右位置が右端(right)で、上下位置が中央(center)です。
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス