So-net無料ブログ作成

背景 1 [CSS 背景]

今回は背景について説明したいと思います。

背景の設定は2種類あります。
1つは色、もう1つは画像の設置です。
設定は下記のようになります。

<色の設定の場合>
<span style="background-color:色の名前">時よ止まれ</span>
例 時よ止まれ
<span style="background-color:orange">時よ止まれ</span>

<画像の設定の場合>
<span style="background-image:url(ファイルの名前);">時よ止まれ</span>
例 時よ止まれ
<span style="background-image:url(/_images/blog/_c4a/dio-the-world/stripe2.jpg)">

ファイルの名前には、url(の次に記事作成の下のファイル一覧から背景にしたい画像を選択する。
<a href="/_images/blog/_c4a/dio-the-world/stripe2.jpg" target="_blank">
<img src="/_images/blog/_c4a/dio-the-world/m_stripe2.jpg" width="350" height="87"
 border="0" align="" alt="stripe.jpg" /></a>と出るので
赤字の部分だけを残し、後は消去する。

画像は必ず全て表示されるわけではありません。
背景画像の詳細設定は次回に説明します。

これは、この時よ止まれという部分に

stripe.jpg
上の画像を背景に用いました。
いままで区間にCSSを適用する際には
<span>~</span>を使用してきましたが
次に<div>~<div>を紹介したいと思います。

<span>も<div>も区間を表すタグですが
<DIV> と <SPAN> の違いは,
前後に改行を伴うか,伴わないかです。

この記事を見ていただければお分かりになると思いますが
前半部分はlightgreenにて
後半部分は/_images/blog/_c4a/dio-the-world/stripe2.jpgというファイルにて
背景を埋めております。

<span>タグが一部分なのに対し<div>タグは
枠全体に影響します。 
両方を組み合わせることによって、オリジナルの
ページの作成も可能です。

記事中のタグに関わる文字(< >含むは全て半角です)
<div>タグを使うと自動改行にならないようなので<pre>タグが必要みたいです。
見づらい画像を使用してしまって申し訳ございません。

時よ止まれ(2)  コメント(4)  トラックバック(0) 

時よ止まれ 2

コメント 4

tamanossimo

おぉ~!!
ストライプも好きです~!!
by tamanossimo (2010-06-08 02:53) 

uryyyyyy

tamanossimoさん、こんばんは。

画像どうぞ使って下さい。
背景に画像を挿入すると
全く感じが変わりますからね。

画像の透明度を多くしないと
肝心の記事が読みづらくなるという
欠点はありますけど。

是非挑戦してみて下さいね。
by uryyyyyy (2010-06-08 20:37) 

某ドカタ


Hしてお金もらえるって最高だな!!!!
ぶっちゃけテキトーにやっても月30万越えとか余裕だし(笑)

もう仕事辞めて、これ一本で食ってくわ!!!!(* ̄ー ̄)v
http://dcrcdku.fukushima.coresy.net/dcrcdku/
by 某ドカタ (2011-04-02 17:07) 

春野


出会いの季節っしょ♪
一人暮らしの女とかマジですぐポンポン落ちておもしれーww
お姉さん美味しかったです(^q^)
http://20bhh5-.www.sofban.info/20bhh5-/
by 春野 (2011-04-09 11:34) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました
URYYYYYY

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。