SpringBoot アプリ開発 6.CSS・画像の作成

連載記事「SpringBoot アプリ開発」を読み進めると、サンプルの Webアプリを制作することができます。

今回は、CSSと画像を作成していきます。

連載記事

SpringBoot アプリ開発の連載記事は以下の通りです。

1. 概要・使用プロダクト
2. プロジェクト作成・SQL作成
3. モデル・リポジトリの作成
4. コントローラー・メインの作成
5. HTML・JavaScriptの作成
6. CSS・画像の作成（今回の記事）
7. テスト・動作確認

目次

1. CSSの作成
2. ロゴの作成
3. ファビコンの作成

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リポジトリ

アプリのコードは、以下のリポジトリにもあります。

spring-boot-tweet - GitHub

次の連載記事

7. テスト・動作確認