ダッシュボードデザイン

ダッシュボードとは、元々は自動車の「計器盤」のことを指し、複数の情報を一纏めにして表示するツールの事だそうです。

今回作成したグラフ、入力ボックス、統計数字をまとめてデザインしようと思います。

今までは、cssでfloat: left; を使ったり、display: flex; を使ったりしていたのですが…

どっちを使う？CSSで横並びのコンテンツ（Float or Flex） | Tech Media | W2株式会社

本日はHTML/CSSを使ったデザインについて書いていきたいと思います。早速ですが皆さん、コンテンツを「横並び」にしたい場合、どのようにCSSを書きますか？本記事では横並びにする際のやり方から、注意点までしっかりと解説していきます！

最近は、CSSの新しい機能で、CSS Grid Layout（グリッドレイアウト）を使うようですね。

CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN

CSS グリッドレイアウトモジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

《CSS》デザイナーでも簡単便利、Gridの神な実践機能を少しだけ伝えたい。 - Qiita

CSS Grid Layoutは、とても簡単というはなし。CSS grid starter kit - JSFiddleはじめにCSS Grid Layoutは複雑なレイアウトの実装をとても簡…

こんな感じにしたいです。

JS Bin

histgram

table-container

form

tableDiv

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="contentsbox">
  <div class="box1">histgram</div>
  <div class="table-container">table-container</div>
  <div class="box2">form</div>
  <div class="box3">tableDiv</div>
</div>
</body>
</html>

css

.contentsbox {
  display: grid;
  grid-template-columns: 8fr 1fr 1fr;
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column: 1;
  grid-row: 1 / 3;
  background-color: cyan;
}
.table-container {
  grid-column: 2;
  grid-row: 1;
  background-color: orange;  
}
.box2 {
  grid-column: 3;
  grid-row: 1;
  background-color: red;  
}
.box3 {
  grid-column: 2/4;
  grid-row: 2;
    background-color: yellow;
}