LoginSignup
2
1

More than 5 years have passed since last update.

@icelandnono(るかぜ)

CSSを別ファイルへ書く

Last updated at Posted at 2017-06-22
<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>
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1