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）にしています．

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

［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

体の記述の仕方は自由だが，明朝体・ゴシックは以下からコピーし使用することを進める．

［明朝体の指定］

p {
	/*font：明朝*/
	font-family: "Palatino Linotype", "Book Antiqua", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", Palatino, serif;
}

［ゴシックの指定］

h1{
	/*ゴシック*/
	font-family: Univers, Arial, Helvetica, Geneva, "游ゴシック", YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

［文字のプロパティ］
プロパティは下記のような指定が可能．

p {
	/*カラー*/
	color: #444;
	/*サイズ*/
	font-size: 12px;
	/*行間*/
	line-height: 2em;
	/*ウエイト*/
	font-weight:normal;
	/*字間*/
	letter-spacing: 0.05em;
}

［Web Font］
基本的にWebブラウザは端末にインストールされているフォントを呼び出し文字を表示する．端末のフォント如何では，Webデザイナーが意図しない表示がなされフォントに関するWebデザインに制約が生じてしまう．フォントを画像にして表示するという手段はあるが，文章修正のメンテナンス，文章の検索といった点で問題がある．そこでWebサーバー上にフォントファイルを置き，Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントであり，これを使用すると環境依存にならない．ただし，現状和文フォントに関しては，まだコスト面など影響し使用が困難である．

［Web Font（Google font）の使い方］
→Google Font
上記URLからGoogle Font Webサイトに行き，使用したいフォントをセレクト．
その後，右下中間のアイコンを選択．
フォントのウエイト・スタイルを選択

<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

</head>のうえで，CSSを読み込む1行前に
<link href=’http://fonts.googleapis.com/css?family=Lato:100′ rel=’stylesheet’ type=’text/css’>
↑を記述．

h1{
    font-family: 'Lato', sans-serif;
}

CSSで上記のように指定する．

［参考］
【フォント】
http://www.dtp-transit.jp/misc/web/post_1881.html
http://g-azami.tumblr.com/post/76447906591/a-2014-edition-japanese-css-font-family-set-up

【プロパティ（字間・行間など）】
http://www.tagindex.com/stylesheet/text_font/
http://www.htmq.com/style/font.shtml

［CSSを適用するには］
HTML 文書にCSS を適用するには，直接HTML にCSS を記述する方法と，CSS ファ
イルを別に用意しておいてリンクする方法があります．外部ファイルで定義する場合，HTML のhead 要素に下記の1 行を記述します．

<link rel=”stylesheet” href=“ファイル名.css” type=”text/css”>

［CSSの書き方の基本］
CSS では，HTML の中に出てくる各要素を，それぞれどういうスタイルで描くかというルールを記述（宣言）していきます．

これは，HTML 文書の中にh1 が適用された要素があれば，その文字の色を赤色にしてくださいという意味です．つまり，「どの要素の｛何を：どうする；｝」と書きます．
h1 という要素には，文字色の他にも変更できる項目がいくつかあります．例えば，h1 要素の文字の書体や，文字の周りの余白の広さなどを指定することができます．これらの変化を与えられる項目のことを「プロパティ」と呼びます． 「#f00」にあたる部分を「値」と呼びます．また，CSS を適用する対象となる要素を指定する部分のことを「セレクタ」と呼びます．

宣言が複数になる場合には，以下のように，コロン（；）で区切って，同様のルールで追記していきます．

h1 {
	color: #f00;
	margin: 10px;
}

［セレクタ］
CSS を適用する対象となる要素を指定するセレクタには，既存のHTML タグを指定する「要素セレクタ」の他にも，制作者が自由に名前をつけて対象として指定できる「IDセレクタ」や「class セレクタ」などがあります．

［IDセレクタ・classセレクタ］
HTML の要素に，ID やclass を追加して記述しておいて，そのID 名やclass 名をセレクタで指定して，CSS を適用することができます．
「ID セレクタ」は，HTML のページ内に一度だけ使用できますが，「class セレクタ」は，ページ内で何度も使用することのできる要素です．

［Memo］
CSSプロパティの種類を確認するには下記のサイトを参考にして下さい．
［HTMLクイックリファレンス］http://www.htmq/com/
スタイルシートについては「スタイルシートリファレンス（目的別）」を参照
代表的なセレクタの種類と記述例
─
要素セレクタ
p {color: #f00;}
─
全体セレクタ
*{color: #f00;}
─
IDセレクタ
#content {color: #f00;}
─
classセレクタ
.memo {color: #f00;}
─
複数セレクタ
h1, h2 {color: #f00;}
─
子孫セレクタ
p strong {color: #f00;}

［ボックスの構造］
1 つのボックスは4 つの領域から構成されます．各領域の境界線は「辺」と呼ばれ，上下左右（top, bottom, left, right）のそれぞれに対して，スタイルを適用できます．
1.     内容（content）：テキストや画像など
2.     ボーダー(border)：枠線
3.     パディング(padding)：内容とボーダーのあいだの余白
4.     マージン（margin）：ボーダーの外側の余白．透明．

［ボックスモデルの全体幅の計算方法］
［ボックスの全体の幅］＝
［左右のマージン］（margin-left, margin-right）＋
［左右のボーダー］（botom-left, botom-right）＋
［左右のパディング］（padding-left, padding-right）＋
［内容の幅］（width）

［Memo］
cssで背景色や背景画像を指定した場合は，パディングとボーダーの領域まで適用され，マージンの部分には適用されません．