上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 簡単にブログを飾る方法の一つに、「背景画像」を使うモノがあります。
 絵心がある方であれば、これを駆使するだけで、高品質のテンプレートを組み立てることも出来る大事な要素です。
 ウェブ上でダウンロードした画像を使う場合は十分注意してください。日本では特に、著作者が画像をどこかで発表した瞬間に、著作権や肖像権などが発生し、その画像の著作権は法律で守られます。



書き方


直接HTMLへ

 基本的なスタイルシートの書き方は…

<div style="background : url('http://~~.jpg') ;">
テキスト文字やボックスなどが入る場所
</div>

 このような形になります。
 注意点は「”」と「’」を使い分けることです。基本的にスタイルシートはもちろん、スクリプトでも何でも「”」の中に「”」を入れ子にすることはできないので注意。「”」の中に何かを入れ子にするには「’」を使います。
「"」はキーボードの「Shift」+「2」
「'」はキーボードの「Shift」+「7」



クラス(旗印)から

 もちろん、スタイルシートファイルに「クラス(旗印)」を使って書くこともできます。

HTMLCSSファイル
<div class="haikei">
テキストやボックス
などが入る場所
</div>
.haikei {
background : url("http://~~.jpg") ;
}



プロパティ(命令文)の中身


<div style="background : url('http://~~.jpg') ;">
テキスト文字やボックスなどが入る場所
</div>

 内訳は、青字が「背景を指定します」という命令文、赤字が「画像のURL(*1)」となります。


位置の指定

 そして、背景画像の配置位置も設定できます。
 プロパティ(値)は
left左寄せ
centerセンタリング
right右寄せ
top上寄せ
centerセンタリング
bottom下寄せ
数値で~%、~px等

 書き方は、半角スペースで区切ります。
background:url("http://~") left top;
background:url("http://~") ~% ~%;
半角スペース半角スペース

 数値を指定する場合は「水平方向の位置」「垂直方向の位置」の順に指定します。
*ただ、数値の場合は見る人のパソコン環境に依存するので、自分のパソコンではバッチリ見えていても、相手のパソコンだと…の場合もあるかもしれません。


リピート

 背景画像は、「リピート表示」出来る仕様になっていて、ほとんどのブラウザで、タイルのようにボックス内を画像を繰り返し表示し埋め尽くしてしまいます。
 それを指定するには、以下の値を命令文を半角スペースで区切って付け加えます。
repeatリピート表示
no-repeatリピート表示なし
repeat-x水平方向のみリピート
repeat-y垂直方向のみリピート

 すべてを指定した例文。半角スペースで区切りに注意してください。

background : url("http://~") left top repeat ;



ほとんどのタグに背景を指定出来る

 もちろん、他のスタイルシートと同様に、ほぼどのようなタグに対しても「バックグランド」は指定することができます。
「<div>」「<span>」はもちろん、「<strong>」「<a>」「<table>」「<p>」などなどなど。


実際に表示確認してみる(編集可)
【HTML】

【CSS】



●実際にバックグランド画像を作ってみよう!
WEB背景用の切れ目のない画像の作り方
出来たテクスチャから連続した背景画像を作る
テクスチャ | CUTIE PHOTOSHOP・キューティーフォトショップアート



 次のページはコチラから。
バックグランド・GIF画像を使った応用デザイン

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Tue.04.20.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。