 
【クリック募金】
【ウィルス対策】
【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】
 
 
 
 
 
|
画像（グラフィックデータ／イメージ）
タグの簡易テスト（別窓）
| 画像を表示させる | 右寄せ・左寄せ
| 動くイメージ | 背景に画像（壁紙）
| 背景画像を固定 |
| ロールオーバーイメージ（オンマウスオーバー）
| キャッシュの削除 |
|
背景画像を固定
背景画像の固定はすべてスタイルシートを使います。スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。
画像のファイル名は半角英数字で拡張子も忘れずに（ ）内に記述してくださいね。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>
<body>
</body>
</html>
| 左上に固定 表示例 |
右上に固定 表示例 |
|
|
| ↑スタイルシ−ト記述 |
↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
no-repeat; background-position: left top}
-->
</style> |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
no-repeat; background-position: right top}
-->
</style> |
| 左下に固定 表示例 |
右下に固定 表示例 |
|
|
| ↑スタイルシ−ト記述 |
↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
no-repeat; background-position: left bottom}
-->
</style> |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
no-repeat; background-position: right bottom}
-->
</style> |
| 上に一つ固定 表示例 |
下に一つ固定 表示例 |
|
|
| ↑スタイルシ−ト記述 |
↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
no-repeat; background-position: center top}
-->
</style> |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
no-repeat; background-position: center bottom}
-->
</style> |
| 左一列に固定 表示例 |
右一列に固定 表示例 |
|
|
| ↑スタイルシ−ト記述 |
↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
repeat-y; background-position: left}
-->
</style> |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
repeat-y; background-position: right}
-->
</style> |
| 上一列に固定 表示例 |
下一列に固定 表示例 |
|
|
| ↑スタイルシ−ト記述 |
↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
repeat-x; background-position: top}
-->
</style> |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
repeat-x; background-position: bottom}
-->
</style> |
| 中央一列に固定 表示例 |
中央に一つ固定 表示例 |
|
|
| ↑スタイルシ−ト記述 |
↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
repeat-y; background-position: center}
-->
</style> |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url 画像 GIFやJPG); background-repeat:
no-repeat; background-position: center center}
-->
</style> |
| 壁紙を固定 表示例 |
|
| ↑スタイルシ−ト記述 |
<style type="text/css">
<!--
body { background-attachment: fixed; background-image:
url(画像 GIFやJPG); background-repeat:
repeat}
-->
</style> |
|
このページのトップへ
Point：
画像は必ずホームページ（HTML文書）と同じ場所（同じフォルダ内）に保存しておきましょう。
「画像が表示されない」「自分のパソコンでしか見れない」「画像の保存先を整理したい」等・・・
そんな時は『相対パス・絶対パス』を確認してみてくださいね。
Link：
相対パス・絶対パス
このページのトップへ
|
ホームページのデザインテンプレートをダウンロードできるサイト
