CSSボタンの作成に続いて，画像を使用したボタンの作成について記述します．
イメージは上記のサンプルページを参照して下さい．

基本的にはCSSボタンの作成と同様の処理ですが，それぞれのアクションに背景画像を使用し，これを切り換えることで画像を使用したボタンを作成します．
アニメーションgif画像を使用すると，アニメーションのあるボタンの作成なども可能です．

まずは，HTMLの確認．body→siteheader→nav→ul→li→aタグに画像ボタンを設定します．

!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<header id="siteheader">
		<h1>GRAPHIC DESIGN</h1>
			<nav>
				<ul>
					<li class="button01"><a href="http:kiso2.info" target="_blank"></a></li>
					<li class="button02"><a href="#"></a></li>
					<li class="button03"><a href="#"></a></li>
				</ul>
			</nav>
	</header>
</body>
</html>

次に使用するボタン画像をPhotoshopで作成します．
このサンプルでは3種類のボタンにそれぞれのアクションをつけ，
計6種類のボタンを用意しました．データはそれぞれ個別で保存しておきます．
ex: textBt01_d.png（初期状態），textBt01_f.png（フォーカス状態）

最後にCSSの確認です．

/*********************************リンクボタンの設定*/
/*02*/
.button01 a{
	display:block;
	width:220px;
	height:90px;
	background-image:url("textBt01_d.png");
	background-repeat:no-repeat;
}
/*未訪問のリンク*/
.button01 a:link{
}
/*訪問済みのリンク*/
.button01 a:visited{
}
/*マウスホバー時*/
.button01 a:hover{
	background-image:url("textBt01_f.png");
}
/*選択中*/
.button01 a:active{
}
/*02*************************************************/
.button02 a{
	display:block;
	width:220px;
	height:90px;
	background-image:url("textBt02_d.png");
	background-repeat:no-repeat;
}
/*未訪問のリンク*/
.button02 a:link{
}
/*訪問済みのリンク*/
.button02 a:visited{
}
/*マウスホバー時*/
.button02 a:hover{
	background-image:url("textBt02_f.png");
}
/*選択中*/
.button02 a:active{
}
/*03*************************************************/
.button03 a{
	display:block;
	width:220px;
	height:90px;
	background-image:url("textBt03_d.png");
	background-repeat:no-repeat;
}
/*未訪問のリンク*/
.button03 a:link{
}
/*訪問済みのリンク*/
.button03 a:visited{
}
/*マウスホバー時*/
.button03 a:hover{
	background-image:url("textBt03_f.png");
}
/*選択中*/
.button03 a:active{
}

画像を使用したCSSボタンではそれぞれに（button01, button02, button03）CSSでアクションを使用していきます．
このサンプルでは a:hover の際に画像を切り換え表示するかたちをとっています．

［注意点として］
デフォルト状態での指定で画像のサイズをしっかりと記述すること．（横 width:220px, 縦 height:90px）Photoshop等で画像サイズ（ピクセル）を確認し記述して下さい．

画像を読み込む際は background-image:url(“画像ファイルのパス”)を使用します．［画像ファイルのパス］は自分がどこに画像を置いているのか（htmlとどう階層なのか，ファルダを作っておいているのか［サブディレクトリ］）確認し記述して下さい．

background-repeat:no-repeatは画像のリピートをなしに指定する記述です．リピートさせたくない時はこれを記述して下さい．

「画像サイズの記述」と「画像のファイルパス」は入力のミスが多いので特に気をつけましょう！！

ここでは，CSSを使用したマウスアクションのあるボタンの作成について記述します．
イメージとしては上記のサンプルを参照して下さい．マウスホバーでリンクに背景と文字色を変更します．
以下のコードの bodyタグ内のsiteheader, nav, ul, aタグにボタンアクションをCSSで付けていきます．
まずは，HTMLの確認．

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<header id="siteheader">
		<h1>GRAPHIC DESIGN</h1>
		<nav>
			<ul>
				<li><a href="http:www.google.com" target="_blank">NEWS</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">WORK</a></li>
				<li><a href="#">PUBLICATION</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

つづいてCSSです．記述はボタン部分の処理のみです．

#siteheader nav ul li a{
	text-decoration:none;
	color:#FFF;
	padding: 5px 300px 5px 50px;
}
/*未訪問のリンク*/
#siteheader nav ul li a:link{
	color:#FFF;
}
/*訪問済みのリンク*/
#siteheader nav ul li a:visited{
	color:#FFF;
}
/*マウスホバー時*/
#siteheader nav ul li a:hover{
	background-color:#FF0;
	color:#0F0;
}
/*マウスクリック*/
#siteheader nav ul li a:active{
	background-color:#F00;
	color:#FFF;
}

idを付けているターゲットとなるsiteheader nav ul li aに上記のようにそれぞれにアクションを付けます．上記の記述，a, a:link, a:visited, a:hover, a:activeの5種類は使用しなくとも記述するようにしましょう．

a　リンクのデフォルト表示の指定．text-decorationはリンクデフォルトの下線などを消します．
a:link　未訪問状態のリンクの表示設定です．
a:visited　一度訪問したリンクの表示設定です．
a:hover　マウスホバーの際のリンクの表示設定です．
a:active　マウスをクリックした際のリンクの表示設定です．

上記では，初期表示の際テキストカラーを白（color:#FFF）に設定し，マウスホバーの際にテキストカラーを緑（color:#0F0）に変更と背景色を黄（background-color:#FF0）にしています．マウスクリックの際に文字色を白（color:#FFF）に背景色を赤（background-color:#F00）にしています．

それぞれにカラーや背景色を入力･変更し状態を確認した上で，使用してみて下さい．

プラグインを読み込む際はheadタグの終了直前でscriptタグを使用して記述します．
まず1行目で[jquery.min.js]（jQuery）を読み込みその後に[jquery.lazyload.min.js]
を読み込み使用する準備が完了します．

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>

つづいてフォルダ構造の確認です．
jsフォルダ以下に下記のファイルがあるか確認しておきましょう．

<script type="text/javascript">
	$('img').lazyload({
		effect: 'fadeIn',
		effectspeed: 2000
	});
</script>

[jquery.lazyload.min.js]読み込み後のscriptタグではlazzyloadの初期設定を行います．ここではimgタグに対して遅延ロードを行うように設定しています．
effectはロードの際のアニメーション，effectspeedは読み込みの速度です．

今回のサンプルで画像はデフォルト表示用のサムネイル画像（小さい画像）と本画像（クリック後の大きい画像）を用意します．（上記のフォルダ構造を確認）

<div>
	<a href="img/works_img/01.jpg">
		<img class="lazy" src="img/thumb/loader.jpg" alt="thumb01" width="250px" data-original="img/thumb/01.jpg" />
	</a>
</div>

上記は実際に遅延ロードを行いたい画像に対しての設定です．
このサンプルでは，ボックス（divタグ）の中にリンク（aタグ）を用意しその中にサムネイル（imgタグ）を配置している状態です．aタグのhrefではサムネイルクリック後に表示する本画像を指定しています．
imgタグのセレクタのclassにlazyと記述することで，プラグインの使用を認めます．

※注意すべき点は，srcでダミー画像を指定し，data-originalでサムネイル画像を指定することです．srcのダミー画像はフェイドインする前に表示するための画像を指定します．（ローディング用画像）data-originalはローディング後に実際に表示する画像となります．

以上の指定でlazzyloadを使用することが出来ます．

このサンプルでは，左のナビゲーションをクリックすると，ABOUT, WORKS, CONTACTと移動しますが，その際のアニメーションの効果にeasingのエフェクトを使用しています．いちど多めに移動し戻るような動作をしています．

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

使用する際はheadタグの終了直前でscriptタグを使用して記述します．まず1行目で[jquery.min.js]（jQuery）を読み込みその後に[jquery.easing.1.3.jp]を読み込み使用する準備が完了します．

<script type="text/javascript">
	//起動前の設定//
	$(document).ready(function(){
		$('body').animate({opacity: "0"},0);
		// #で始まるアンカーをクリックした場合に処理
		$('a[href^=#]').click(function(){
			// スクロールの速度
			var speed = 1000; // ミリ秒
			// アンカーの値取得
			var href= $(this).attr("href");
			// 移動先を取得
			var target = $(href == "#" || href == "" ? 'html' : href);
			// 移動先を数値で取得
			var position = target.offset().top;
			// スムーススクロール
			$("html, body").animate({scrollTop:position}, speed, "easeOutBack");
			return false;
		});
	});
</script>

つづいてのscriptタグの記述はaタグでid指定している箇所にスクロールアニメーションを行うための記述です．
16行目の末尾”easeOutBack”がeasingの処理になります．この部分に”イージングの処理”を記述して効果を変更していきます．

例:（効果をeaseOutBackからeaseInOutQuadに変更）

$("html, body").animate({scrollTop:position}, speed, "easeOutBack");

↓

$("html, body").animate({scrollTop:position}, speed, "easeInOutQuad");

easingの指定と効果は以下のページで確認してください．
参考ページ：http://semooh.jp/jquery/cont/doc/easing/

<script src="js/jquery.min.js" type="text/javascript"></script>

使用するためにはまずheadタグ終了の直前でjquery.min.js（jQuery本体）を読み込みます．
上記ではjsフォルダを作成しその中にjquery.min.jsを置いています．（※読み込む場所に注意：js/がこの記述です）

<script type="text/javascript">
	$(document).ready(function(){
		// #で始まるアンカーをクリックした場合に処理
		$('a[href^=#]').click(function(){
			// スクロールの速度
			var speed = 1200; // ミリ秒
			// アンカーの値取得
			var href= $(this).attr("href");
			// 移動先を取得
			var target = $(href == "#" || href == "" ? 'html' : href);
			// 移動先を数値で取得
			var position = target.offset().top;
			// スムーススクロール
			$("html, body").animate({scrollTop:position}, speed, "swing");
			return false;
		});
	});
</script>

直後にさらにscriptタグでスクロールの設定を行っています．上記ではaタグの#で始まるアンカーをクリックした際にそのidをもつ箇所にスムーズにスクロールするという記述です．

<li class="button"><a href="#about">ABOUT</a></li>
<li class="button"><a href="#works">WORKS</a></li>
<li class="button"><a href="#contact">CONTACT</a></li>

ナビゲーション（aタグ）の設定です．hrefに#id名を記述することで，このid名をもつ箇所にジャンプさせます．

<div id="contact">
	<h2>
		CONTACT<br/>
		─
	</h2>
	<div>
		<p>
			〒192-0394<br/>
			東京都八王子市鑓水2-1723<br/>
			TEL: 042-679-5623<br/>
			FAX: 042-679-5646<br/>
			<a href="mailto:gurafu@tamabi.ac.jp">Email: gurafu@tamabi.ac.jp</a><br/>
		</p>
	</div>
</div>

ナビゲーションで指定したid名をもつdiv要素を配置します．「div id=”contct”」これで関連づけが出来，スムーズにスクロールする実装が可能になります．

つづいて応用としてランダムに配置されたDIV要素に斜めに移動するサンプルです．
→サンプルページ02

$(document).ready(function(){
	// #で始まるアンカーをクリックした場合に処理
	$('a[href^=#]').click(function(){
		// スクロールの速度
		var speed = 1200; // ミリ秒
		// アンカーの値取得
		var href= $(this).attr("href");
		// 移動先を取得
		var target = $(href == "#" || href == "" ? 'html' : href);
		// 移動先を数値で取得
		var posTop = target.offset().top;
		var posLeft = target.offset().left-260;
		// スムーススクロール
		$("html, body").animate({scrollTop:posTop, scrollLeft:posLeft}, speed, "swing");
		return false;
	});
});

14行目の$(“html, body”).animateの後の箇所にカンマで区切りscrollLeft:posLeftを追加します．上下スクロールのみでなく，左右のスクロールの移動場所も追加したカタチです．

/*div04*/
#d{
	position:absolute;
	top:4000px;
	left:6000px;
	background-color:#FF0;
	width:1024px;
	height:728px;
}

CSSでdiv要素をランダムに配置します．サンプルではpostionをabsoluteで指定して，top, leftにランダムな数を記述しています．他のdiv要素にもそれぞれに適用してください．width・heightの大きさなども変化させても効果としては良いでしょう．

このサンプルページではサムネイル画像（縮小画像）と拡大用画像の2種類の画像を用意して，サムネイル画像をクリックすると大きな画像が表示されるという実装です．

●拡大表示画面

<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

使用するためにはまずheadの終了タグの直前でlightboxのCSSとjavascriptを読み込みます．lightBoxでは表示用に専用のCSSが必要です．これはポップアップのレイアウトに使用されています．
2行目でCSS（lightbox.css）を読み込み，3行目でjQuery（jquery.min.js）を読み込みます．（※jQueryはプラグインより先に読み込む必要があります．）4行目でlightbox.jsを読み込みます．
また，lightBox専用の画像も用意されているため，こちらも任意の場所（フォルダなど）に置く必要があります．フォルダ構造は下記を参考にして下さい．

●フォルダ構造（※ファイルパスの記述に注意）
lightBox用画像

lightBox用CSS

lightBox用JS

<div>
	<a href="img/works_img/01.jpg" rel="lightbox[group]">
		<img src="img/thumb/01.jpg" width="250px" alt="thumb01">
	</a>
</div>

最後にlightBoxで表示される画像を用意します．このサンプルでは，サムネイル画像と本画像の2種類を用意して，サムネイル画像をimgタグでレイアウトし，aタグで本画像を指定しています．
小さい画像をクリックすると大きい画像にジャンプするというかたちです．lightBoxを使用するには2行目aタグの中にプロパティ rel=”lightbox” と記述するだけで動作します．lightboxの後の[group]はオプションでこの[group]を記述した同様の画像類をまとめて表示するというものです．[ ]の間に任意でグループ名を記述します．

参考ページ：http://shanabrian.com/web/library/lightbox2.5.php

●フォルダ構造（jqueryの読み込み場所に注意）

<script src="js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
	//起動前の設定//
	$(document).ready(function(){
		//起動前にbody全体の透明度を0似設定する．
		$('body').animate({opacity: "0"},0);
	});
	//起動後の設定//
	$(window).load(function(){
		//起動後にbodyの透明度を1（100%）に徐々に変化させる
		$('body').animate({opacity: "1"},750);
	});
</script>

使用するにはheadタグ終了の直前でscriptタグを使用してjquery.min.js（jQuery本体）を読み込みます．3行目$(document).readyは起動前の処理です．ここでbody全体の透明度を0に設定し，透明にしておきます．8行目の$(window).loadの起動直後の処理でbodyの透明度を100％に設定します．上記でアクセス後にbody全体が徐々にフェイドインするアニメーションが実装できます．

	<script>ここにコードを記述する</script>

JavaScriptを使用するには上記のスクリプトタグを使用します．記述する位置は通常はheadタグの終了の直前でスタイルシートの読み込みよりも後に書きます．

［jQuery］
jQuery（ジェイクエリー）は，ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです．ジョン・レシグが，2006年1月に開催された BarCamp NYC でリリースしました．様々な場面で活用されており，JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいます．（wikipediaより）

<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<link href="css/styles.css" rel="stylesheet" type="text/css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
</head>

jQueryを使用する際にはまずjQueryの本体をスクリプトタグを使用して読み込みます．上記の例では「index.html」の同階層に「js」というフォルダを作成しその中にjQueryファイルを置いて，5行目でscriptタグを使用して読み込んでいます．（※ファイルパスに注意 src=”js/jquery.min.js”）

［jQueryプラグイン］
jQuery本体を読み込むことで使用できる様々なプラグインを指します．プラグインは様々な用途に合わせて各ユーザーが使いやすく作成したものです．使用する際は著作権やライセンスなどに注意して下さい．目的に合わせて使用するプラグインを探し使用していきます．

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LightBox Sample</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
	<header id="siteheader">
		<h1>LightBox Test</h1>
			<nav>
				<ul>
					<li class="button"><a href="#works">WORKS</a></li>
				</ul>
			</nav>
	</header>
	<div id="contents">
		<!--works-->
		<div id="works">
			<h2>
				WORKS<br/>
				─
			</h2>
			<div><a href="img/works_img/01.jpg" rel="lightbox[group]"><img src="img/thumb/01.jpg" width="250px" alt="thumb01"></a></div>
			<div><a href="img/works_img/02.jpg" rel="lightbox[group]"><img src="img/thumb/02.jpg" width="250px" alt="thumb02"></a></div>
			<div><a href="img/works_img/03.jpg" rel="lightbox[group]"><img src="img/thumb/03.jpg" width="250px" alt="thumb03"></a></div>
			<div><a href="img/works_img/04.jpg" rel="lightbox[group]"><img src="img/thumb/04.jpg" width="250px" alt="thumb04"></a></div>
		</div>
	</div>
</body>
</html>

→サンプルページ（サムネイルをクリックするとポップアップで表示）
jQueryプラグインを使用する際にはまずjQueryの本体を先に読み込む必要があります．その後目的のプラグインを読み込み，使用するプラグイン特有の設定を行い使用していきます．
上記は「LightBox」というプラグインの読み込みと設定です．scriptタグを使用して，8行目でjQuery本体を読み込み，9行目でlightBoxを読み込んでいます．（jsフォルダを作成しその中に両ファイルを置いています）．7行目ではlightBox特有のCSSを読み込んでいます．（閉じるボタン，矢印など）プラグインによってはCSSも読み込まなければ使用できないモノもあります．
読み込むだけでは何も起きません．使用するには27行目aタグを使用して，hrefで拡大画像を指定しています．aタグの入れ子でimgタグを使用してサムネイル画像を表示しています．lightBoxを使用するには，aタグにオプションで「rel=”lightbox”」と記述します．lightboxの後ろに[グループ名]を付けるとグループ化されてまとめて閲覧できるようになります．

［様々なjQueryプラグイン］
参考01：http://www.skuare.net/test/jQuery.html
参考02：http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2013-best.html

［floatを使用したレイアウト］
floatプロパティは，指定された要素を左または右に寄せて配置する際に使用します． 後に続く内容は，その反対側に回り込みます．
─
プロパティ
left：指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
right：指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
none：特に配置を指定しません。これが初期値です。
─
ex. float:right;

─
［layout_00］
基本のHTMLとCSS
→layout_00（サンプル）

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS layout</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>
	<body>
		<div class="box01">01</div>
		<div class="box02">02</div>
		<div class="box03">03</div>
		<div class="box04">04</div>
	</body>
</html>

headの終了タグの直前で下記のCSSを読み込む．divタグを使用し，box01-04をclassで指定する．

@charset "UTF-8";
/* CSS Document */
.container {}
.box01 {}
.box02 {}
.box03 {}
.box04 {}

CSSは一先ず未設定の状態．

─
［layout_01］
CSSで背景色を設定する．
→layout_01（サンプル）

.box01 {
	background:#00A0E9;
}
.box02 {
	background:#E4007F;
}
.box03 {
	background:#FFF000;
}
.box04 {
	background:#222222;
	color:#FFFFFF;
}

─
［layout_02］
CSSでdivのサイズ（ボックスサイズ）を指定する．
→layout_02（サンプル）

.box01 {
	background:#00A0E9;
	width: 200px;
	height: 200px;
}

他のボックスも[width, height]を使用してサイズを設定します．

─
［layout_03］
bodyのマージンの指定
→layout_03（サンプル）

	margin: 0px;
	padding: 0px;

●指定前

●指定後

初期値で入っている上下左右の「余白」が上記の設定で消える．

─
［layout_04］
div（ボックス）のpaddingを指定し，ボックス内側の文字列に余白を与える．
→layout_04（サンプル）

.box01 {
	background:#00A0E9;
	width: 160px;
	height: 160px;
	/*上下左右に20pixづつ余白を作る*/
	padding:20px;
}

box01にパディングを設定，box02は未設定の状態．

─
［layout_05］
div（ボックス）のサイズを揃える．
→layout_05（サンプル）

.box01 {
	background:#00A0E9;
	width: 180px;
	height: 180px;
	padding:10px;
}

paddingを使用した分，boxのサイズが大きくなっているため，余計に大きくなった分を計算しサイズダウンする．
上記では余白上下左右10ピクセルとっているため，元としているボックスサイズの200ピクセルのから10ピクセル×2の20ピクセルづつ引いた，180ピクセルをサイズとしている．

─
［layout_06］
CSSでdiv（ボックス）にfloatプロパティを指定しレイアウトを行う．
→layout_06（サンプル）

.box01 {
	background:#00A0E9;
	width: 180px;
	height: 180px;
	padding:10px;
	/*floatの設定*/
	float: left;
}
.box02 {
	background:#E4007F;
	width: 180px;
	height: 180px;
	padding:10px;
	/*floatの設定*/
	float: left;
}
.box03 {
	background:#FFF000;
	width: 180px;
	height: 180px;
	padding:10px;
	/*floatの設定*/
	float: left;
}
.box04 {
	background:#222222;
	width: 180px;
	height: 180px;
	padding:10px;
	/*floatの設定*/
	float: left;
}

すべてのboxにfloat:leftの設定を使用し左寄せのレイアウトを行う．
floatレイアウトは詰め込むイメージのレイアウトのため，ウインドウサイズが変更されれば，このサイズに適したレイアウトを行う．

─
［layout_07］
floatプロパティを指定を解除する．
→layout_07（サンプル）

.box04 {
	background:#222222;
	width: 180px;
	height: 180px;
	padding:10px;
	clear: both;
}

floatは一度指定を行うと，その後の要素も同様にfloatレイアウトになるため，解除するためには上記のclear:bothを使用する．
（改行したいボックスを作るためにはこの指定が必要です！）

─
［layout_08］
CSSでdiv（ボックス）にfloatプロパティを使用したベーシックなレイアウト．
→layout_08（サンプル）

<body>
	<div class="container">
	    <div class="box01">01</div>
	    <div class="box02">02</div>
	    <div class="box03">03</div>
	    <div class="box04">04</div>
	</div>
</body>

4つのdiv（ボックス）をひとつのdiv（ボックス[class=”container”]）でまとめて，親子関係を作る．この構造でCSSによる4つのボックス全体的な指定と個々のボックスの部分的な指定を可能とします．グループ化するイメージに近いです．

body {
	margin: 0px;
	padding: 0px;
}
.container {
	width:900px;
	/*左右の余白を均等に．センタリング*/
	margin: auto;
	background:#CCCCCC;
}
.box01 {
	background:#00A0E9;
	width: 900px;
	height: 300px;
	padding:10px;
}
.box02 {
	background:#E4007F;
	width: 580px;
	height: 380px;
	padding:10px;
	float: left;
}
.box03 {
	background:#FFF000;
	width: 280px;
	height: 380px;
	padding:10px;
	float: left;
}
.box04 {
	background:#222222;
	width: 880px;
	height: 180px;
	padding:10px;
	clear: both;
}

親のボックスcontainerではボックスの横幅とボックス全体のレイアウトの指定をしています．（margin:auto;は左右の余白を均等にする処理です）．
4つの個々のボックスは親のボックスの横幅（上記は900pix）にあわせて，横幅（width）を計算して配置しています．
サイズの処理が上手くないと親のボックスでは900pixを指定しているため，ガタガタしたレイアウトになってしまいますので注意して下さい．

●指定が上手くいかない場合
下記の画像の用にガタガタした組みになってしまう．

─
［postionプロパティの使用］
positionプロパティは，ボックスの配置方法（基準位置）が，相対位置か絶対位置かを指定する際に使用します。positionプロパティで指定するのは，配置方法（基準位置）のみです． 実際の表示位置の指定には，top, left, right, bottom を併用して，基準位置からの距離を設定します．
─
static：特に配置方法を指定しません．この値のときには top, bottom, left, right は適用されません．初期値です．
relative：相対位置への配置となります．
absolute：絶対位置への配置となります．親ボックスにpositionプロパティのstatic以外の値が指定されている場合には，親ボックスの左上が基準位置となります．親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には，ウィンドウ全体の左上が基準位置となります．
fixed：絶対位置への配置となるのはabsoluteと同じですが，スクロールしても位置が固定されたままとなります．

─
［layout_09］
CSSでdiv（ボックス05, 06, 07）にpositionプロパティを指定する．
→layout_09（サンプル）
●htmlにボックス（05, 06, 07）の追加

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS layout</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
    <div class="box01">01</div>
    <div class="box02">02</div>
    <div class="box03">03
    	<div class="box07">07 position: relative</div>
    </div>
    <div class="box04">04</div>
    <div class="box05">05 position: absolute</div>
    <div class="box06">06 position: fixed</div>
</div>
</body>
</html>

CSSで box04, box05, box06にpositionプロパティを使用．
ボックスの位置はtop, leftで指定する．

.box05 {
	background:#0000FA;
	width: 180px;
	height: 180px;
	padding:10px;
	/*postionプロパティの使用とtop, leftを使用したレイアウト*/
	position: absolute;
	top: 500px;
	left: 500px;
}
.box06 {
	background:#FA0000;
	width: 180px;
	height: 180px;
	padding:10px;
	/*postionプロパティの使用とtop, leftを使用したレイアウト*/
	position: fixed;
	top: 10px;
	left: 350px;
}
.box07 {
	background:#FAFAFA;
	width: 180px;
	height: 180px;
	padding:10px;
	/*postionプロパティの使用とtop, leftを使用したレイアウト*/
	position: relative;
	top: 100px;
	left: 50px;
}

─
［layout_10］
CSSでdiv（ボックス）の前後関係を指定する．
→layout_10（サンプル）

.box06 {
	background:#FA0000;
	width: 180px;
	height: 180px;
	padding:10px;
	position: fixed;
	top: 100px;
	left: 150px;
	/*前後関係の変更*/
	z-index:2;
}

前後関係を変更するにはz-indexのプロパティを使用します．
重なりの順序を整数で指定．0を基準として値が大きいものほど上になります．

─
［layout_11］
CSSでdiv（ボックス）に背景画像を設定する．
→layout_11（サンプル）

.container {
	width:900px;
	margin: auto;
	background:#CCCCCC;
	/*背景画像*/
	background-image:url("00.jpg");
	background-size: cover;
}
.box01 {
	background:#00A0E9;
	width: 880px;
	height: 180px;
	padding:10px;
	/*背景画像*/
	background-image:url("01.jpg");
	background-size: cover;
}

他のボックスも同様にbackground-imageを使用して画像を指定していく．

→参考PDF

src=”画像のURL” 表示する画像のURIを指定
img要素には，src属性とalt属性が必須．

【画像の形式について】
Webページで使用する画像の形式は「GIFとJPEGとPNG」．
画像の解像度は72dpiとする．画像は原寸で使用すること．
ストレッチをかけると，画像がぼやけることがある．

GIF （拡張子 .gif）
256色（8bit）まで使用可能．イラスト向きの形式で，色数の少ない単調な画像に適している．アニメーションGIFを使用することで，動きのある画像も作成できる．背景透過も可能．

JPEG （拡張子 .jpg）
約1677万色（24bit）まで使用可能．写真向きの形式で，色数の多い複雑な画像に適している．背景の透過ができない．背景は白になる．

PNG （拡張子 .png）
約1677万色（24bit）まで使用可能．劣化がない．背景の透過を持つことが出来る．データ量が大きくなる以外は一番使用しやすいといえる．