HOME 洗車 競馬 宝くじ SHOP 掲示板 1/18/2003更新
HOME PAGE PageBottom】  BACK 文字の装飾
NEXT スタイルシートを使ってみよう

    写真に影をつけてみよう!
    撮りっぱなしの写真を貼り付けるだけでも影がつけられます。
    テーブルの背景に影用の画像を仕込んでやれば簡単に作れます。後は写真の位置決めだけで光をどちらから当てるか決められます。

    下の例はiショット(S)(120×120)
    iショット(L)(288×352)用の影画像を使っています。

    *影画像ファイルは自由にお使いいただける用にご用意いたしましたが、このサイトに直リンクを張ることはお断りします。
    画像ファイルをダウンロードしてご自分のサイトに貼り付けてお使いください。


写真の配置と
影用画像


shadow_s1.gif


shadow_s2.gif


shadow_s3.gif

iショット(S)用の影画像

サイズは130×130です

縦:標準 横:標準 縦:標準 横:left 縦:標準 横:center 縦:標準 横:right
縦:top 横:標準 縦:top 横:left 縦:top 横:center 縦:top 横:right
縦:center 横:標準 縦:center 横:left 縦:center 横:center 縦:center 横:right
縦:bottom 横:標準 縦:bottom 横:left 縦:bottom 横:center 縦:bottom 横:right

こちらは大きいサイズ

shadow_l1.gif

iショット(L)用の影画像

サイズは362×298です

shadow_l2.gif

shadow_l3.gif
使い方:
iShot(s)
の場合

<table>
  <tr>
  <td height="130" width="130" background="shadow_s1.gif" align="left" valign="top">
   <img src="picture.gif" width="120" height="120" border="0">
   </td>
  </tr>
</table>

iShot(l)
の場合

<table>
  <tr>
  <td height="362" width="298" background="shadow_s1.gif" align="left" valign="top">
   <img src="picture.gif" width="352" height="288" border="0">
   </td>
  </tr>
</table>


上記のHTMLコードをコピーして貼り付けます。
あとは必要ヶ所を直すだけで使えます。

height="130" width="130" 表示する範囲のサイズを決めています。
写真より少し大きめに設定して影の部分を確保しています。

background="shadow_s1.gif" " "の中を貼り付けたい影ファイル名に変更します。

align="left" valign="top" 写真の影の位置を決めています。

align=" "では横位置:left・center・rightを決められます。
valign=" "では縦位置:top・center・bottomを決められます。

影の位置は反対側になります。光源の位置きめと理解すると良いでしょう

<img src="picture.gif" ここで写真ファイルを入れます。


ついでに
テーブルについてちょっと

<table>
    
<tr>
      
<td>ここに文字や写真などを入れる</td>
      
<td>A</td>
   
</tr>
    
<tr>
      
<td>B</td>
      
<td>C</td>
   
</tr>
    
<tr>
      
<td colspan="2">2ます続き</td>
   </tr>
</table>
Sample
ここに文字や写真などを入れる A
B C
2ます続き

全体は
<table>〜</table>でくくります。

次に
<tr>〜</tr>で挟み込む部分があります。繰り返すと縦に増やせます。
間に入る
<td>〜</td>の数はそれぞれの<tr>〜</tr>の間に同じ数だけ入れてやります。
<td>〜</td>の数分写真を横に並べられます

<td colspan="2"></td>このようにすると数字の数だけ<td>を横につなげて広げることが出来ます。これでワイドな写真も載せられます。
<td rowspan="2"></td>この場合は縦につなぐことが出来ます
両方使えば縦横2*2で4倍の大きな写真も貼り付けられます。

HOME PAGE PageTop】  BACK 文字の装飾
NEXT スタイルシートを使ってみよう