flexbox でレイアウトを組みたい話
はじめに
- ASP.NET Core + TypeScript ってみる 1
- ASP.NET Core + TypeScript ってみる 2
- ASP.NET Core + TypeScript ってみる 3
- PostCSS 、 Autoprefixer の力を借りたかった話
とりあえずベンダープレフィックスの件は解決できました(多分)。
ということで、 flexbox を使ってレイアウトを組んでみたいと思います。
- CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート - MDN
- CSS flexible box の利用 - CSS: カスケーディングスタイルシート - MDN
- これからのCSSレイアウトはFlexboxで決まり！ - Webクリエイターボックス
- 日本語対応！CSS Flexboxのチートシートを作ったので配布します - Webクリエイターボックス
- CSS Flexbox の基礎知識と使い方を詳しく解説 - コリス
まずはレスポンシブデザインにはしないことにして、かつベンダープレフィックス無しでの指定に対応している・個人的に一番よく使っている Firefox をベースに作ってみたいと思います。
Autoprefixer や IE は？というところですが、まずはレイアウトを組んで、そのあと対応としたいと思います。
(その方法が良いのかどうかはわかりませんが)
外枠を作る
まず各エリアの外枠を作ってみることにします。
mainPage.html
< !DOCTYPE html>
< html lang="jp">
< head>
< meta charset="utf-8">
< title>main
< link rel="stylesheet" type="text/css" href="../src/page.css" >
< /head>
< body>
< header id="global_header">
< /header>
< section id='page_title'>page title< /section>
< div id='container'>
< section id='search_area'>
< /section>
< section id='item_view'>
< div id='search_result'>
< /div>
< div id='image_view'>
< /div>
< /section>
< /div>
< /body>
< /html>
page.css
html{
height: 100%;
width: 100%;
margin: 0px;
}
body{
height: 100%;
width: 100%;
margin: 0px;
min-width: 900px;
min-height: 600px;
}
header{
width: 100%;
height: 5%;
background-color: cornflowerblue;
}
#page_title{
width: 100%;
height: 5%;
background-color: aqua;
}
#container {
display: flex;
flex-direction: row;
width: 100%;
height: 90%;
background-color: gray;
}
#search_area{
background-color: pink;
flex: 1;
}
#item_view{
flex: 3;
}
#search_result{
height: 50%;
background-color: darkgoldenrod;
}
#image_view{
height: 50%;
background-color: greenyellow;
}
表示結果はこちら。
何となくで書いた割には良い感じですね( ´∀｀)bｸﾞｯ!
中のアイテムを追加していく
では中身を追加していきます。
まずは header から。
タイトルとボタンを追加してみます。
mainPage.html
～省略～
< header id="global_header">
< h1>Hello world!< /h1>
< button id='header_share'>Share< /button>
< /header>
～省略～
結果はこちら。
。。。謎のスペースが生まれています。
この理由は先ほど追加した h1 。
margin-top がデフォルトで追加されているらしく、その分が白いスペースとして表示されていたようです。
ということで、 h1 の margin-top を 0 にします。
ついでに margin-left 、 テキストカラーも変えておきます。
page.css
～省略～
header h1{
color: whitesmoke;
margin-top: 0;
margin-left: 10px;
}
～省略～
両端に並べたい
今のままだと文字とボタンが左寄せで表示されているので、これを両端に並べてみます。
page.css
～省略～
header{
width: 100%;
height: 5%;
background-color: cornflowerblue;
display: flex;
flex-direction: row;
justify-content: space-between;
}
～省略～
mainPage.html
～省略～
< header id="global_header">
< h1>Hello world!< /h1>
< nav id='header_share_area'>
< button class='header_share'>Share1< /button>
< button class='header_share'>Share2< /button>
< /nav>
< /header>
～省略～
justify-content: space-between を使うことで、子どもの要素を両端 → 中間の順で並べてくれます。
左側のレイアウト
左の領域は検索条件を指定する領域にしたいと思います。
ということで、思い付きで要素を並べます。
mainPage.html
～省略～
< section id='search_area'>
< div id='search_frame'>
< div id='search_title'>検索< /div>
< div id='search_query'>
< label id='search_title_query'>キーワードで検索< /label>
< input type='text' id='search_query_text'>< /input>
< /div>
< div id='search_check'>
< label>チェック< /label>
< ul>
< li>
< input type='checkbox' value='search_availale'>available< /input>
< /li>
< li>
< input type='checkbox' value='search_availale_2'>available2< /input>
< /li>
< /ul>
< /div>
< div id='release_data'>
< label>発売日< /label>
< input type='date' value='search_relase_date_from'>< /input>
< label>～< /label>
< input type='date' value='search_relase_date_to'>< /input>
< /div>
< div id='search_submit'>
< button id='search_button'>検索< /button>
< /div>
< /div>
< /section>
～省略～
そのまま表示するとこんな感じ。
これを縦に並べていきたいと思います。
テキストボックス
とりあえず簡単そうかつ上の要素であるテキストやテキストボックスから。
page.css
～省略～
#search_frame{
width: 90%;
height: 90%;
margin: 5%;
background-color: white;
}
#search_title{
text-align: center;
color: aliceblue;
background-color: green;
height: 4%;
margin-top: 2%;
}
#search_query{
height: 10%;
padding-top: 5%;
width: 80%;
margin-left: 10%;
}
#search_query input{
width: 100%;
}
～省略～
input (テキストボックス) の幅を 100% にしているのは、他の要素の幅と合わせたかったためです。
チェックボックス
次はチェックボックス。
横に並んでいるため、まず縦並びにする必要があります。
最初は下記のように flexbox を使って並べようと考えていました。
mainPage.html
～省略～
< div id='search_check'>
< label>チェック< /label>
< input type='checkbox' value='search_availale'>available< /input>
< input type='checkbox' value='search_availale_2'>available2< /input>
< /div>
～省略～
page.css
～省略～
#search_check{
height: 14%;
width: 80%;
margin-left: 10%;
display: flex;
flex-direction: column;
}
～省略～
結果はこの通り。
チェックボックスの □ とラベル部分が別々に並べられてしまいました／(^o^)＼
flexbox を使って正しく並べる方法もあるだろうとは思うのですが、今回はリストを使って並べてみることにしました。
mainPage.html
～省略～
< div id='search_check'>
< label>チェック< /label>
< ul>
< li>
< input type='checkbox' value='search_availale'>available< /input>
< /li>
< li>
< input type='checkbox' value='search_availale_2'>available2< /input>
< /li>
< /ul>
< /div>
～省略～
page.css
～省略～
#search_check{
height: 14%;
width: 80%;
margin-left: 10%;
}
#search_check ul{
list-style: none;
padding-top: 0;
margin-top: 0;
padding-left: 0;
}
#search_check li{
margin-top: 1%;
}
～省略～
ul において、 list-style を none にすることで・をなくし、デフォルトでは左のラインより右に表示されてしまうので、 padding-left を 0 にしています。
残り(テキストボックス、ボタン)
残りの日付入力用のテキストボックスと、検索ボタンも配置します。
mainPage.html
～省略～
< div id='release_data'>
< label>発売日< /label>
< input type='date' value='search_relase_date_from'>< /input>
< label>～< /label>
< input type='date' value='search_relase_date_to'>< /input>
< /div>
< div id='search_submit'>
< button id='search_button'>検索< /button>
< /div>
～省略～
page.css
～省略～
#release_data{
display: flex;
flex-direction: column;
height: 18%;
width: 80%;
margin-left: 10%;
}
#release_data input{
width: 100%;
}
#search_submit{
width: 80%;
margin-left: auto;
margin-right: 10%;
text-align: right;
}
#search_submit button{
width: 80px;
}
～省略～
ボタンがなかなか右寄せできずにあれこれ試していたのですが、 text-align で一発という。。。
ラベルはともかく、 text-align が何に有効なのかを把握しておかないと地味にハマりそうです。
結果
結果としてこうなりました。
もう少しデザイン的にこだわった方がとかある気はしますが、いったんこれで止めて次に進めることにします。
(白い枠の部分はもう少し縦を短くしても良さそうですが)
ほとんど触れませんでしたが、 input の type を date にするだけで、 DatePicker まで表示してくれるのはすごいですね！
ただ、これブラウザごとに違いがあったりするようです
(下記は 2017 年の情報であり、 Firefox を含めた今のモダンブラウザは違う状況だとは思いますが)。
。。。ん？ ブラウザごとの違い。。。？
