概要
本日は画面のデザインを良くする方法を解説する
基本的にはWeb画面の見た目をよくするということはCSSを使うが
今回はmdbootstrapというフレームワークを使う
CSSのみでWeb画面のデザインは可能だが自分で一からデザインするは大変だ
フレームワークを使うことで簡単におしゃれな画面にすることができる
実装
画面のデザインを整えるにあたって次の３つのステップに分けて解説をしてゆく
ToDoアプリの枠の作成
ToDoタスクの追加部分
ToDoタスクの表示および削除部分
の３つだ
ToDoアプリの枠の作成
まずは「ToDoアプリの枠の作成」についてだ
まず、headタグの中に次の3つのリンクタグと1つのscriptタグを作成してゆく
これらはフレームワークやアイコンを読み込んでいる
これらを宣言することでmdbootstrapが使用できるようになる
続いてリンク先のToDoリストを参考に、次のように2つのフォームをかこってゆく
これで試しにWebサーバを起動して画面を表示してみよう
すると、このようになる
枠で囲われるようになり、画面の中央に表示されるようになった
使用されているclassについて
使用しているclassはたくさんあって解説しているときりがないので主だったもののみ解説する
まずはcontainer、row、col、col-lg-9、col-xl-7についてだ
これらは全てグリッドシステムに関連するものだ
グリッドシステム
グリッドシステムというのはレイアウトの方法の一つだ
グリッドシステムでは画面を12分割して要素の配置を考えてゆく
また、グリッドシステムには行と列が存在する
表みたいな形でレイアウトを決めていく
containerはグリッドシステムを使用することを宣言する
rowはグリッドシステムの中の行を表す
そしてcolはグリッドシステムの中の列を表す
今回は一つの行の中に一つの列が存在するレイアウトということだ
col-lg-9やcol-xl-7は要素の幅を決定する
lgやxlはブレイクポイントを表し、9や7はカラム数を表す
ブレイクポイントというのは画面の表示を変更するポイントのことだ
Webサイトは色々な人が閲覧するが
どのような画面サイズで閲覧しているかも人それぞれだ
スマホ、タブレット、PCと何で見るかは人によって異なるわね
なので閲覧する際に使っている端末の画面サイズに応じて表示を変更するために
ブレイクポイントの考えが必要になる
lgは画面サイズが992px以上の場合xlは1200px以上の場合に適応される
つまり、col-lg-9は画面サイズが992px以上の場合適応され、カラム数9個分として表示される
続いてjustify-content-center、align-items-centerだ
justify-content-centerは横軸で中央に
align-items-centerは縦軸で中央に要素を配置するよう指示する
続いてはcard、card-bodyだ
これは表示の白いカードの部分を作るのに使われる
ToDoタスクの追加部分
まずはform-outline、form-control、form-labelだ
これは入力部分を変更する
続いて、btn、btn-primaryだ
これはボタンを変更することができる
ToDoタスクの表示および削除部分
今まではdivタグでToDoタスクを表示していたがtableタグを用いるよう変更している
tableタグの中にはtheadタグとtbodyタグがある
theadはヘッダーをtbodyは内容の要素だ
theadの中のtrは行を、thはヘッダセルを意味する
同様にtbodyの中のtrは行をtdはセルを意味する
つまりToDoタスクはtbodyのtdとして作成すれば良い
今回はthとtdを一つのtrに対して2つに統一している
つまり、一行に２つのセルが配置されることを意味している
先頭にチェックボックスを、２つ目にToDoタスクを配置している
そしてcssの説明にはいる
tableを付けることで簡単に見た目をおしゃれにすることができる
また、form-check-inputはチェックボックスのデザインを改善することができ
btn-dangerはボタンを赤くすることができる
