ウェブレイアウト調整の為のCSS、カラム構造の構築

ウェブ技術デジタルトランスフォーメーション技術人工知能技術セマンティックウェブ技術 ICT技術チャットボットと質疑応答技術ユーザーインターフェース技術プログラミング CSSとウェブデザイン本ブログのナビ

サマリー

CSS（Cascading Style Sheets）は、HTMLやXMLなどの文書の見た目やレイアウトを設定するための言語であり、CSSを使用することで、ウェブサイトやアプリケーションのスタイルやレイアウトを一元的に管理することができるようになる。また、CSS開発の効率を改善するために、Bootstrap、Foundation、Materialize、Bulma等のCSSフレームワークや、Sass、Less、Stylus等のプリプロセッサなどのツールが提供されている。

ウェブのレイアウト調整(CSS)(1)

ElasticsearchのUI構築で作成したページのレイアウト調整について述べる。まずシンプルなものとしては以下に記載されているものが参考になる。

初心者向け！CSSでできるレイアウト例4選 | UX MILK

レイアウトまとめとサンプルコード – 備忘録

これらの中で、今回のreactivesearchのUIでは２カラム左サイドバーの構成を取った。

コードとしては以下のものとなる。

body {
width:980px;
margin:0 auto;
}
.A {
height:150px;
background-color:#009b9f;
}
.B{
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:left;
margin-top:10px;
}
.C {
margin-left:260px;
width:720px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
.D {
margin-top:10px;
width:980px;
height:100px;
background-color:#009b9f;
}

後はReact側(reactivesearch側のそれぞれのコンポーネントを対応するクラス(上記のコードだとA,B,C,D)でwrapすれば良い(例えば以下のようなコード)

<div className=”A”> コンポーネント</div>

CSSに関する参考図書としては「web設計者のためのCSS教科書」「HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方」「Less Web Development Essentials」等がある。これらに対する紹介は次回行う。

webのレイアウトの調整(CSS)(2) – Deus Ex Machina より:

2021年2月2日 6:03 AM

[…] 前述に続き、参考図書の紹介を行う。 […]

返信
検索ツールElasticsearch(4) – Deus Ex Machina より:

2021年2月15日 6:27 AM

[…] これらのツールを実際に活用する為には、更に細かな体裁をCSSの設定にて整え、出力結果の調整等にreactの汎用UIモジュールであるMaterial-UIを加えることが必要となるが、それらに関しては後日説明する。 […]

返信
人工知能とテレビドラマ – Deus Ex Machina より:

2021年2月15日 6:29 AM

[…] 次回は、技術の話に戻り、前回述べたElasticsearchの体裁の調整であるCSSについて述べる。 […]

返信
人工知能、ML等のすべてのIT技術に活用されるウェブ技術の概要 | Deus Ex Machina より:

2022年2月11日 5:09 AM

[…] ウェブのレイアウト調整(CSS)(1) […]

返信
CSSによるウェブデザイン | Deus Ex Machina より:

2022年4月10日 12:54 PM

[…] ウェブのレイアウト調整(1) 2カラム左サイドバー構成 […]

返信