最近、画面を全然作っていないので、忘れていないか確認するために作ってみました。そのメモ書きです。

お題

ただ作るだけというのもつまらないので、以下のお題を設けて作ってみました。

日本語を綺麗に表示するための Bootstrap テーマに Honoka がありますが、これと adminLTE を単に組み合わせるとナビゲーションバーが大きくなったりフォントが大きくなったりして、あんまり綺麗になりません。自分好みの見栄えになるよう調整してみます。
Flexbox ベースの CSS フレームワークの Bulma が最近流行っているという記事をみかけたのですが、Web サイトを見てターコイズブルーが気に入ったのでナビゲーションバーの色をターコイズブルーにして、他の色もターコイズブルーに合わせた色にした画面にしてみます。

作ってみた画面はこんな感じです

Chrome

f:id:ksby:20160918232747p:plain

f:id:ksby:20160918232936p:plain

IE11

f:id:ksby:20160918233258p:plain

f:id:ksby:20160918233213p:plain

変更した内容のメモ書き

まずはターコイズブルーの skin を作成する

skins ディレクトリの下の skin-blue.css をコピーして skin-dark-turquoise.css を作成した後、ファイル内の #3c8dbc → #1fc8db に置換します。

Honoka を入れたのに、adminLTE と組み合わせると日本語が綺麗でないよね？

Honoka では日本語を綺麗に表示するために以下のようにフォントが指定されているのですが、

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  ..........
}

adminLTE.css で別の指定に置き換わっているのが原因でした。

body {
  ..........
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  ..........
}

adminLTE.css の定義の後で以下の定義を追加して、Honoka の設定に戻します。

/* Honoka の日本語フォントの設定が adminLTE で別の設定に変わってしまうので定義し直す */
body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

Honoka と adminLTE を組み合わせるとなぜナビゲーションバーが大きくなるのか？

adminLTE の bootstrap.css と Honoka の bootstrap.css を較べてみて思ったのは、以下の点でした。Honoka の bootstrap.css は日本語を綺麗に表示させるために少し大きめの値に設定されているのが原因でした。

Honoka の bootstrap.css では body の定義で font-size: 16px; と記述されているが、さすがに 16px は大きい。
.navbar-brand 等の定義で adminLTE の bootstrap.css だと height: 50px; ですが、Honoka の bootstrap.css では height: 80px; と 30px 高い。
Honoka の bootstrap.css では padding-top/bottom, margin-top/bottom の設定値が少し大きい。

今回作成した画面については以下の定義を追加しました。

.nav {
    font-size: 14px;
}
.navbar {
    min-height: 50px;
}
.navbar-brand {
    height: 50px;
    padding: 15px 15px;
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
    margin-bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.navbar-btn {
    margin-top: 8px;
    margin-bottom: 8px;
}
.navbar-btn.btn-sm {
    margin-top: 10px;
    margin-bottom: 10px;
}
.navbar-btn.btn-xs {
    margin-top: 14px;
    margin-bottom: 14px;
}
.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px;
}
.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
}
.navbar-custom-menu .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropdown-menu {
    font-size: 14px;
}

body の背景色が白だと今ひとつ見にくい

white ではなく snow を設定しました。

/* body 内の背景色を白より少し色がついた色にする */
.content-wrapper {
    background-color: snow;
}

テーブルの項目名のセルの背景色はターコイズブルーより少し濃い目の青へ

以下の定義を追加して、テーブルの項目名のセルで指定します。

/* テーブルの項目名のセルに使用する少し濃い目の青 */
.bg-summer-sky {
    color: #ffffff;
    background-color: #42afe3;
}

色の名前は HTML CSS Color Picker で調べました。http://www.htmlcsscolor.com/hex/42AFE3 で検索すると Summer Sky と表示されます。何気に便利です。

`text-sm` を指定した時のフォントサイズが小さすぎる気がする

adminLTE.css で 12px になっているからですが、12px はちょっと小さすぎます。

.text-sm {
  font-size: 12px;
}

14px に定義し直します。

/* text-sm が adminLTE だと 12px だが、小さすぎるので少し大きくする */
.text-sm {
    font-size: 14px;
}

入力フィールドにフォーカスが当たった時の枠線の色味を元の Bootstrap のものに戻す

入力フィールドにフォーカスが当たった場合、adminLTE では単に枠線の色が濃くなるだけなのですが、

f:id:ksby:20160919004933p:plain

個人的には Bootstrap オリジナルの枠線の周りがぼやーっと青くなる方が好みなので、

f:id:ksby:20160919005337p:plain

Honoka の bootstrap.css から以下の定義を持ってきて、adminLTE.css を読み込んだ後に設定し直します。

/* フォーカス時の入力フィールドの色合いが adminLTE より Bootstrap のものが好みなので、そちらに定義し直す */
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

table や alert の下の余白が大きいのでもう少し小さくする

Honoka の bootstrap.css では .table, .alert で margin-bottom: 24px; と定義されていますが、24px は個人的には大きすぎる感じがしました。

以下の定義を追加します。

/* table の下の余白が大きいので小さくする */
.table {
    margin-bottom: 16px;
}
/* alert の下の余白が大きいので小さくする */
.alert {
    margin-bottom: 16px;
}

テーブルの罫線の色をもう少し濃くする

ちょっと見にくいので以下の定義を追加して濃い色に変更します。

/* テーブルの罫線をもう少し濃くする */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #bdbdbd;
}

`form-inline` の定義が画面の幅が 767px 以下になると無効になる？

Honoka の bootstrap.css を見ると以下のように定義されていました。

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  ..........
}

この設定のままだと画面の幅を 767px 以下にした時に form-inline が無効になります。

f:id:ksby:20160919011042p:plain

@media (min-width: 768px) { ... } は不要なので、ない定義を追加して常に form-inline の設定が有効になるようにします。

/* どんな幅でも form-inline の設定が有効になるようにする start */
.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.form-inline .form-control-static {
    display: inline-block;
}
.form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
    width: auto;
}
.form-inline .input-group > .form-control {
    width: 100%;
}
.form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .radio,
.form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .radio label,
.form-inline .checkbox label {
    padding-left: 0;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
}
.form-inline .has-feedback .form-control-feedback {
    top: 0;
}

ソース

今回作成した template.html の全ソース

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>ここに画面名を入れる</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <!-- Bootstrap Honoka 3.3.7 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="/css/skins/skin-dark-turquoise.css" rel="stylesheet" type="text/css"/>

    <style>
        .nav {
            font-size: 14px;
        }
        .navbar {
            min-height: 50px;
        }
        .navbar-brand {
            height: 50px;
            padding: 15px 15px;
        }
        .navbar-nav > li > .dropdown-menu {
            margin-top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
            margin-bottom: 0;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .navbar-btn {
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .navbar-btn.btn-sm {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .navbar-btn.btn-xs {
            margin-top: 14px;
            margin-bottom: 14px;
        }
        .navbar-text {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .navbar-nav > li > a {
            padding-top: 10px;
            padding-bottom: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 20px;
        }
        .navbar-custom-menu .navbar-nav > li > a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .dropdown-menu {
            font-size: 14px;
        }
        /* Honoka の日本語フォントの設定が adminLTE で別の設定に変わってしまうので定義し直す */
        body {
            font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        }
        /* body 内の背景色を白より少し色がついた色にする */
        .content-wrapper {
            background-color: snow;
        }
        /* テーブルの項目名のセルに使用する少し濃い目の青 */
        .bg-summer-sky {
            color: #ffffff;
            background-color: #42afe3;
        }
        /* text-sm が adminLTE だと 12px だが、小さすぎるので少し大きくする */
        .text-sm {
            font-size: 14px;
        }
        /* フォーカス時の入力フィールドの色合いが adminLTE より Bootstrap のものが好みなので、そちらに定義し直す */
        .form-control:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        }
        /* 必須ラベル、任意ラベル用 */
        .label-required {
            background-color: red;
        }
        .label-option {
            background-color: green;
        }
        /* table の下の余白が大きいので小さくする */
        .table {
            margin-bottom: 16px;
        }
        /* テーブルの罫線をもう少し濃くする */
        .table-bordered > thead > tr > th,
        .table-bordered > tbody > tr > th,
            .table-bordered > tfoot > tr > th,
        .table-bordered > thead > tr > td,
        .table-bordered > tbody > tr > td,
        .table-bordered > tfoot > tr > td {
            border: 1px solid #bdbdbd;
        }
        /* subnav */
        .subnav {
            background-color: #0c82df;
        }
        .subnav .container,
        .subnav .container > a{
            color: white;
            font-size: 14px;
            font-weight: bold;
        }
        /* alert の下の余白が大きいので小さくする */
        .alert {
            margin-bottom: 16px;
        }
        /* どんな幅でも form-inline の設定が有効になるようにする start */
        .form-inline .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }
        .form-inline .form-control {
            display: inline-block;
            width: auto;
            vertical-align: middle;
        }
        .form-inline .form-control-static {
            display: inline-block;
        }
        .form-inline .input-group {
            display: inline-table;
            vertical-align: middle;
        }
        .form-inline .input-group .input-group-addon,
        .form-inline .input-group .input-group-btn,
        .form-inline .input-group .form-control {
            width: auto;
        }
        .form-inline .input-group > .form-control {
            width: 100%;
        }
        .form-inline .control-label {
            margin-bottom: 0;
            vertical-align: middle;
        }
        .form-inline .radio,
        .form-inline .checkbox {
            display: inline-block;
            margin-top: 0;
            margin-bottom: 0;
            vertical-align: middle;
        }
        .form-inline .radio label,
        .form-inline .checkbox label {
            padding-left: 0;
        }
        .form-inline .radio input[type="radio"],
        .form-inline .checkbox input[type="checkbox"] {
            position: relative;
            margin-left: 0;
        }
        .form-inline .has-feedback .form-control-feedback {
            top: 0;
        }
        /* どんな幅でも form-inline の設定が有効になるようにする end */
        /* 画面下のボタンを大きく表示させる */
        .btn {
            width: 200px;
        }
    </style>
</head>

<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="skin-dark-turquoise layout-top-nav">
<div class="wrapper">

    <header class="main-header">
        <nav class="navbar navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand"><b>システム名はここに書く！</b></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">メニュー <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->

                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><i class="fa fa-user"></i> 田中　太郎</a></li>
                        <li><a href="#"><i class="fa fa-sign-out"></i> ログアウト</a></li>
                    </ul>
                </div>
                <!-- /.navbar-custom-menu -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <div class="row subnav">
            <div class="container">
                <a href="#">物件情報管理</a>｜
                <a href="#">店舗情報管理</a>｜
                <a href="#">キャンペーン情報管理</a>｜
                <a href="#">連絡事項</a>
            </div>
        </div>
    </header>

    <!-- Full Width Column -->
    <div class="content-wrapper">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>物件情報入力画面</h1>
            </section>

            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <form id="xxxForm" method="post" action="">
                            <div class="alert alert-success text-sm">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <p>通常メッセージ表示エリア</p>
                            </div>
                            <div class="alert alert-danger text-sm">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <p>共通エラーメッセージ表示エリア</p>
                            </div>

                            <table class="table table-bordered text-sm">
                                <colgroup>
                                    <col width="15%"/>
                                    <col width="35%"/>
                                    <col width="15%"/>
                                    <col width="35%"/>
                                </colgroup>
                                <tr>
                                    <th class="bg-summer-sky">所在地<div class="label label-required pull-right">必須</div></th>
                                    <td>
                                        <input type="text" name="xxx" class="form-control input-sm" value=""/>
                                    </td>
                                    <th class="bg-summer-sky">価格<div class="label label-required pull-right">必須</div></th>
                                    <td>
                                        <div class="form-inline">
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:100px;" value=""/> 万円
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-summer-sky">交通</th>
                                    <td colspan="3">
                                        <!-- 交通１ -->
                                        <div class="form-inline">
                                            <div class="label label-required">必須</div>
                                            <select name="xxx" class="form-control input-sm" style="width:200px;">
                                                <option value="xxx">山手線</option>
                                                <option value="xxx">総武線</option>
                                                <option value="xxx">中央線</option>
                                            </select>
                                            <select name="xxx" class="form-control input-sm" style="width:200px;">
                                                <option value="xxx">新宿</option>
                                                <option value="xxx">渋谷</option>
                                                <option value="xxx">品川</option>
                                            </select>
                                            　徒歩 <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 分
                                        </div>

                                        <!-- 交通２ -->
                                        <div class="form-inline">
                                            <div class="label label-option">任意</div>
                                            <select name="xxx" class="form-control input-sm" style="width:200px;">
                                                <option value="xxx">山手線</option>
                                                <option value="xxx">総武線</option>
                                                <option value="xxx">中央線</option>
                                            </select>
                                            <select name="xxx" class="form-control input-sm" style="width:200px;">
                                                <option value="xxx">新宿</option>
                                                <option value="xxx">渋谷</option>
                                                <option value="xxx">品川</option>
                                            </select>
                                            　徒歩 <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 分
                                        </div>

                                        <!-- 交通３ -->
                                        <div class="form-inline">
                                            <div class="label label-option">任意</div>
                                            <select name="xxx" class="form-control input-sm" style="width:200px;">
                                                <option value="xxx">山手線</option>
                                                <option value="xxx">総武線</option>
                                                <option value="xxx">中央線</option>
                                            </select>
                                            <select name="xxx" class="form-control input-sm" style="width:200px;">
                                                <option value="xxx">新宿</option>
                                                <option value="xxx">渋谷</option>
                                                <option value="xxx">品川</option>
                                            </select>
                                            　徒歩 <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 分
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-summer-sky">築年月<div class="label label-required pull-right">必須</div></th>
                                    <td>
                                        <div class="form-inline">
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 年
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 月
                                            築
                                        </div>
                                    </td>
                                    <th class="bg-summer-sky">階数／階建</th>
                                    <td>
                                        <div class="form-inline">
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 階
                                            ／地上 <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 階
                                            地下 <input type="text" name="xxx" class="form-control input-sm" style="width:50px;" value=""/> 階建
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-summer-sky">専有面積<div class="label label-required pull-right">必須</div></th>
                                    <td>
                                        <div class="form-inline">
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:100px;" value=""/> ㎡
                                        </div>
                                    </td>
                                    <th class="bg-summer-sky">間取り<div class="label label-required pull-right">必須</div></th>
                                    <td>
                                        <select name="xxx" class="form-control input-sm" style="width:150px;">
                                            <option value="xxx">2K</option>
                                            <option value="xxx">2DK</option>
                                            <option value="xxx">2LDK</option>
                                            <option value="xxx">3K</option>
                                            <option value="xxx">3DK</option>
                                            <option value="xxx">3LDK</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-summer-sky">管理費等</th>
                                    <td>
                                        <div class="form-inline">
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:100px;" value=""/> 円／月
                                        </div>
                                    </td>
                                    <th class="bg-summer-sky">修繕積立金</th>
                                    <td>
                                        <div class="form-inline">
                                            <input type="text" name="xxx" class="form-control input-sm" style="width:100px;" value=""/> 円／月
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-summer-sky">その他費用</th>
                                    <td colspan="3">
                                        <input type="text" name="xxx" class="form-control input-sm" value=""/>
                                    </td>
                                </tr>
                            </table>
                            <div class="text-center">
                                <button class="btn bg-green"><i class="fa fa-thumbs-up"></i>　確定</button>
                                <button class="btn bg-orange"><i class="fa fa-close"></i>　キャンセル</button>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
        <!-- /.container -->
    </div>

</div>
<!-- ./wrapper -->

<!-- jQuery 2.1.4 -->
<script src="/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js" type="text/javascript"></script>
</body>
</html>

build.gradle

Honoka や adminLTE をダウンロードするための downloadCssFontsJs タスクを定義してあります。

group 'project.webapp'
version '1.0.0-RELEASE'

buildscript {
    ext {
        springBootVersion = '1.3.7.RELEASE'
    }
    repositories {
        jcenter()
        maven { url "http://repo.spring.io/repo/" }
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
        classpath("io.spring.gradle:dependency-management-plugin:0.6.0.RELEASE")
        // Gradle Download Task
        classpath("de.undercouch:gradle-download-task:3.1.1")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'idea'
apply plugin: 'spring-boot'
apply plugin: 'io.spring.dependency-management'
apply plugin: 'de.undercouch.download'
apply plugin: 'groovy'

sourceCompatibility = 1.8
targetCompatibility = 1.8

compileJava.options.compilerArgs = ['-Xlint:all']
compileTestGroovy.options.compilerArgs = ['-Xlint:all']
compileTestJava.options.compilerArgs = ['-Xlint:all']

eclipse {
    classpath {
        containers.remove('org.eclipse.jdt.launching.JRE_CONTAINER')
        containers 'org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8'
    }
}

idea {
    module {
        inheritOutputDirs = false
        outputDir = file("$buildDir/classes/main/")
    }
}

repositories {
    jcenter()
}

dependencyManagement {
    imports {
        mavenBom 'io.spring.platform:platform-bom:2.0.7.RELEASE'
    }
}

bootRepackage {
    mainClass = 'ksbysample.webapp.lending.Application'
    excludeDevtools = true
}

dependencies {
    // dependency-management-plugin によりバージョン番号が自動で設定されるもの
    // Appendix A. Dependency versions ( http://docs.spring.io/platform/docs/current/reference/htmlsingle/#appendix-dependency-versions ) 参照
    compile("org.springframework.boot:spring-boot-starter-web")
    compile("org.springframework.boot:spring-boot-starter-thymeleaf")
    compile("org.springframework.boot:spring-boot-devtools")
    compile("org.codehaus.janino:janino")
    testCompile("org.springframework.boot:spring-boot-starter-test")
    testCompile("org.spockframework:spock-core")
    testCompile("org.spockframework:spock-spring")

    // dependency-management-plugin によりバージョン番号が自動で設定されないもの、あるいは最新バージョンを指定したいもの
    compile("org.apache.commons:commons-lang3:3.4")
    compile("org.projectlombok:lombok:1.16.10")
    compile("com.google.guava:guava:19.0")
    testCompile("org.assertj:assertj-core:3.5.2")
    testCompile("org.jmockit:jmockit:1.27")
}

bootRun {
    jvmArgs = ['-Dspring.profiles.active=develop']
}

test {
    jvmArgs = ['-Dspring.profiles.active=unittest']
}

task downloadCssFontsJs << {
    def staticDirPath   = 'src/main/resources/static'
    def workDirPath     = 'work'
    def adminLTEVersion        = '2.3.6'
    def jQueryVersion          = '2.2.3'
    def fontAwesomeVersion     = '4.6.3'
    def ioniconsVersion        = '2.0.1'
    def bootstrapHonokaVersion = '3.3.7'

    // 作業用ディレクトリを削除する
    clearDir("${workDirPath}")

    // Bootstrap & AdminLTE Dashboard & Control Panel Template
    downloadAdminLTE("${adminLTEVersion}", "${jQueryVersion}", "${workDirPath}", "${staticDirPath}")

    // Font Awesome Icons
    downloadFontAwesome("${fontAwesomeVersion}", "${workDirPath}", "${staticDirPath}")

    // Ionicons
    downloadIonicons("${ioniconsVersion}", "${workDirPath}", "${staticDirPath}")

    // fileinput.min.js ( v4.2.7 )
    downloadBootstrapFileInputMinJs("${workDirPath}", "${staticDirPath}")

    // Bootstrap Honoka
    downloadBootstrapHonoka("${bootstrapHonokaVersion}", "${workDirPath}", "${staticDirPath}")

    // 作業用ディレクトリを削除する
    clearDir("${workDirPath}")
}

/* -----------------------------------------------------------------------------
 * メソッド定義部
 ---------------------------------------------------------------------------- */
void clearDir(String dirPath) {
    delete dirPath
}

void downloadAdminLTE(String adminLTEVersion, String jQueryVersion, String workDirPath, String staticDirPath) {
    download {
        src "https://codeload.github.com/almasaeed2010/AdminLTE/zip/v${adminLTEVersion}"
        dest new File("${workDirPath}/download/AdminLTE-${adminLTEVersion}.zip")
    }
    copy {
        from zipTree("${workDirPath}/download/AdminLTE-${adminLTEVersion}.zip")
        into "${workDirPath}/unzip"
    }
    copy {
        from "${workDirPath}/unzip/AdminLTE-${adminLTEVersion}/bootstrap/css"
        into "${staticDirPath}/css"
    }
    copy {
        from "${workDirPath}/unzip/AdminLTE-${adminLTEVersion}/bootstrap/fonts"
        into "${staticDirPath}/fonts"
    }
    copy {
        from "${workDirPath}/unzip/AdminLTE-${adminLTEVersion}/bootstrap/js"
        into "${staticDirPath}/js"
    }
    copy {
        from "${workDirPath}/unzip/AdminLTE-${adminLTEVersion}/dist/css"
        into "${staticDirPath}/css"
    }
    copy {
        from "${workDirPath}/unzip/AdminLTE-${adminLTEVersion}/dist/js"
        into "${staticDirPath}/js"
    }
    copy {
        from "${workDirPath}/unzip/AdminLTE-${adminLTEVersion}/plugins/jQuery/jQuery-${jQueryVersion}.min.js"
        into "${staticDirPath}/js"
    }
    delete "${staticDirPath}/js/pages"
    delete "${staticDirPath}/js/demo.js"
}

void downloadFontAwesome(String fontAwesomeVersion, String workDirPath, String staticDirPath) {
    download {
        src "http://fortawesome.github.io/Font-Awesome/assets/font-awesome-${fontAwesomeVersion}.zip"
        dest new File("${workDirPath}/download/font-awesome-${fontAwesomeVersion}.zip")
    }
    copy {
        from zipTree("${workDirPath}/download/font-awesome-${fontAwesomeVersion}.zip")
        into "${workDirPath}/unzip"
    }
    copy {
        from "${workDirPath}/unzip/font-awesome-${fontAwesomeVersion}/css/font-awesome.min.css"
        into "${staticDirPath}/css"
    }
    copy {
        from "${workDirPath}/unzip/font-awesome-${fontAwesomeVersion}/fonts"
        into "${staticDirPath}/fonts"
    }
}

void downloadIonicons(String ioniconsVersion, String workDirPath, String staticDirPath) {
    download {
        src "https://codeload.github.com/driftyco/ionicons/zip/v${ioniconsVersion}"
        dest new File("${workDirPath}/download/ionicons-${ioniconsVersion}.zip")
    }
    copy {
        from zipTree("${workDirPath}/download/ionicons-${ioniconsVersion}.zip")
        into "${workDirPath}/unzip"
    }
    copy {
        from "${workDirPath}/unzip/ionicons-${ioniconsVersion}/css/ionicons.min.css"
        into "${staticDirPath}/css"
    }
    copy {
        from "${workDirPath}/unzip/ionicons-${ioniconsVersion}/fonts"
        into "${staticDirPath}/fonts"
    }
}

void downloadBootstrapFileInputMinJs(String workDirPath, String staticDirPath) {
    download {
        src "https://github.com/kartik-v/bootstrap-fileinput/zipball/master"
        dest new File("${workDirPath}/download/kartik-v-bootstrap-fileinput.zip")
    }
    copy {
        from zipTree("${workDirPath}/download/kartik-v-bootstrap-fileinput.zip")
        into "${workDirPath}/unzip"
    }
    copy {
        from "${workDirPath}/unzip/kartik-v-bootstrap-fileinput-d540f7b/js/fileinput.min.js"
        into "${staticDirPath}/js"
    }
    copy {
        from "${workDirPath}/unzip/kartik-v-bootstrap-fileinput-d540f7b/js/fileinput_locale_ja.js"
        into "${staticDirPath}/js"
    }
    copy {
        from "${workDirPath}/unzip/kartik-v-bootstrap-fileinput-d540f7b/css/fileinput.min.css"
        into "${staticDirPath}/css"
    }
}

void downloadBootstrapHonoka(String bootstrapHonokaVersion, String workDirPath, String staticDirPath) {
    download {
        src "https://github.com/windyakin/Honoka/releases/download/v${bootstrapHonokaVersion}/bootstrap-honoka-${bootstrapHonokaVersion}-dist.zip"
        dest new File("${workDirPath}/download/bootstrap-honoka-${bootstrapHonokaVersion}-dist.zip")
        acceptAnyCertificate true
    }
    copy {
        from zipTree("${workDirPath}/download/bootstrap-honoka-${bootstrapHonokaVersion}-dist.zip")
        into "${workDirPath}/unzip"
    }
    copy {
        from "${workDirPath}/unzip/honoka/css"
        into "${staticDirPath}/css"
    }
    copy {
        from "${workDirPath}/unzip/honoka/fonts"
        into "${staticDirPath}/fonts"
    }
    copy {
        from "${workDirPath}/unzip/honoka/js"
        into "${staticDirPath}/js"
    }
}

かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Bootstrap テーマ Honoka と adminLTE で画面を作ってみる

お題

作ってみた画面はこんな感じです

Chrome

IE11

変更した内容のメモ書き

まずはターコイズブルーの skin を作成する

Honoka を入れたのに、adminLTE と組み合わせると日本語が綺麗でないよね？

Honoka と adminLTE を組み合わせるとなぜナビゲーションバーが大きくなるのか？

body の背景色が白だと今ひとつ見にくい

テーブルの項目名のセルの背景色はターコイズブルーより少し濃い目の青へ

`text-sm` を指定した時のフォントサイズが小さすぎる気がする

入力フィールドにフォーカスが当たった時の枠線の色味を元の Bootstrap のものに戻す

table や alert の下の余白が大きいのでもう少し小さくする

テーブルの罫線の色をもう少し濃くする

`form-inline` の定義が画面の幅が 767px 以下になると無効になる？

ソース

今回作成した template.html の全ソース

build.gradle

お題

作ってみた画面はこんな感じです

Chrome

IE11

変更した内容のメモ書き

まずはターコイズブルーの skin を作成する

Honoka を入れたのに、adminLTE と組み合わせると日本語が綺麗でないよね？

Honoka と adminLTE を組み合わせるとなぜナビゲーションバーが大きくなるのか？

body の背景色が白だと今ひとつ見にくい

テーブルの項目名のセルの背景色はターコイズブルーより少し濃い目の青へ

text-sm を指定した時のフォントサイズが小さすぎる気がする

入力フィールドにフォーカスが当たった時の枠線の色味を元の Bootstrap のものに戻す

table や alert の下の余白が大きいのでもう少し小さくする

テーブルの罫線の色をもう少し濃くする

form-inline の定義が画面の幅が 767px 以下になると無効になる？

ソース

今回作成した template.html の全ソース

build.gradle

`text-sm` を指定した時のフォントサイズが小さすぎる気がする

`form-inline` の定義が画面の幅が 767px 以下になると無効になる？