スタイルシートの適用~  365日の紙PHP(5日目)

近代的なPHP開発を行うために

おススメ!記事
Raspberry Pi 用「HAL」で、
カップラーメン・タイマーを作ってみよう!
ラズパイDIYの決定版! ソケットサーバー「HAL」をご紹介します。

さて、昨日作ったログインフォームを見直しましょう。

altテキスト

今日はここにスタイルシートを適用していきます。スタイルシートというのはHTMLに細かなデザインを適用して体裁を整えるための定義書で、CSSというスタイルシートが一般的に用いられていて、これから説明するのもCSSです。

ではまず、NetBeans IDEを開き、今作成しているfirstLoginプロジェクトのソース・ファイルを右クリックして 新規 > Cascading Style Sheets を選んで下さい。

altテキスト

ファイル名を login と入力して終了をクリックすると、index.phpと同じ階層に login.css が生成されます。

altテキスト

altテキスト

また、作成された login.css が開いているはずです。ここに、スタイルを書き加えていくことになります。

スタイルシートの読み込み

さて、スタイルシートファイルを作成したので、index.php内のHTMLで、このスタイルシートを読み込む設定をしましょう。

スタイルシートの読み込みは<head/>タグ内で行います。<body/>の中で読み込むこともできますが、読み込まれる前のHTMLと読み込まれた後のHTMLでスタイルの不整合が起きたりします。どのような不具合が起こるかはブラウザの実装次第ですので、<body/>内でスタイルを読み込むことはやめましょう。

スタイルシートの読み込み方ですが、<head/>内に

<link rel="stylesheet" type="text/css" href="login.css" media="screen">

を記述します。media属性の screen はパソコン画面用という意味です。プリンタで印刷するためのスタイルは print と指定します。他にもありますが、今は説明を省きます。

ドキュメントのスタイル設定

まず、ドキュメント自体についてスタイルを設定しましょう。

<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="login.css" media="screen">
</head>
<body>
<div id="login-panel">
<form action="login.php" method="POST">
ID : <input type="text" name="user_id" value=""><br>
パスワード : <input type="password" name="pass" value=""><br>
<button type="submit">送信</button>
</form>
</div>

<div id="footer">
Copyright c 2016 feijoa.jp All rights reserved.
</div>
</body>
</html>

このドキュメントを示すのは一番外側の<html/>、そして文書の内容を囲っている<body/>タグです。

この2つにスタイルを適用するため、login.css に以下の様なスタイルを記述します。

html{
background-color: #eef;
}

body {
background-color: #eef;
}

これでNetBeans IDEの画面上部の緑の▲ボタンで実行してみましょう。背景にうっすらと青色がつきました。

altテキスト

次はこうしてみましょう。

html{
background-color: #eef;
border: solid 1px #f00;
}

body {
background-color: #eef;
border: solid 1px #00f;
}

#f00 は赤、#00f は青ですが、こんな表示になると思います。

altテキスト

赤い線が<html/>の領域、青い線が<body/>の領域です。赤の領域と青の領域の間に隙間がありますね。また、左右はウィンドウいっぱいなのに、天地は狭く、下に随分空きがあります。

CSSでは、矩形(くけい)の領域の外側にマージン(margin)、内側にパディング(padding)という余白を作ることが出来ます。

赤い枠と青い枠の隙間は、赤い枠のパディングか、青い枠のマージンということです。ここではこの枠を取り除きたいので、<html/>と<body/>の両方にmargin: 0px; padding: 0px;を適用しましょう。

html{
background-color: #eef;
border: solid 1px #f00;
margin: 0px;
padding: 0px;
}

body {
background-color: #eef;
border: solid 1px #00f;
margin: 0px;
padding: 0px;
}

altテキスト

余白が消えました。これで<html/>と<body/>は一致したので、それぞれに個別にスタイルを適用するのは無駄ですから1つに纏めてしまいましょう。

html, body {
background-color: #eef;
margin: 0px;
padding: 0px;
}

次は<div id="login-panel">です。

<div id="login-panel">には login-panel というIDを指定したので、このIDを使ってスタイルを適用します。

IDは #id名 という表記で要素を指定できます。つまり

#login-panel { }

です。

ここでは<div id="login-panel">の横幅(width)と縦幅(height)背景色(background-color)、そして枠線(border)と角丸(border-radius)を指定してみます。

#login-panel {
width: 350px;
height: 150px;
background-color: #ddd;
border: solid 2px #fff
border-radius: 10px;
}

こうなりました。なお、角丸はバージョン8以前のInternet Explorerでは使えませんので、矩形になってしまいます。

altテキスト

さて、最初にお見せした完成図のイメージをもう一度見てみます。

altテキスト

このように<div id="login-panel">は画面の天地左右中央にしたいのですが、このままでは画面左上に寄ったままです。

ではまず、左右の中央に<div id="login-panel">を移動させましょう。矩形の外側にはマージンという余白を設けられることは先程説明しました。

<div id="login-panel">の左右に適切な同じ幅のマージンを設定すれば真ん中に寄ってくれそうです。やってみましょう。

#login-panel {
width: 350px;
height: 150px;
margin: auto;
background-color: #ddd;
border: solid 2px #fff
border-radius: 10px;
}

altテキスト

寄りました。まさしくautoですね。なお、今回のように auto とだけ書くと、上下左右すべてautoになります。0px auto; のように書くと、上下は0pxで左右がautoになります。0px auto 0px auto; は、上0px 右auto 下0px 左autoとなります。CSSでは、上右下左の時計回りで値を指定するルールになっています。

これでなんとか左右は簡単に中央に寄ってくれましたが天地が問題です。見ての通り赤枠が狭いために天地に余裕がありません。このため、<div id="login-panel">は天に張り付いてしまっています。

これは、赤枠を天地いっぱいに広げる必要がありそうです。というわけで、こうしてみましょう。

html, body {
background-color: #eef;
border: solid 1px #00f;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

altテキスト

赤枠は天地左右いっぱいに広がりました。右側と下側は線自体の幅分だけ外にでています。

しかし、<div id="login-panel">は天に張り付いたままです。

これを修正するためのCSSは、少し変わった設定をしなければなりません。どうするかというと、

#login-panel {
width: 350px;
height: 200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
border: solid 2px #fff;
border-radius: 10px;
}

altテキスト

positionプロパティは、要素の位置を指定するためのもので、それに absolute =絶対位置での指定をします。top、left、right、bottomが0というのは、ブラウザのウィンドウの上端、左端、右端、下端ぴったりを指定しているということです。こうすることでブラウザの全ての端から余白autoの位置に配置されるようになり、天地左右中央に<div id="login-panel">が配置されるようになりました。

これでやっと外枠のスタイルが終わったので、次は内側のスタイルを作っていきましょう。

フォームは上に余白を設けて少し位置を下げ、中のフィールドやボタンを中央寄せにしましょうか。IDとパスワード、送信ボタンの行間が狭いので少し開けましょう。

form {
margin-top: 50px;
text-align: center;
line-height: 2em;
}

altテキスト

あとはコピーライトを画面下部、右よりにするだけです。方法は<div id="login-panel">を天地左右中央にしたのと同じようにやります。右と下にべったり張り付いてしまうのは気持ちがわるいので、それぞれにマージンを10pxずつ指定しました。

#footer {
position: absolute;
right: 0;
bottom: 0;
margin-right: 10px;
margin-bottom: 10px;
}

altテキスト

さて大体できましたね。もう、htmlとbodyの赤枠は不要なので取り除いてしまいましょう。全体のlogin.cssはこうなりました。

html, body {
background-color: #eef;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

#login-panel {
width: 350px;
height: 200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
border: solid 2px #fff;
border-radius: 10px;
}

form {
margin-top: 50px;
text-align: center;
line-height: 2em;
}

#footer {
position: absolute;
right: 0;
bottom: 0;
margin-right: 10px;
margin-bottom: 10px;
}

少し気持ち悪いのは、IDとパスワード欄の左右位置がずれていることす。細かな説明は今はしませんが、以下の様なコードでぱぱっと直してしまうのも良いでしょう。

index.php

<form action="login.php" method="POST">
<span class="login-label">ID</span> : <input type="text" name="user_id" value=""><br>
<span class="login-label">パスワード</span> : <input type="password" name="pass" value=""><br>
<button type="submit">送信</button>
</form>

login.css

span.login-label {
display: inline-block;
width: 80px;
text-align: right;
}

altテキスト

意味についてはおいおい説明します。

今日はここまでです。明日は簡単なログイン後の画面のコードを書いた後、モックアップでのログイン処理の動作検証をしましょう。

お疲れ様でした。

この記事へのコメント

※現在コメントはMarkdown記法が強制です。>>Markdown の書き方


この記事に返信

このコメントに返信