前回の記事ではCSSを自分で作成してToDoアプリの画面デザインを作成しました。
そこで感じたのは、とにかくオシャレなデザインにするのが難しい、ということ。
CSSでオシャレなデザインを施すには
・オシャレなデザインを自分で考えられること
・自分で考えたオシャレなデザインをCSSで実現できること
の2つの能力が必要になります。
正直、どちらもめちゃくちゃ難易度が高いです。
そのため初心者がゼロから画面をデザインしようとすると、時間がいくらあっても足りません。
なので、Bootstrapを利用します。
これを使えば
・オシャレなデザインが初めから用意されている
・CSSファイルをインターネットからダウンロードすれば良い
（自分でCSSを書かなくて良い）
です。
では早速、Bootstrapで作成した画面を見ていきましょう。
なんとなく、おしゃれですよね？
オシャレか？と思われた人のために自作CSSでデザインした画面をもう一度お見せしますね。
Bootstrapを使った方のデザインの方が、洗練されたデザインになっていますよね？
そもそも、洒落たデザイン自体を自分でイメージすることが自体が難しいのでBootstrapで初めから用意されているデザインを使った方が効率的です
Bootstrapを使えばWebサービスとして提供する上でも差し支えのないレベルのデザインを実装できることをお分かりいただいたかと思います。
Bootstrapの使い方は簡単で、インターネットからBootstrapファイルをダウンロードしてくるだけです。
使い方はいくつかあるのですが、まず学習段階でのオススメはCSSのファイル自体をローカル端末にダウンロードする方法です。
ダウンロードしていたフォルダには、20個くらいのファイルが入っています。
その中で学習段階で利用するファイルは以下の通りです。
これらのファイルを使って、以下のようなフォルダ構成をとればBootstrapのデザインを自作HTMLファルに反映していくことができます。
実際にBootstrapで、どのようなデザインが用意されているのかはBootstrapの公式ホームページなんかでご確認ください。
というわけで、今回はBootstrapを使ってToDoアプリの画面作成を行いました。
今後も、可能な限りこういったフレームワークを利用して効率的な開発を行っていこうと思います。
次回はJavascriptフレームワークのReactを使って、このToDoアプリに少しだけ動きをつけてみようと思います。
おまけでHTMLファイルと、色を変えたりするのに使った自作CSSを載せておきます。
やること一覧ページのHTML
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>BrookTask</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/base.css">
<script src=".js/jquery-3.4.1.min.js"></script>
<script src=".js/bootstrap.min.js"></script>
</head>
<body>
<h1>Brook ToDo</h1>
<div class="container">
<h2>やること一覧</h2>
<div class="container">
<table class="table">
<tbody>
<tr>
<div class="row">
<th class="col-lg-2 col-sm-2" scope="row" >1</th>
<td class="col-lg-8 col-sm-8">やること1</td>
<td class="col-lg-1 col-sm-1"><button type="button" class="btn-sm btn-primary">編集</button></td>
<td class="col-lg-1 col-sm-1"><button type="button" class="btn-sm btn-primary">削除</button></td>
</div>
</tr>
<div class="row">
<th class="col-lg-2 col-sm-2" scope="row" >2</th>
<td class="col-lg-8 col-sm-8">やること2</td>
<td class="col-lg-1 col-sm-1"><button type="button" class="btn-sm btn-primary">編集</button></td>
<td class="col-lg-1 col-sm-1"><button type="button" class="btn-sm btn-primary">削除</button></td>
</div>
</tr>
<div class="row">
<th class="col-lg-2 col-sm-2" scope="row" >3</th>
<td class="col-lg-8 col-sm-8">やること3</td>
<td class="col-lg-1 col-sm-1"><button type="button" class="btn-sm btn-primary">編集</button></td>
<td class="col-lg-1 col-sm-1"><button type="button" class="btn-sm btn-primary">削除</button></td>
</div>
</tr>
</tbody>
</table>
</div>
<button type="button" name="button" class="btn btn-primary mx-auto d-block soushin">やること登録</button>
</div>
</body>
</html>やること一覧ページのCSS
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
background-color: #F7F7F7;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
h1{
background-color: #93C47D;
font-family: "Verdana";
font-size: 3.0rem;
text-align: center;
margin: 0;
padding: 1rem;
}
h2 {
font-size: 2.0rem;
font-family: Meiryo;
font-weight: bold;
text-align: center;
padding: 1rem;
text-decoration: underline;
}
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
color: #FFFFFF;
background-color: #608052;
border-color: #608052;
}
/* focusされた時の枠線の色 */
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
.btn-primary:hover {
color: #000000;
background-color: #79a167;
border-color: #79a167;
}
/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #000000;
background-color: #79a167;
border-color: #79a167;
}
.soushin{
margin-top: 40px
}やること登録ページのHTML
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>BrookTask</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/base2.css">
</head>
<header>
<h1>Brook ToDo</h1>
</header>
<body>
<h2>やること登録</h2>
<form>
<div class="row">
<div class="col-lg-8 mx-auto d-block">
<label for="todo">新しいやること</label>
<input class="form-control" type="text" name="new-todo" id="todo">
</div>
</div>
<button class="btn btn-primary mx-auto d-block soushin" type="submit">登録</button>
</form>
</body>
</html>やること登録ページのCSS
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
background-color: #F7F7F7;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
h1{
background-color: #93C47D;
font-family: "Verdana";
font-size: 3.0rem;
text-align: center;
margin: 0;
padding: 1rem;
}
h2 {
font-size: 2.0rem;
font-family: Meiryo;
font-weight: bold;
text-align: center;
padding: 1rem;
text-decoration: underline;
}
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
color: #FFFFFF;
background-color: #608052;
border-color: #608052;
}
/* focusされた時の枠線の色 */
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
.btn-primary:hover {
color: #000000;
background-color: #79a167;
border-color: #79a167;
}
/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #000000;
background-color: #79a167;
border-color: #79a167;
}
.soushin{
margin-top: 40px
}
コメント