デジタルカメラやケータイ電話内蔵カメラなど、最近では以前より手軽にカメラを持ち運べるようになりましたね。
皆さんも日々の光景などをカメラに収めたりしているのではないでしょうか？

デジタルカメラで撮った写真とケータイで撮った写真とサイズがまちまちな時がありますよね？
それをわざわざ画像編集ソフトなどでサイズの調整などをしていたら、面倒ですし、なによりソフトを入手しなくてはならない・・・。
　ご安心を。
HTMLとCSSではちゃんと画像のサイズを指定出来るのです。
これを覚えておけば、狙った通りのサイズで写真を載せられます。 <img src="reidai01.gif" width="100" height="100"> 　ホームページを写真で飾ってみようにて紹介いたしました<img>タグです。
何やら少し様子が違いますね？
widthとheightが付いています。
これは一体どういう意味でしょうか？

widthは、先ほどのborderの所にも出てきましたね。
幅と言う説明をしましたが詳しく言うと横幅です。
英語で横幅と言う意味です。ウィズス（ウイズス？）って読みます。
そしてheightはお気づきの通り高さです。ハイトって読みます。

ここで注意したいのは、単位をつけてはいけないと言う所です。
HTMLタグに高さや幅を直接指定する場合は、単位をつけてはいけません。
　なんで？と言われても困ります。そう言う決まりです。
ちなみに単位はピクセルです。

　続いて、CSSの方での指定の仕方。 img{
width:100px;
height:100px;
} まぁやってる事は同じなんですけど・・・。
こちらでの注意は、単位を付けなくてはいけないと言う所です。
ややこしいですねぇ。
でも仕方ありません。決まりなのですから・・・。 <img src="reidai01.gif" width="100" height="100"> <img src="reidai01.gif" id="img_reidai"> #img_reidai{
width:100px;
height:100px;
}
結果は同じなので、どちらでも良いと思います。
2011年現在、HTMLのレイアウトや表示情報などはすべてCSSで行う事が推奨されているそうですが、このwidthとheightに関しては現在も使われ続けています。
そこの所が謎なのですが、まぁそこまで気にしないでも良いんじゃないでしょうか。と言うのが私の見解です。

ホームページをよりオリジナリティ溢れる物にしたいのでしたら、 背景に画像を使ってみてはいかがでしょうか？
まずは背景に使いたい画像を用意します。
ご自分で描ける方はその方が良いのですが、描けない方は諦めるしか無いのか・・・。
　いいえ。そんな事はありません！
便利な便利なインターネット、無料で絵を使わせてくださる所がございます。
そんなサイトを調べて頂いてきましょう。
もちろん無断での使用はダメですよ。ネットにあるからと言って、著作権が無いと言う訳では無いのですから。

　私は面倒なので自分で適当な絵を描いてきました。
これを背景に指定しましょう。 body{
background-image:url("haikei.gif");
color:#ffffff;
} CSSにこの様に記述します。 背景が変な絵に！ 　私の例では上の枠内だけですが、bodyに指定すればページ全体に適用されます。
例えば、縦方向だけ連続させて表示させたい場合にはこう記述します。 body{
background-image:url("haikei.gif");
background-repeat:repeat-y;
color:#ff0000;
} 縦方向にだけ
変な絵が
表示されている！ 横方向は body{
background-image:url("haikei.gif");
background-repeat:repeat-x;
color:#ff0000;
} 横方向にだけ
変な絵が
表示されている！ 　高さが短いので解りづらいかも知れませんが、ご自分で試してみるとすぐに効果の程が解ると思います。

　いちいちbackground-imageとかbackground-repeatとか書くのが面倒。
そんな貴方に朗報！
実はborderの所で出て来た一気に指定するやり方が、backgroundでも可能なのです。
body{
background:url("haikei.gif") no-repeat #000000;
} このような感じに。
background-imageとbackground-repeatとbackground-colorを
一度に指定しました。
　この他にもあるのですが大体使うのはこんな所なので、ご自分でお調べください。
ちなみにno-repeatは読んで字のごとく、繰り返さないと言う意味です。

オブジェクトと言うのは物と言う意味です。
HTML文書の中にあるタグはすべてオブジェクトと考えられます。
例えば
<p class="obje01">一つ目のオブジェクト</p>
<p class="obje02">二つ目のオブジェクト</p>
これは二つのオブジェクトになります。
オブジェクトの連続でHTML文書は作られていると言う事が言えます。
htmlタグもbodyタグもすべてオブジェクトと考えられます。
　オブジェクトとオブジェクトの間隔を指定する事が出来ます。
そのプロパティがこちらです。 .obje01{
margin:10px;
background:#ff0000;
width:100px;
height:100px;
}
.obje02{
background:#00ff00;
width:100px;
height:100px;
} marginプロパティです。
実際にどうなるのか、見てみる事にしましょう。解りやすいように背景色を変え、高さと幅を指定してみました。 <div class="obje01">一つ目のオブジェクト</div>
<div class="obje02">二つ目のオブジェクト</div> 　お解りいただけたでしょうか？
赤い背景の「obje01」と緑色の背景の「obje02」の間隔が空いているのが解るでしょうか？
marginでは上下左右の間隔を離す事が出来ます。
もちろん、margin-topなどで、上下左右を個別に指定する事も出来ます。
marginでの上下左右の指定の仕方をご紹介します。 .obje03{
margin:-30px 50px 0px;
background:#0000ff;
color:#ffffff;
width:100px;
height:100px;
} 上が−３０px、左右が５０px、下が０pxと指定しました。
二つ書いた時は上下・左右の指定になります。
三つ書いた時は上・左右・下の指定になります。
四つ書いた時は上・右・下・左の指定になります。
　必ずこの順番なので、記述する際は気をつけましょう。 数値をマイナスにすると重ねる事も出来ます。

　中身の間隔を指定する事も出来ます。
先ほどのオブジェクトに追加してみましょう。 .obje04{
margin:-30px 50px 0px;
background:#0000ff;
color:#ffffff;
width:100px;
height:100px;
padding:10px;
} 　青色のオブジェクトの中のテキストの間隔が少し離れました。
margin（マージン）は外側との間隔、padding（パディング）は内側の間隔と言う感じに覚えたら良いと思います。