素材共同組合
素材共同組合とは　｜　素材を求める方へ　｜　厳選バナーリンク　｜　著作権とは　｜　お誕生日カード　｜　素材屋さん応援リンク
素材共同ホーム
学校素材リンク集
新着サイト
更新サイト

スタイルシート

HTML４．０から細かいレイアウトなどはスタイルシートで設定することが推奨されているようです。スタイルシートはいろいろ便利な機能を持っていますが今回は背景に絞って説明します。スタイルシートで背景を設定するとセンスのいいページデザインが可能になります。

１．スタイルシートで背景を設定

　次の部分を自分のページの<HEAD>〜</HEAD>の間の赤色の部分をに入れて見てください。

<HTML>
<HEAD>

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif");}
-->
</STYLE>

</HEAD>
<BODY>

</BODY>
</HTML>

　BODY {background-image:url("ydaruma1.gif");} 　はBODYの背景画像にydaruma1.gifを設定することを意味しています。

※("　　")に好きな画像ファイルを指定すれば画面全体に背景画像を繰り返して設定できます。

上のスタイルを設定したHTMLを見ると次のようになります→　スタイルサンプル１

２.．スタイルシートで背景画像を1回だけ設定　（繰り返さない）

次の赤部分を追加する。

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif";);background-repeat:no-repeat;}
-->
</STYLE>

追加したHTMLを見ると次のようになります→　スタイルサンプル２

３．背景の位置を指定する

(1)中央に1回だけ背景画像を設定する

次の赤部分を追加する。

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif"); background-repeat:no-repeat;
background-position:center;}
-->
</STYLE>

追加したHTMLを見ると次のようになります→　スタイルサンプル３

(2)右下に1回だけ背景画像を設定する

次の赤部分を変更する。

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif"); background-repeat:no-repeat;
background-position:right bottom;}
-->
</STYLE>

追加したHTMLを見ると次のようになります→　スタイルサンプル４

位置を決めるキーワードは　left （左）　center（中央）　right(右）　top(上）　bottom(下）　があり、例えば左の中央にしたい場合は　left center　と半角スペースで区切り設定する。（centerは水平、垂直方向共通）このキーワードの組み合わせで背景画像の次の９カ所の位置を設定できる。

center（中央）　left top（左上）　left center（左中央）　left bottom（左下）　center top（中央上）
center bottom（中央下）　right top（右上）　right center（右中央）　right bottom（右下）

４．背景画像を固定する

右下に背景画像を設定したものに次の赤部分を設定する。

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif"); background-repeat:no-repeat;
background-position:right bottom; background-attachment:fixed;}
-->
</STYLE>

追加したHTMLを見ると次のようになります→　スタイルサンプル５

※スクロールしても背景画像は固定され動きません。

５．背景を縦に並べる

サンプル２の状態を次のように変更してみよう

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif"); background-repeat:repet-y;}
-->
</STYLE>

変更したHTMLを見ると次のようになります→　スタイルサンプル６

６．背景を横に並べる

サンプル２の状態を次のように変更してみよう

<STYLE type="text/css">
<!--
BODY {background-image:url("ydaruma1.gif"); background-repeat:repet-x;}
-->
</STYLE>

変更したHTMLを見ると次のようになります→　スタイルサンプル７

　画像ファイルの種類 → HTMLの画像表示 → 素材のダウンロードの仕方 →
　HTMLで背景画像を表示 → スタイルシートを使う → MIDIを流す　
画像・MIDIについて

画像ファイルの種類
HTMLの画像表示
素材のダウンロードの仕方
HTMLで背景画像を表示
スタイルシートを使う
MIDIを流す


ピックアップコンテンツ　

素材共同組合サイトマップ
著作権とはなんだろう
利用規程を作ろう
君も素材屋になろう
組合イメージムービー（組合の意味）
厳選バナーリンク(ベスト素材サイト）
　
お勧めレンタルサーバー　

★可愛いレンタルサーバLOLIPOP!
月額125円からのレンタルサーバ