SpringBootでWebアプリ開発チャレンジ(2日目)

2日目は主にビュー部分の実装を進めていく。
ひたすらbootstrapのドキュメントを漁りながら進めていた…

ビュー部分全体の構成

src/main/resources/
├── application.properties
├── static
│   ├── css
│   │   ├── bootstrap-grid.css
│   │   ├── bootstrap-grid.css.map
│   │   ├── ・・・
│   │   └── custom.css
│   ├── img
│   │   └── user.ico
│   ├── index.html
│   └── js
│       ├── bootstrap.bundle.js
│       ├── bootstrap.bundle.js.map
│       ├── ・・・
└── templates
    ├── edit.html
    ├── month.html
    ├── new.html
    ├── setting.html
    └── year.html

  • 各htmlの構成はこちら
    • グリッドシステムのrowとcolを使って左サイドバーとメインコンテンツを分割
    • static/cssディレクトリにcustom.cssを作成し、追加したいcssを実装
      • bootstrap.cssの後に読み込む
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>KakeiboApp</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css" />
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../static/css/custom.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
</head>
<body>
    <!-- header -->
    <!-- ここにヘッダー部分のhtmlが入る --->
    <div class="container">
        <div class="row">

            <!-- left side bar -->
            <div class="col sidebar">
                <!-- ここに左サイドバー部分のhtmlが入る --->
            </div>

            <!-- Main contents -->
            <div class="col">
                <!--ここに各ページに特有のhtmlが入る --->
            </div>
    </div>

</body>
</html>

共通部分(ヘッダー、左サイドバー)

画面上部にヘッダー、画面の左側に左サイドバーを表示させたい。

ヘッダー

<nav class="navbar navbar-dark" style="background-color: #34302c;">
    <div class="container">
        <a class="navbar-brand"><h2 class="logo">KakeiboApp</h2></a>
        <div class="account">
            <ul>
                <li class="account-link"><img src="../static/img/user.ico" width="60%"></li>
                <li class="account-link"><span>ユーザー さん</span></li>
            </ul>
        </div>
    </div>
</nav>
  • custom.cssに記載したスタイルはこちら
/* header */
.navbar-content{
    max-width: 1024px;
    margin 0 auto;
}
.logo{
    color: #fff;
}
.account{
    padding-top: 5px;
}
.account ul li{
    display: inline-block;
}
.account :hover{
    cursor: pointer;
}
.account-link{
    color: #fff;
}
.account-link span{
    font-size: 16px;
}

左サイドバー

<!-- left side bar -->
<div class="col sidebar">
    <ul class="nav flex-column nav-pills">
        <li class="nav-item"><a class="nav-link active" href="../templates/new.html">入力</a></li>
        <li class="nav-item"><a class="nav-link" href="../templates/month.html">月別一覧</a></li>
        <li class="nav-item"><a class="nav-link" href="../templates/year.html">年間一覧</a></li>
        <li class="nav-item"><a class="nav-link" href="../templates/setting.html">設定</a></li>
    </ul>
</div>
  • せめてデフォルトの青色から好きな色に変えてみたい
    • bootstrap.cssの該当するcolorを書き換えても色変わらず…
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #58bb42;
}
/* ↑デフォルトは ##007bffです */
  • この部分をcustom.cssに書いたら適用された
    • html側でbootstrap.cssの後にcustom.cssを読み込むこと

収入/支出入力画面(new.html)

収入/支出入力フォーム

    <!-- outgo -->
    <div class="input-form tab-pane fade show active" id="outgo" role="tabpanel" aria-labelledby="outgo-tab">
        <div class="form-group row">
            <label class="col-sm-1 col-form-label">日付</label>
            <div class="col-sm-10">
                <input type="date" class="form-control">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-1 col-form-label">支出</label>
            <div class="col-sm-10">
                <input type="number" class="form-control">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-1 col-form-label">MEMO</label>
            <div class="col-sm-10">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>

月別一覧(month.html)、年間一覧(year.html)、設定(setting.html)

最終的にview部分のソースコードはこうなりました
* https://github.com/SunHigh105/KakaiboApp/tree/3587a2f68008ff3b0cdaabd95525de785534d334/src/main/resources

画面のイメージはこんな感じ

  • new.html

  • month.html

  • year.html

  • setting.html

修正したいところまだ沢山あってうずうずするけれど、キリがなくなるのでビューの実装は一旦ここまで!
続きはまた明日…


SNSでもご購読できます。

コメントを残す

*