CSSを別ファイルへ書く

```
<LINK href="test.css" rel="stylesheet" type="text/css">
```
これを追加すればいいだけｗ


```:test.css
html,body {
	background-color: transparent;
	scrollbar-arrow-color: #ffccff;
	scrollbar-face-color: #ffcccc;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-darkshadow-color: #ffcccc;
	scrollbar-highlight-color: #ff9999;
	scrollbar-shadow-color: #ff9999;
	scrollbar-track-color: #ffffff;
}

-->
p#submit_btn {
	text-align: center;
	font-family: "あずきフォント";
}

.content {
	/* 	margin-left: 137px; */
	margin-top: 0px;
	font-size: 95%;
	font-weight: bold;
	font-family: "あずきフォント";
	/* 	color: #6c2735; */
	color: #f3b3e6;
}

.form {
	color: white;
	background-color: #9FD6D2;
	text-align: center;
	/* 	padding-left: 370px; */
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 95%;
	width: 825px;
	font-family: "あずきフォント";
}

.textform {
	margin-left: 68px;
}

.textform_postalCode {
	margin-left: 30px;
}

.textstyle {
	font-size: 95%;
	/* 	color: #6c2735; */
	color: #f7c2c2;
	font-weight: bold;
	font-family: "あずきフォント";
}

.required {
	font-size: 87%;
	font-weight: normal;
	color: red;
	font-family: "あずきフォント";
}

#heading {
	/* 	border-left: 10px solid #6c2735; */
	/* 	border-bottom: medium solid #6c2735; */
	border-left: 10px solid #6c2735;
	border-bottom: medium solid #f7c2c2;
	color: #f7c2c2;
	/* 	color: #cc528b; */
	font-family: "あずきフォント";
	-ms-font-feature-settings: "normal";
}
/* 送信ボタン */
input[type="submit"] {
	padding: 10px 20px;
	border: none;
	/*  background: #9FD6D2; */
	background: #f7c2c2;
	color: #fff;
	font-family: "あずきフォント";
}

/* 送信ボタン - マウスオーバー時 */
input[type="submit"]:hover {
	/*  background: #54A9BD; */
	background: #ff9b9f;
	font-family: "あずきフォント";
}

/* 送信ボタン - 押せないとき */
input[type="submit"][disabled] {
	background-color: #ccc;
	cursor: default;
	font-family: "あずきフォント";
}

input.example,select {
	width: 250px;
	font-family: "あずきフォント";
}

.title_a {
	color: #f7c2c2;
	font-weight: bold;
	font-family: "あずきフォント";
}

textarea {
	width: 480px;
	font-family: "あずきフォント";
}

.styled-select select {
	background: transparent;
	width: 268px;
	padding: 5px;
	font-size: 16px;
	line-height: 1;
	border: 0;
	border-radius: 0;
	height: 34px;
	-webkit-appearance: none;
}
/* select{ */
/* 	color: white; */
/* 	background-color: #f3b3e6; */
/* } */
/* カーソルをあてた時に変わる色 */
input:focus,select:focus,textarea:focus {
	background-color: #f7c2c2;
	/* 	background-color: #f2dae8; */
	font-family: "あずきフォント";
	border: solid 1px #cc528b;
}
/*検索ボタン*/
input[type="button"] {
	background: #f7c2c2;
	color: white;
	/*   width: 55px; */
	height: 30px;
	border: 0;
	line-height: 30px;
	font-family: "あずきフォント";
}

input[type="button"]:hover {
	background: #ff9b9f;
	height: 30px;
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: "あずきフォント";
}

input[type="button"].disabled {
	background: #f7c2c2;
	cursor: default;
}

input[type="button"].disabled:hover {
	background: #f7c2c2;
	font-family: "あずきフォント";
}
/* @font-face { */
/* font-family: あずきフォント; */
/* src: url(azuki.ttf) format("truetype"); */
/* 	 url(azuki.woff) format("woff"); /* Modern Browsers */
*
/
/* } */




@font-face {
	font-family: 'あずきフォント'; /* お好きな名前に */
	src: url('azuki.eot'); /* IE9以上用 */
	src: url('azuki.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
        url('azuki.woff') format('woff'), /* モダンブラウザ用 */
        url('azuki.ttf') format('truetype'); /* iOS, Android用 */
}

.stepBar {
	position: relative;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
	*zoom: 1;
	font-family: "あずきフォント";
}

.stepBar .step {
	position: relative;
	float: left;
	display: inline-block;
	line-height: 40px;
	padding: 0 40px 0 20px;
	background-color: #eee;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.stepBar .step:before,.stepBar .step:after {
	position: absolute;
	left: -15px;
	display: block;
	content: '';
	background-color: #eee;
	border-left: 4px solid #FFF;
	width: 20px;
	height: 20px;
}

.stepBar .step:after {
	top: 0;
	-moz-transform: skew(30deg);
	-ms-transform: skew(30deg);
	-webkit-transform: skew(30deg);
	transform: skew(30deg);
}

.stepBar .step:before {
	bottom: 0;
	-moz-transform: skew(-30deg);
	-ms-transform: skew(-30deg);
	-webkit-transform: skew(-30deg);
	transform: skew(-30deg);
}

.stepBar .step:first-child {
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.stepBar .step:first-child:before,.stepBar .step:first-child:after {
	content: none;
}

.stepBar .step:last-child {
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.stepBar .step.current {
	color: #FFF;
	background-color: #6c2735;
	font-family: "あずきフォント";
}

.stepBar:hover {
	background-color: #DEC8B1';
}

.stepBar .step.current:before,.stepBar .step.current:after {
	background-color: #6c2735; onmouseover ="style.background='#DEC8B1'";
	onmouseout ="style.background='#6c2735'";
	font-family: "あずきフォント";
}

.stepBar.step2 .step {
	width: 50%;
}

.stepBar.step3 .step {
	width: 33.333%;
}

.stepBar.step4 .step {
	width: 25%;
}

.stepBar.step5 .step {
	width: 20%;
}

div.img-move a:hover {
	position: relative;
	top: -1px;
	left: -1px;
}

div.img-move a:active {
	position: relative;
	top: 5px;
	left: 5px;
}
img.album_image {
 vertical-align:middle;
}
```

```:album2.php
<?php
$images = array ();
// 1ページに表示する画像の枚数
$num = 3;

// albumフォルダをオープンにする
// $handleにディレクトリハンドルが入っている
// opendir(フォルダ名)⇒戻り値ディレクトリハンドル
if ($handle = opendir ( './album' )) {
// readdir(ディレクトリハンドル)⇒指定したディレクトリのファイル一覧を取得する
// ファイル名をどんどん取得する
	while ( $entry = readdir ( $handle ) ) {
		// 現在のディレクトリの.or..を除いた全てのファイル名リストを
		// $imagesに格納している
		if ($entry != "." && $entry != "..") {
// $entry⇒readdirで取得したファイル名が沢山格納されている。
// それを$images配列に格納。
			$images [] = $entry;
		}
	}
	// ディレクトリハンドルをクローズする
	closedir ( $handle );


	rsort($images);


	//古い順ボタン
if (isset($_POST ['sort'])) {
	switch ($_POST['sort']):
		case 'fromOldest':
			sort ( $images );
			break;
		case 'fromNewest':
			rsort ( $images );
			break;
	endswitch;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xm1ns="http://www.w3.org/1999/xhtml">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width,
 initial-scale=1.0,user-scalable=yes" />

<title>アルバム</title>
<LINK href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
	<h1 class="title_a">アルバム</h1>
	<p class="textstyle">
		<a href="upload2.php">写真をアップロードする</a>
	</p>
	<?php
	if(!(isset($_POST['command'])&& $_POST['command']=='delete')){
	echo '<p class="textstyle">削除ボタンを押すと、画像が削除出来ます。</p>';
	}
	?>
	<?php
if(isset($_POST['command'])){
if(!empty($_POST['command']) && $_POST['command'] == 'delete'){
	$filename = './album/'.$_POST['id'];
	if(file_exists($filename)){
	unlink($filename);
// 	header ("Location:album2.php");
// 	exit();
	echo '	<p class="textstyle">削除しました。更新ボタンを押してください。</p>';
	echo '<FORM><INPUT TYPE="button" VALUE="更新" onClick="window.location.reload();"></FORM>';
	unset($_POST);
	}
}
}
?>
<table bordercolor="hotpink" border="1" cellspacing="0" cellpadding="5">
		<tr>
			<td bgcolor="mistyrose" align="center"><font color="deeppink"
				size="2"><font size="1"><sup>●</sup></font> <b>A L B U M</b> <font
					size="1"><sub>●</sub></font></font></td>
		</tr>
		<tr>
			<td align="center">
				<!-- 		<caption class="font2">アルバム</caption> -->
<?php
if(count($images) > 0){
	$images = array_chunk ( $images, $num );
	$page = 0;
	if (isset ( $_GET ['page'] ) && is_numeric ( $_GET ['page'] )) {
		$page = intval ( $_GET ['page'] ) - 1;
		if (! isset ( $images [$page] )) {
			$page = 0;
		}
	}

// 	if(!empty($_POST['command']) && $_POST['command'] == 'delete'){
	// 画像の表示
	foreach ( $images [$page] as $img ) {
		echo '<form action="" method="post">';
		echo '<tr>';
		echo '<td align="center"><img src="./album/' . $img . '"class="album_image"><input type="hidden" name="command" value="delete"><input type="hidden" name="id" value="',$img,'">','&nbsp;&nbsp;<button type="submit" style="border: 1px solid #902342; color: #902342; background-color: #f2dae8;">削除</button></td>';
		echo '</tr>';
		echo '</form>';
		echo "\n";
	}
// 	}
	echo '<p>';
	for($i = 1; $i <= count ( $images ); $i ++) {
		echo '<a href="album2.php?page=' . $i . '">' . $i . '</a>&nbsp;';
	}
	echo '</p>';
} else {
	echo '<p class="textstyle">画像はまだありません。</p>';
}
}
?>
<tr>
<td bgcolor="mistyrose" align="center"><font color="deeppink"><font size="1"><sup>●</sup><sub>●</sub><sup>●</sup><sub>●</sub><sup>●</sup><sub>●</sub><sup>●</sup><sub>●</sub><sup>●</sup></font></td>
</tr>

</table>
<p>
<form action="" method="post">

<?php
if(!(isset($_POST['sort'])) || $_POST['sort'] == 'fromNewest'){
// 古い順というボタンを表示する
	echo '<input type="hidden" name="sort" value="fromOldest">&nbsp;&nbsp;<button type="submit" style="border: 1px solid #902342; color: #902342; background-color: #f2dae8;">古い順</button>';
}elseif (!isset($_POST['sort']) || $_POST['sort'] == 'fromOldest'){
// 新しい順というボタンを表示する
	echo '<input type="hidden" name="sort" value="fromNewest"><button type="submit" style="border: 1px solid #902342; color: #902342; background-color: #f2dae8;">新しい順</button>';
}

?>
		</form>
	</p>
</body>
</html>
```