連載記事「SpringBoot アプリ開発」を読み進めると、サンプルの Webアプリを制作することができます。
今回は、CSSと画像を作成していきます。
連載記事
SpringBoot アプリ開発の連載記事は以下の通りです。
目次
- CSSの作成
- ロゴの作成
- ファビコンの作成
1. CSSの作成
以下のCSSを作成します。
@charset "UTF-8"; body { background-color:#e8f5e9; font-family: Meiryo, sans-serif; font-size: 16px; } header div { background-color: #ffffff; border-bottom: 2px solid #91c594; padding-top:4px; padding-bottom: 4px; } main { margin-top: 50px; margin-bottom: 50px; } #tweet-form { background-color:#b2e1b4; border: solid 1px #5cb85c; border-radius: 10px 10px 0px 0px; padding: 15px 15px 10px; } #tweet-form textarea { border: none; resize: none; margin-bottom: 10px; } .tweet { background-color:#ffffff; border-left: solid 1px #5cb85c; border-right: solid 1px #5cb85c; border-bottom: solid 1px #5cb85c; padding: 15px 15px 10px 15px; } .tweet:hover { background-color: #f5fbf6; } .tweet:last-child { border-radius: 0px 0px 10px 10px; } .tweet .txt p { white-space: pre-wrap; word-wrap: break-word; margin-bottom: 5px; } .tweet .btn, .tweet .date { font-size: 14px; color: #7e7e7e; } .tweet .btn { margin-right: 2px; padding: 5px 10px 4px 8px; border: none; } .tweet .btn:hover { background-color: #5cb85c; color: #ffffff; } .tweet .date { margin-top: 6px; margin-left: 10px; } #modal-label { color: #5cb85c; }
2. ロゴの作成
以下の画像をPNG形式で保存します。
src/main/resources/static/img/logo.png
3. ファビコンの作成
以下の画像をICO形式で保存します。
src/main/resources/static/favicon.ico
GitHubリポジトリ
アプリのコードは、以下のリポジトリにもあります。