本特集ではToDoアプリで使用するWebページの作成を行います。
WebアプリはWebページと、そこからの入力を処理するサーバサイドで構成されているのでWebページを作れば半分くらいは完成した！と思って良いんじゃないでしょうか。
僕はこれまで CSSを学習したことはなく、初めて自分で思い描いたWebページのデザインを行っていきます。
ページデザインを決める
まずはページのデザインを作っていきます。プロのデザイナーはイラストレータなんかを使ってカッコ良いページデザインを作っていきます。
しかし、アマチュアプログラマーの僕にはイラストレータを扱う技術はないのでGoogleスライドで作成しました。
以下の2ページを作成することにします。
登録したToDoの一覧を表示するページと、新しいToDoを登録するページです。
シンプルながら、ToDoアプリとしては十分なレイアウトになっています。
HTMLを書く
デザインが決まったので、まずは骨組みであるHTMLを書いていきます。
コンテンツが少ないので、書くのに時間はかかりません。
それぞれの要素（タグ）についてWebで調べながら以下のように作成しました。
やること一覧ページ
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>BrookTask</title>
<link rel="stylesheet" href="./css/master.css">
</head>
<header>
<h1>Brook ToDo</h1>
</header>
<body>
<h2>やること一覧</h2>
<table>
<tr>
<td class="todo-data">やること１</td>
<td class="edit-button">編集</td>
<td class="delete-button">削除</td>
</tr>
<tr>
<td class="todo-data">やること２</td>
<td class="edit-button">編集</td>
<td class="delete-button">削除</td>
</tr>
<tr>
<td class="todo-data">やること３</td>
<td class="edit-button">編集</td>
<td class="delete-button">削除</td>
</tr>
</table>
<div class="submit-button">
<button type="button" name="button">やること登録</button>
</div>
</body>
</html>
やること登録ページ
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>BrookTask</title>
<link rel="stylesheet" href="./css/master2.css">
</head>
<header>
<h1>Brook ToDo</h1>
</header>
<body>
<h2>やること登録</h2>
<form action="./..." method="post">
<div class="label">
<label for="todo">新しいやること</label>
</div>
<input class="input-form" type="text" name="new-todo" id="todo">
<div class="button">
<input class="submit" type="submit" name="submit" value="登録">
</div>
</form>
</body>
</html>
HTMLだけの状態で表示すると以下のように表示されます。
デザインする
さて、ここからCSSを使ってデザインしていきます。
CSSの基本的な書き方は別の記事で紹介しているので、わからない人はそこを見てください。
一覧ページのCSS
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
display: grid;
grid-template-rows: 100px 100px 300px auto;
background-color: #F7F7F7;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
header{
background-color: #93C47D;
margin: 0;
padding: 1rem;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
h1 {
font-family: "Verdana";
font-size: 3.0rem;
text-align: center;
}
h2 {
font-size: 2.0rem;
font-family: Meiryo;
font-weight: bold;
text-align: center;
padding: 1rem;
text-decoration: underline;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
table{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
tr{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
table{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
td{
text-align: center;
background-color: #93C47D;
font-size: 1.6rem;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
td.todo-data{
text-align: left;
grid-column-start: 2;
grid-column-end: 5;
padding-left: 20px;
}
td.edit-button{
grid-column-start: 6;
grid-column-end: 7;
margin-right: 10px;
}
td.delete-button{
grid-column-start: 7;
grid-column-end: 8;
margin-right: 10px;
}
button{
font-size: 1.6rem;
background-color: #93C47D;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 200px;
height: 50x;
position: center;
}
.submit-button{
text-align: center;
}
やること登録ページのCSS
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
display: grid;
grid-template-rows: 100px 100px 300px;
background-color: #F7F7F7;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
header{
background-color: #93C47D;
margin: 0;
padding: 1rem;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
h1 {
font-family: "Verdana";
font-size: 3.0rem;
text-align: center;
}
h2 {
font-size: 2.0rem;
font-family: Meiryo;
font-weight: bold;
text-align: center;
padding: 1rem;
text-decoration: underline;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
form{
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
label{
font-size: 1.2rem;
margin-top: 100px;
}
.label{
grid-column-start: 3;
grid-column-end: 7;
grid-row-start: 0;
grid-row-start: 1;
margin-top: 25px;
}
.input-form{
grid-column-start: 3;
grid-column-end: 7;
grid-row-start: 1;
grid-row-start: 2;
margin: 10px 0;
}
.button{
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 2;
grid-row-start: 3;
position: center;
}
.submit{
width: 80px;
height: 40px;
background-color: #93C47D;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
頑張ってCSSを手書きしていった結果が以下です。
ま〜、なんとか体裁を整えましたが、とにかくデザインがカッコよくないですね。
ボタンの形とか、文字の浮き上がり方とか、全然納得いく形に仕上がりませんでした。
ここまで持っていくのに5時間程度かかってます。
ごまかしごまかし作成したので、Webブラウザの大きさを変更したらデザインが崩れます。
特に難しかったのが各要素の配置の仕方です。
HTMLは要素を上から順番に並べていくだけで、ページのどこに配置するのかはCSSで記述する必要があります。
要素の大きさや、各要素の感覚など、一つ一つ調整していくのが大変でした。
今は、グリッドという手法を使って配置を行うことが主流のようです。
グリッドについては別記事でイラストでまとめておいたので是非ご覧ください。
さて、今回はToDoアプリのフロントデザインを2ページ分行っていきました。
ここにJavascriptなんかでかっこいい動きをつけていくなんて、いつになったら出来るのでしょうか。
このままではWebアプリを作りきるのに何年かかるかわからないので、次はCSSのフレームワークであるBootstrapを使ってデザインを行ってみようと思います。
上記のような素人丸出しのデザインが、Bootstrapによってどこまで洗練されるのか楽しみです。
コメント