トップページをHTMLで組んでいきます。(HTMLとCSSの解説は「プログラミング言語」を参照してください。)
トップページのファイル名をindex.phpとし、managerディレクトり直下に作成してください。
まず、全体の枠組みをHTMLで書いてみましょう。管理システムでは大きく縦に３分割します
それぞれを「PageHeader, Breadcrumbs, MainContents」として、コメントタグを使って領域を明示します。それぞれのコメント中に必要なタグを書き入れていきます。PHP等のサーバー言語の開発時もそうなのですが、いきなりソースコードを書くのではなく、先にコメントでここに何を書くのかを明示しておくことはのちの作業効率やつまらないバグを入り込ませないためにとても有効です。自分がこれから何をしようとしているのかを整理するのにも役立ちます。
<!DOCTYPE html> <html lang="ja"> <head> </head> <body> <!-- PageHeader --> <!-- /PageHeader --> <!-- Breadcrumbs --> <!-- /Breadcrumbs --> <!-- MainContents --> <!-- /MainContents --> </body> </Html>
全体の区切りを明示しましたので、以降はブロックごとに解説していきます。
その前に事前準備として<head>タグへ最低限必要な要素を追記しておきます。各要素の解説は[ プログラミング言語 / HTML ]を参照してください。
<head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>Bookmin 管理</title> < link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" charset="utf-8"> </Head>
PageHeader
[PageHeader]はシステム全体のナビゲーションになりますので、<nav>タグを用います。
システム名Bookminは左寄せ、MasterMenuは右寄せリストになっています。ですので、左右でブッロック分けをします。MasterMenuの各項目はそれぞれのページへ遷移しますので、Linkも付加します。Link先URLは後で追記します。
<!-- PageHeader --> <nav> <!-- システム名 --> <div>Bookmin</div> <!-- MasterMenu --> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">売上管理</a></li> <li><a href="#">在庫管理</a></li> <li><a href="#">マスタ管理</a></li> <li><a href="#">ログアウト</a></li> </ul> </div> <!-- /MasterMenu --> </nav> <!-- /PageHeader -->
このように表示されます。
MasterMenuを横並びにします。ulタグに下記のbootstrapのclass属性を追記します。
<ul class="nav navbar-nav navbar-right">
このように表示されます。
システム名とMasterMenuが横一列になっていませんし、文字と画面に余白がなく張り付いています。ついでに黒背景にしてみましょう。
まず、システム名ブロックとMasterMenuブロックを<div>で囲みます。そこにcontainer-fluidclassを追記します。これで、左右に余白ができて見やすくなります。
<div class="container-fluid"> <!-- システム名 --> <!-- MasterMenu --> </div">
続いて、<nav>にnavber-inverseclassを追記します。
<nav class=“navbar navbar-inverse”>
<!-- システム名 -->
<div class="navbar-brand">Bookmin</div>
このように表示されます。
もう一息、ブロックの四隅が角丸になっていて、小さな余白がります。これを消します。
navbar-static-topを<nav>に追加します。
<nav class="navbar navbar-inverse navbar-static-top">
DropDownmメニューの追加
今度は、「売上管理、在庫管理、マスタ管理」の子メニューをマウスオーバーでDropDown表示をさせます。
メニュータグに移る前にCSSファイルを一つ追加します。<head>タグ内に以下を追記します。
<link rel="stylesheet" href="../assets/css/bookmin.css" type="text/css" charset="utf-8">
assets/cssディレクトリ内にbookmin.cssファイルを追加します。このCSSファイルはBootstrapに含まれていないスタイルを追加してしていきます。そして、追加したbookmin.cssに下記を書き加えます。
.dropdown:hover .dropdown-menu {
display: block;
}
このスタイルの意味は、hover(マウスオーバー)したdropdownclassを持った要素の子要素のうち、dropdown-menuclassを持った要素を表示するとなります。
Bootstrap.css内の3573行目あたりにあるdropdown-menuを見てみるとたくさんのスタイルが定義されていますが、デフォルトでは非表示display : none;となっています。上記の追加スタイルは親要素であるdropdownをマウスオーバーしたら表示するという命令を追加したわけです。
bookmin.cssファイルの準備ができたら、PageHeaderの売上管理メニュー部分を下記のうように変更します。
売上管理右横の<i class=”caret”>は三角アイコンです。
<li class="dropdown"> <a href="#">売上管理 <i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">日次売上集計</a></li> <li><a href="#">日次売上明細</a></li> <li><a href="#">書籍分類別集計</a></li> </ul> </li>
同じように在庫管理とマスタ管理にも子メニュー要素を追記します。
Breadcrumbs
<!-- Breadcrumbs --> <ul class="breadcrumb"> <li>管理メニュー一覧</li> </ul><!-- Breadcrumbs -->
トップページですので、要素がひとつかありません。階層の深いところにあるメニューであれば、階層分要素があり、親要素にはLinkがつきます。
このように表示されます。
さて、このパンくずですが、背景色を無くし、PageHeaderとの隙間をもう少し縮めたいと思います。bootstrap.cssを一部編集します。まず、パンくずの背景をなくします。
bootstrap.css4741行目のbackground-color:#f5f5f5;をコメントアウトします。
書き方は下記のようにします。
/* background-color:#f5f5f5; */
これで背景色がなくなりました。続いてPageHeaderとの隙間です。この隙はPageHeaderの下余白なんですね。bootstrap.css4217行のmargin-bottom: 20px;を同じようにコメントアウトしてみます。
これで丁度良くなりました。
MainContents
さて、やっと本体です。
まず配置すべきメニュー名を羅列しました。
<!-- MainContents --> <div> 売上管理 日次売上集計 日次売上明細 書籍分類別集計 在庫管理 在庫検索 入庫・在庫登録 入庫明細 受払一覧 発注データ生成 返品候補一覧 マスタ管理 スタッフ 管理システムメニュー 書籍 取次 返品設定 書籍分類 消費税 </div><!-- MainContents -->
これらをMasterMenu項目ごとに横並びにし、その子メニューは縦並びにします。そこでBootstrapのGrid systemという方法を用います。Grid systemは１行を最大12分割できます。n/12を適宜列に配分していきます。このメニューリストは大きくみれば１行と言えます。ですのでまず、全体を１行として扱うために<div>にrowclassを付加します。そしてMasterMenyu項目ごとに4/12づつ配分してみます。
<div class="row"> <div class="col-xs-4"> 売上管理 日次売上集計 日次売上明細 書籍分類別集計 </div> <div class="col-xs-4"> 在庫管理 在庫検索 入庫・在庫登録 入庫明細 受払一覧 発注データ生成 返品候補一覧 </div> <div class="col-xs-4"> マスタ管理 スタッフ 管理システムメニュー 書籍 取次 返品設定 書籍分類 消費税 </div> </div>
このように表示されます。
全体に３等分になりました。ただ、この画面サイズなら良いのですが、幅広の画面ですと横に間延びした感じに見えます。もう少し中央寄りにコンパクトにしたいと思います。行全体の左右に余白を設けます。
<div class="container-fluid"> <div class="row"> <div class="col-xs-1"> </div> <div class="col-xs-3"> 売上管理 日次売上集計 日次売上明細 書籍分類別集計 </div> <div class="col-xs-3"> 在庫管理 在庫検索 入庫・在庫登録 入庫明細 受払一覧 発注データ生成 返品候補一覧 </div> <div class="col-xs-3"> マスタ管理 スタッフ 管理システムメニュー 書籍 取次 返品設定 書籍分類 消費税 </div> <div class="col-xs-2"> </div> </div> </div>
いくらか中央に寄りました。
続いて各列のレイアウトを作ります。まずは売上管理メニューから。
<div class="list-group"> <label class="list-group-item active text-center">売上管理</label> <a href="#" class="list-group-item">日次売上集計</a> <a href="#" class="list-group-item">日次売上明細</a> <a href="#" class="list-group-item">書籍分類別集計</a> </Div>
在庫管理とマスタ管理も同じようにタグを当てはめてみましょう。
このように表示されます。
管理メニューのHTMLの作成は以上です。
次回はスタッフマスタ編集のHTMLを作成します。