HTML/XHTML&CCS010（background-image,background-repeat,background-position,float,clear）

★CSS

●background-image

・・・背景画像の表示です。（※background-colorよりも優先されます。）
書き方は
{ background-image: url( 画像のパス);} です。
あくまで画像のパスなので、階層がある場合は画像のファイル名を入れてもだめです。

●background-repeat

・・・背景画像の繰り返しです。
{ background-repeat: repeat;}・・・縦横くり返しです。(※デフォルトでなってます。）
{ background-repeat: repeat-x;}・・・横をくり返しです。
{ background-repeat: repeat-y;}・・・縦をくり返しです。
{ background-repeat: no-repeat;}・・・くり返し無しです。

●background-position

・・・背景画像の表示位置です。
考え方として{ background-position: x座標 y座標 ;}みたいな感じです。
値の種類は、
x座標はleft,center,right,pxがあります。pxだと、例えば-3pxだと左へ3px背景画像が移動します。3pxだと右へ3px背景画像が移動します。
y座標はtop,center,bottom,pxがあります。pxだと、例えば-3pxだと上へ3px背景画像が移動します。3pxだと下へ3px背景画像が移動します。（※少しややこしいけど覚えましょう。）
※pxで指定することは、あんまりないそうです。
デフォルトで{ background-position: left top ;}的なものになっています。

メニュー

●醤油ラーメン

●塩ラーメン

●味噌ラーメン

●とんこつラーメン

上のラーメンゾーンのソースは、
<div id="ramen">
<h3 id="button">メニュー</h3>
<p>●醤油ラーメン</p>
<p>●塩ラーメン</p>
<p>●味噌ラーメン</p>
<p>●とんこつラーメン</p>
</div>
です。
ラーメンゾーンのCSSは、
メニューボタン：
h3#button {
background-image: url(http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347456692);
background-repeat: no-repeat;
padding-left: 20px;
}
ラーメンイメージ：
div#ramen {
background-image: url(http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347460117);
background-repeat: repeat;
background-position: center top;
}
です。

●float

・・・右寄せ、左寄せ
書き方は、
{ float: left;}・・・左寄せです寄せです。
{ float: right;}・・・右寄せです。
{ float: none;}・・・無しです。

●clear

・・・回り込み解除です。
書き方は、
{ clear: left;}・・・左のみ回り込み解除です。
{ clear: right;}・・・右のみ回り込み解除です。
{ clear: none;}・・・回り込みを解除しないです。
{ clear: both;}・・・左右どちらでも回り込み解除です。（※ほとんどこれしか使いません。）

こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。

↑上の画像と文のソースは
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫" />こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。</p>です。

こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。

です。

↑上の画像と文のソースは
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫" class="cat01" />こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。</p>です。

CSSでfloatを右寄せに設定してます。CSSの記述は。
img.cat01 {
float: right;
}

↓先生お勧めのサイトシーイング
ANESSA
TUBAKI
アクアレーベル
資生堂の化粧品のサイトです。
↓資生堂の大元？のサイトもリンクしときます。このサイトから上でリンクしてあるサイトにとべます。
ワタシプラス