最終デザイン

ダッシュボードデザインでCSS Grid Layout（グリッドレイアウト）を使ったり、 z-indexを試してみたり、いろいろと試行錯誤してみました。

その結果、結局、全体データ表、基本条件と再描画ボタン、標準偏差別データ表を一つのユニットにして、グラフ表示部の右サイドに乗っけるような形でデザインしてみました。

これでデザインは最終になり、この後テストに入ります。

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

CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、そ...

developer.mozilla.org

positionプロパティの正しい使用方法を図解で詳しく紹介！

CSSのpositionプロパティは要素の位置を移動できるということは知っていても、使いこなせていない人も多いのではないでしょうか。positionプロパティを理解すれば、Ｗebサイトを作る上で重要な要素の移動が簡単にできるようになります。positionプロパティの機能を正しく活用して、分かりやすいＷebサイト制作を...

www.itra.co.jp

超便利！CSSでレイヤーのように重ねて表示する z-index

CSSで重なり順を調整できる便利なプロパティ z-indexの解説です。初心者でも使いやすいz-indexは、positionプロパティと併用する事で、自由なレイアウトが実現できます。

beginners-high.com