ITを学ぶなら
｢テックプロジン｣

Developer

魁！小野の塾　小さな管理機能を作ってみようの巻　第２話
2021.02.23
Lv2

魁！小野の塾　小さな管理機能を作ってみようの巻　第２話

ono

小さな管理機能を作ってみよう　第２話

初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築でき、少しアプリケーションを作成しているレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。

対象のスキルレベル

  • LAMP環境の構築
  • PHP言語が読める
  • HTML, CSS, Javascriptが少しわかる
  • Bootstrapのドキュメントをみて、HTMLが書ける
  • Ajax(非同期通信)を利用したことがある
  • SESSIONを利用したことがある

構築環境

  • Windows10
  • XAMPP(PHP7.3.2, MariaDB 10.1.38)

ログイン画面実装

外部設計書を元にHTMLを実装していきたいと思います。
ログイン画面は、Bootstrapにサンプルが用意されているので、使ってみたいと思います。

※参考 サンプル
※参考 Sign-in

Sign-inを開き、右クリックし、名前を付けて保存で、ローカルに保存します。
css、imageなど全てローカルに保存されます。

保存されたファイル名は、『Signin Template for Bootstrap · Bootstrap v5.0.html』となるはずです。

Signin Template for Bootstrap · Bootstrap v5.0.html
[html highlight=””] <!DOCTYPE html>
<!– saved from url=(0050)https://getbootstrap.jp/docs/5.0/examples/sign-in/ –>
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.79.0">
<title>Signin Template for Bootstrap · Bootstrap v5.0</title>

<link rel="canonical" href="https://getbootstrap.jp/docs/5.0/examples/sign-in/">

<!– Bootstrap core CSS –>
<link href="./Signin Template for Bootstrap · Bootstrap v5.0_files/bootstrap.min.css" rel="stylesheet">

<!– Favicons –>
<link rel="apple-touch-icon" href="https://getbootstrap.jp/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180×180">
<link rel="icon" href="https://getbootstrap.jp/docs/5.0/assets/img/favicons/favicon-32×32.png" sizes="32×32" type="image/png">
<link rel="icon" href="https://getbootstrap.jp/docs/5.0/assets/img/favicons/favicon-16×16.png" sizes="16×16" type="image/png">
<link rel="manifest" href="https://getbootstrap.jp/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.jp/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="https://getbootstrap.jp/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>

<!– Custom styles for this template –>
<link href="./Signin Template for Bootstrap · Bootstrap v5.0_files/signin.css" rel="stylesheet">
</head>
<body class="text-center">

<main class="form-signin">
<form>
<img class="mb-4" src="./Signin Template for Bootstrap · Bootstrap v5.0_files/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">サインインする</h1>
<label for="inputEmail" class="visually-hidden">メールアドレス</label>
<input type="email" id="inputEmail" class="form-control" placeholder="メールアドレス" required="" autofocus="">
<label for="inputPassword" class="visually-hidden">パスワード</label>
<input type="password" id="inputPassword" class="form-control" placeholder="パスワード" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 記憶する
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">サインイン</button>
<p class="mt-5 mb-3 text-muted">© 2017-2021</p>
</form>
</main>

<span id="buffer-extension-hover-button" style="display: none; position: absolute; z-index: 8675309; width: 100px; height: 25px; background-image: url(&quot;chrome-extension://noojglkidnpfjbincgijbaiedldjfbhh/data/shared/img/buffer-hover-icon@2x.png&quot;); background-size: 100px 25px; opacity: 0.9; cursor: pointer; top: 185.971px; left: 730.997px;"></span></body></html>
[/html]

『./Signin Template for Bootstrap · Bootstrap v5.0_files/signin.css』の位置を変更し、ファイル名も変更します。
『./assets/css/style.css』へファイルをコピーします。

./assets/css/style.css
[css highlight=””] html,
body {
height: 100%;
}

body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}

.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
[/css]

中身を整理して、不要なものを削除、整形し、ファイル名を変更します。
css、jsのパスなどは、CDNを張り替えます。

login.html
[html highlight=””] <!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LOGIN | tech.pjin.jp</title>

<!– Bootstrap core CSS –>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!– Custom styles for this template –>
<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form>
<h1 class="h3 mb-3 fw-normal">サインインする</h1>
<label for="inputEmail" class="visually-hidden">メールアドレス</label>
<input type="email" id="inputEmail" class="form-control" placeholder="メールアドレス" required="" autofocus="">
<label for="inputPassword" class="visually-hidden">パスワード</label>
<input type="password" id="inputPassword" class="form-control" placeholder="パスワード" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 記憶する
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">サインイン</button>
<p class="mt-5 mb-3 text-muted">© 2017-2021</p>
</form>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
[/html]

かなりすっきり整理されたのではないでしょうか。
ロゴ、ファビコンなども削除しました。
Bootstrap5よりjQueryが必須ではなくなりました。というか決別したのでしょうか。依存はダメですからね。。。
Bootstrap5を利用した感じでいくと、jQueryからの脱却と、flexboxへの対応強化がかなり大きいかと。
data-*の取り扱いも、data-bs-*としたりで、bootstrap4からの移行を考えると少し頭が痛い感じです。
floatになれていると、left、rightの指定をしたくなりますが、start、endという感じになっているところは慣れる必要がありそうです。

※参考 【2020年最新】Flexboxの対応ブラウザとベンダープレフィックスまとめ

変更前の画面は以下のようになっております。

入力フィールドには、Floating labelsが使えるようになりましたので、使っていきたいと思います。
アプリケーション名を入れて、アイコンなどを利用して、背景に四角い枠を付けて、影を付けるようなことをやっていきます。
同時にCDNの追加なども行います。

※参考 魁！小野の塾　PHPで簡単なプログラムを作ってみようの巻　第２話

Floating labels

Bootstrap5からの新規スタイルになる、Floating labelsは、入力項目を綺麗に見せてくれます。
labelタグが必用になるのですが、inputの次に来るように配置します。
inputタグには、placeholder要素を入れます。表示はされないのですが、Floating labels利用時には必須になります。

Floating labels（抜粋）
[html highlight=””] <div class="form-floating">
<input type="email" id="mail" name="mail" class="form-control" placeholder="メールアドレス" required="" autofocus="">
<label for="mail">メールアドレス</label>
</div>

<div class="form-floating">
<input type="password" id="passwd" name="passwdd" class="form-control" placeholder="パスワード" required="">
<label for="passwd">パスワード</label>
</div>
[/html]

.form-floating を付けたdivで囲うだけで、表示されます。
labelについている、.visually-hidden は、外しています。これを外さないと、入力フィールドに項目名が表示されません。
テキストの入力フィールドに出力しているのは、ラベルの値になります。
idを変更し、name属性を追加しました。

このままだと、サンプルのcssがあるため、以下のような表示になってしまいます。

cssから、.form-signin .form-controlの項目を削除します。ついでにbodyのstyleも削除します。
削除した画面がこちら。

上図のようになれば成功です。

ちなみに、labelの順番や、placeholderがないとどうなるかを検証しました。

src
labelの位置がinputの前
[html highlight=””] <div class="form-floating">
<label for="mail">メールアドレス</label>
<input type="email" id="mail" name="mail" class="form-control" placeholder="メールアドレス" required="" autofocus="">
</div>
[/html]
inputのplaceholder指定なし
[html highlight=””] <div class="form-floating">
<input type="email" id="mail" name="mail" class="form-control" required="" autofocus="">
<label for="mail">メールアドレス</label>
</div>
[/html]
状態 入力フィールドに常に項目名が大きく表示される 入力フィールドに常に項目名が小さく表示される
画像

placeholderとlabelの位置を正しく指定しないと、ちゃんと動かないことが分かりました。

アプリケーション名とCSS

アプリケーション名のBACKOFFICEのOFFICE部分を赤くします。
Webフォントを有効にします。
余白を調整します。
上記３点を実装するために、cssを修正します。

./assets/css/style.css（抜粋）
[css highlight=””] .form-signin {
width: 100%;
/* 以下を修正
max-width: 330px;
padding: 15px; */
margin: auto;
max-width: 400px;
padding: 60px 20px;
}
/* 以下を追加 */
*{
font-family: ‘Sawarabi Gothic’, ‘Noto Sans JP’, sans-serif;
}
.login {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.bland-red{
color: #cc0000;
}
[/css]

.login をbody要素に追加し、main要素に、影のクラス .shadow、背景色を白 .bg-white、角丸 .rounded を追加します。

※参考 Shadows(シャドウ)
※参考 Background color
※参考 Border-radius

アイコンなどを追加し、タイトルの大きさと色を調整しました。
最終的にHTMLは以下のようになります。

login.html
[html highlight=””] <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LOGIN | tech.pjin.jp</title>

<!– Bootstrap core CSS –>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!– Font Awesome CSS –>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!– Animate.css CSS –>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!– Sawarabi Gothic –>
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
<!– Custom styles for this template –>
<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body class="text-center login">
<main class="form-signin shadow bg-white rounded">
<form>
<h1 class="mb-5"><i class="fas fa-paste"></i> BACK<span class="bland-red">OFFICE</span></h1>

<div class="form-floating">
<input type="email" id="mail" name="mail" class="form-control" placeholder="メールアドレス" required="" autofocus="">
<label for="mail">メールアドレス</label>
</div>
<div class="form-floating">
<input type="password" id="passwd" name="passwd" class="form-control" placeholder="パスワード" required="">
<label for="passwd">パスワード</label>
</div>

<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 記憶する
</label>
</div>
<button class="w-100 btn btn-lg btn-success" type="submit"><i class="fas fa-sign-in-alt"></i> ログイン</button>
<p class="mt-5 mb-3 text-muted">&copy; 2021 SIE</p>
</form>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
[/html]

画面は以下のようになります。

以上でログイン画面のHTML作成は終了になります。

魁！小野の塾

目次

魁！小野の塾　小さな管理機能を作ってみようの巻　第１話
魁！小野の塾　小さな管理機能を作ってみようの巻　第３話
一覧へ戻る