タダでインターネットでお小遣いを稼ぎましょう！

タダでインターネットでお小遣いを稼ぎましょう！

スポンサードリンク
はじめての方へ
 

スタイルシート

前のページへ
 
スタイルシート　「背景」

 
スタイルシート　「背景」

背景色を指定する   ↓

それぞれの要素の背景色を指定します

background-color: ★

<head> 〜 </head>内に記述

<style type="text/css">
<!--
body	{ background-color: #ffa07a }
h1	{ background-color: #ff0000;
	color: #ffffff
}
div	{
	width: 700px;
	padding: 10px;
	font-size: 13px;
	line-height: 2em;
	background-color: #ffffcc
}
span	{
	border: 2px dotted #ff0066;
	background-color: #66cdaa
}
-->
</style>

<body> 〜 </body>内に記述

<h1>タイトル</h1>
<div>コメント
<span>コメント</span>コメント
<span>コメント</span>
</div>

サンプル

このページの上へ

背景画像を指定する   ↓

背景に画像を表示させます

background-image: ★
 
表示させる画像の URL を下記のように記述します
background-image: url("画像の URL");

<head> 〜 </head>内に記述

<style type="text/css">
<!--
body	{ background-image: url("画像の URL");
	background-color: #ffa07a
}
h1	{ background-color: #ff0000;
	color: #ffffff
}
div	{
	width: 700px;
	padding: 10px;
	font-size: 13px;
	line-height: 2em;
	background-image: url("画像の URL")
	background-color: #ffffcc
}
span	{
	border: 2px dotted #ff0066;
	background-color: #66cdaa
}
-->
</style>

<body> 〜 </body>内に記述

<h1>タイトル</h1>
<div>コメント
<span>コメント</span>コメント
<span>コメント</span>
</div>

サンプル

このページの上へ

背景画像を固定する   ↓

スクロールしたときに背景画像を移動させるか、固定させるかを指定します

background-attachment: ★
 
fixed→背景画像を固定
scroll→スクロールと共に移動

<head>内の<style> 〜 </style>内に記述

body	{ background-image: url("画像の URL");
	background-attachment: fixed;
	background-color: #ffa07a
}

サンプル

このページの上へ

背景画像の位置を指定する   ↓

背景画像を表示したい位置を指定します

background-position: ★
background-position: ★ ★
 
px や % 、キーワードで指定
例えば10px 30pxと指定した場合、
左から10px、上から30pxの位置に画像の左上を揃えて表示されます
1つのみ指定した場合、水平方向の位置を指定したことになり、
垂直方向は50%に設定されます
 
top→上
center→真ん中
bottom→下
left→左
right→右
 
※指定した位置を基準にして繰り返し表示されるので、
一点だけ表示したい場合は background-repeat属性でno-repeatを指定します

<head>内の<style> 〜 </style>内に記述

body	{ background-image: url("画像の URL");
	background-repeat: no-repeat;
	background-position: ★ ★
}

サンプル

このページの上へ

背景画像の繰り返し方法を指定する   ↓

背景に画像を使用する場合、通常は画像が連続して表示されますが、
background-repeatで連続して表示させるかどうか、
どのように連続させるのかを指定します

background-repeat: ★
 
repeat→画面全体に繰り返し表示
repeat-x→横方向にのみ繰り返し表示
repeat-y→縦方向にのみ繰り返し表示
no-repeat→画像を一点のみ表示

<head>内の<style> 〜 </style>内に記述

body	{ background-image: url("画像の URL");
	background-repeat: ★;
	background-color: 背景色
}

サンプル

このページの上へ

背景を一括指定する   ↓

背景に関する指定を一括指定します

background: ★ ★ ★ ★ ★
 
color→背景色
image→背景画像
repeat→背景画像の繰り返し
attachment→背景画像のスクロール
position→背景画像の位置

<head>内の<style> 〜 </style>内に記述

body	{ background: #ffc0cd url("画像の URL")
 fixed repeat-y }

div	{
	width: 700px;
	padding: 10px;
	font-size: 13px;
	line-height: 2em;
background: #ffe4b5 url("画像の URL") repeat-y right
}

p	{
	text-align:center;
	font-weight: bold;
	color: #800000;
	background: #e6e6fa url("画像の URL")
}

サンプル

 

このページの上へ