A.T-MOON

contents

パンくずリスト



    画像の指定(スタイルシート編)

マーク 画像の表示位置

 インライン: <img src="A" style="position:B; C: px; D: px;">



Aには画像ファイルのURL記述します。
Bで位置が【絶対位置】なのか【相対位置】なのかを指定します。
Cでその位置が【上から】なのか【下から】なのかを指定し
Dではその位置が【左から】なのか【右から】なのかを指定します。

B 位置
static ( デフォルト)
relative 相対位置指定
absolute 絶対位置指定
fixed 絶対位置指定(スクロールしても移動しない)
C 水平位置
top
bottom
D 垂直位置
left
right
z-index  

※例)
画像の表示
このページの上から720px、左から280pxの位置に画像が表示されています。 サンプル画像
<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートで画像の位置を指定</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 画像の表示<br>
 このページの上から720px、左から280pxの位置に画像が表示されています。
 <img src="画像ファイルのURL" alt="画像" style="position:absolute;top: 720px;left: 280px;">
 </body>
</html>
↓ピンク部分のタグをコピー↓

ページTOP



マーク 背景として画像を表示

 埋め込み
 {background-image:url(A);
  background-position:B C;
  background-attachment:D;
  background-repeat:E;}



Aには表示する画像のurlを挿入します。 絶対値相対値で指定します。
相対値指定は表示されるブラウザに依存しますので注意してくださいね。

BおよびCには画像の表示位置を挿入します。
Bに横方向、Cに縦方向の位置を、左から順に半角スペースで区切り、値やキーワードを使って指定します。
実数値 = 数値を挿入します。
   ひとつだけ挿入した場合は横方向の位置を指定したことになり、縦方向は50%に設定されます。
   横方向の位置はパディングの左から画像の左までの距離となり
   縦方向の位置はパディングの上から画像の上までの距離となります。
   負の値を指定することもできます。
   値をふたつ指定する場合、「%値」と組み合わせることはできますが
   キーワードとの組み合わせはできません。

%値 = 数値を%で挿入します。
   ひとつだけ挿入した場合は横方向の位置を指定したことになり、縦方向は50%に設定されます。
   それぞれ表示領域の指定割合の位置と、画像の指定割合の位置を合わせる位置となります。
   例えば「0% 0%」とした場合、パディングの左上と画像の左上
   「30% 70%」とした場合、パディングの「左から30% 上から70%」の位置と
   画像の「左から30% 上から70%」の位置を合わせることになります。
   負の値を指定することもできます。
   値をふたつ指定する場合、「実数値」と組み合わせることはできますが
   キーワードとの組み合わせはできません。

キーワードleft center right top bottom
   キーワードの場合指定する順序は問いませんが
   キーワードをひとつだけ挿入した場合はもう一方が「center」となります。
   「left」と「top」は「0%」、「center」は「50%」、「right」と「bottom」は「100%」となります。
   「実数値」や「%値」と組み合わせることはできません。
Dには表示する画像を固定するが否かを指定します。
初期値はscrollとなり画像がスクロールします。
scroll = 画像が固定されません。
fixed = 画像が固定されます。

Eでは表示する画像をひとつだけ表示するかそれ以外の表示かを指定します。
初期値はrepeatとなり、画像は縦横タイル状に並べられます。
repeat = 画像は縦横タイル状に並べられます。
repeat-y = 画像は横方向のみ繰り返して並べられます。
repeat-x = 画像は縦方向のみ繰り返して並べられます。
no-repeat = 画像がひとつだけ表示されます。



<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートで画像の表示位置を指定</title>
  <style type="text/css">
  <!--
   body {
   background-image:url(画像のurl);
   background-position:top left;
   background-attachment:fixed;
   background-repeat:no-repeat ;}
   }
   -->
  </style>
 </head>
 <body>
 <p>
  指定した画像が背景に表示されます。<br>
  スタイルシートで指定したとおり<br>
  画像は左上にひとつだけ固定して表示されます。<br>
  スクロールバーが表示されてスクロールした場合も<br>
  画像は動くことなく固定されています。
 </p>
 </body>
</html>
↓ピンク部分のタグをコピー↓(左上、ひとつ、固定)


ひとつだけ固定して表示


左一列に並べて表示


右一列に並べて表示


上一列に並べて表示


下一列に並べて表示

ページTOP


スタイルシートIndexへ戻る