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

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

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

対象のスキルレベル

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

構築環境

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

Dashboard実装

フレームを実装しましたので、Dashboardの中身を構築していこうと思います。
大きく、カード要素が２つとグラフが２つある画面になります。
グリッドを作成し、４つの領域に４つのカード要素を入れていきます。
Grid systemに関しては、バージョンごとに違いがあるため、しっかり読んでおくとよいと思います。
v4.4から完全にflexboxで構築してあると明記されるようになりました。これにより、グリッドの横幅、縦幅、位置の調整など、flexboxで指定できるような柔軟な設定が可能になりました。

※参考 Grid system (グリッドシステム)
※参考 Cards (カード)

さて、早速、グリッドを定義し、カードを入れていきます。

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

上のカード（２つ）と下のカード（２つ）がくっついています。画面を小さくしてみると、カードがくっついて、縦並びになってしまいます。

これでは見ずらいので、マージンを入れていきます。.mb-3 今回は下にマージンを入れていきます。

※参考 Spacing

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

画面を小さくした場合は、以下のようになります。

カードでは存在感がないので、それぞれシャドーを付けてみましょう。.shadow-sm 今回は控えめにつけてみます。

※参考 Shadows

以下のようになります。少し存在感がでたのではないでしょうか。

続いて、上のカード部分から作成していきます。
まずは、ユーザ登録数、部署登録数のタイトルと、数字を表示していきます。

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

カード内の要素（テキスト）が左に寄っていますので、中寄にしてます。.text-center を利用します。
テキスト部分は、Bootstrap5から、左寄せが text-left から .text-start、右寄せが text-right から .text-end と変更になっております。flexboxを意識している為なのですが、Bootstrap4までのあまり変更のない部分の変更なので、確認しておくと良いと思います。

※参考 Text (テキスト)

登録数の数字が小さい気がするので、大きくしてみます。.display-3 を利用します。

※参考 Typography (タイポグラフィ)
※参考 Display headings

反映すると以下のようになります。

見た目はかなり良いのではないかと思います。

魁！小野の塾