|
ホームページ作成時に役立つタグをご紹介。
私のメモ書きだったりもします＾＾；
ランキングに参加しています。
役に立ったらポチポチッとよろしくお願いします。
●ロールオーバー（マウスで触ると変化する画像） 例
|
<a
href="画像をクリックした時のリンク先のURL">
<img
src="@最初の画像URL"border="0"
onmouseover="this.src='Aマウスで触った時の画像URL'"
onmouseout="this.src='Bマウスを離した時の画像URL'">
</a>
赤字とピンクの箇所にURLを入力しててください。
通常@とBは同じ画像を入れることが多いです。
リンクが不要な場合は
<a
href="画像をクリックした時のリンク先のURL">
border="0"
</a>
を消してください。
|
●背景画像の配置
背景画像を中央に固定
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;}-->
</style>
|
背景画像を左上に固定
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:left
top;}-->
</style>
|
背景画像を右下に固定
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:right
bottom;}-->
</style>
|
背景画像を上に並べる
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:repeat-x;}-->
</style>
|
背景画像を下に並べる
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:repeat-x;
background-position:bottom;}-->
</style>
|
背景画像を左に並べる
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:repeat-y;}-->
</style>
|
背景画像を右に並べる
|
<style
type="text/css">
<!--body{background-image:url(背景画像URL);
background-attachment:fixed;
background-repeat:repeat-y;
background-position:right;}-->
</style>
|
その他、
右上に配置はbackground-positionをright
top
左下に配置はbackground-positionをleft
bottom
上の中央に配置はbackground-positionをtop
center
画像をスクロールさせる場合はbackground-attachmentをscroll
|
