A.T-MOON

contents

パンくずリスト



背景の指定@(スタイルシート編)

メッセージエリア

要素{背景関連の属性:属性の値;}もしくは
<要素 style="背景関連の属性:属性の値;>〜</要素>が基本的な形となります。
このタグを使って指定要素の背景を指定していきます。

スタイルシートでの背景関連の属性
  • background-color … 背景色の指定
  • background-image … 背景画像の指定
  • filter … フィルターの指定
  • border … 枠線の指定
背景色の指定(ページ全体)

埋め込み: body {background-color:A;}


Aにはページ全体に指定する背景色のカラーコードカラーネームを記述します。

※例)
(枠内をページ全体と考えて下さい。)
ページ全体の背景色がピンク色に指定されています。
<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートでページ全体の背景色を指定</title>
  <style type="text/css">
  <!--
   body {
   background-color:pink;
   }
   -->
  </style>
 </head>
 <body>
 <font color=red>※例</font><br>
 ページ全体の背景色がピンク色に指定されています。
 </body>
</html>
↓ピンク部分のタグをコピー↓
<head>〜</head>の間に記述して下さい
ページTOP
ひとつ前のページに戻る

背景に画像の指定(ページ全体)

埋め込み: body {background-image: url("A");}


Aにはページ全体の背景に指定する画像ファイルのURLを記述します。

※例)
(枠内をページ全体と考えて下さい。)
ページ全体の背景に
指定した画像がタイル状に表示されます。
<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートでページ全体の背景に画像を指定</title>
  <style type="text/css">
  <!--
   body {
   background-image: url("画像ファイルのURL");
   }
   -->
  </style>
 </head>
 <body>
 <font color=red>※例</font><br>
 ページ全体の背景に<br>
 指定した画像がタイル状に表示されます。
 </body>
</html>
↓ピンク部分のタグをコピー↓
<head>〜</head>の間に記述して下さい

背景画像の枚数や位置などの指定を行う場合は【画像】→【背景として画像を表示】を参照して下さい。
コチラ→【背景として画像を表示】
ページTOP
ひとつ前のページに戻る

背景を半透明に指定(ページ全体)

埋め込み: body {filter: Alpha(opacity=50);}

※例)
(枠内をページ全体と考えて下さい。)
ページ全体の背景色半透明に指定されています。
<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートでページ全体を半透明に指定</title>
  <style type="text/css">
  <!--
   body {
   filter: Alpha(opacity=50);
   }
   -->
  </style>
 </head>
 <body>
 <font color=red>※例</font><br>
 ページ全体の背景色半透明に指定されています。
 </body>
</html>
↓ピンク部分のタグをコピー↓
<head>〜</head>の間に記述して下さい
ページTOP
ひとつ前のページに戻る

背景をグラデーションに指定

<body style="filter: progid:DXImageTransform.Microsoft.Gradient (startColorstr=A,endColorstr=B,GradientType=C)">〜</body>


Aには始まりの色をカラーコードカラーネームで記述します。
Bには終わりの色をカラーコードカラーネームで記述します。
Cにはグラデーションのかかる方向を01で記述します。0は縦方向で上から下へ、1は横方向で左から右へかかります。

※例)
(枠内をページ全体と考えて下さい。)
ページ全体の背景色に白→グレイのグラデーションが
横方向に左から右へかかります。
<html>
 <head>
  <title>ページ全体の背景をグラデーションに指定</title>
 </head>
 <body style="filter: progid:DXImageTransform.Microsoft.Gradient (startColorstr=white,endColorstr=gray,GradientType=1)">
 <font color="red">※例</font><br>
 ページ全体の背景色に白→グレイのグラデーションが<br>
 横方向に左から右へかかります。
 </body>
</html>
↓ピンク部分のタグをコピー↓
<body>の記述を変更します。
ページTOP
ひとつ前のページに戻る

背景に枠をつける

<body style="border:solid A B">〜</body>


Aには枠線の太さを実数px(ピクセル)などで記述します。
Bには枠線の色をカラーコードカラーネームで記述します。

※例)
(枠内をページ全体と考えて下さい。)
ページ全体に30px幅のブルーの枠がつきます。
<html>
 <head>
  <title>ページ全体に枠をつける</title>
 </head>
 <body style="border:solid 30 blue">
 <font color="red">※例</font><br>
 ページ全体に30px幅のブルーの枠がつきます。
 </body>
</html>
↓ピンク部分のタグをコピー↓
<body>の記述を変更します。
ページTOP
ひとつ前のページに戻る
スタイルシートindex 背景の指定A(スタイルシート編)