ウェブ技術 デジタルトランスフォーメーション技術 人工知能技術 セマンティックウェブ技術 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」等がある。これらに対する紹介は次回行う。
Chinoba
Intelligence as Relationship
Research Platform
founded by
Masao Watanabe
AI Systems Architecture
Decision Trace
Human–AI Coordination
Algorithmic Governance
Related Research
この記事は Chinoba Knowledge Base の一部です。
コメント
[…] 前述に続き、参考図書の紹介を行う。 […]
[…] これらのツールを実際に活用する為には、更に細かな体裁をCSSの設定にて整え、出力結果の調整等にreactの汎用UIモジュールであるMaterial-UIを加えることが必要となるが、それらに関しては後日説明する。 […]
[…] 次回は、技術の話に戻り、前回述べたElasticsearchの体裁の調整であるCSSについて述べる。 […]
[…] ウェブのレイアウト調整(CSS)(1) […]
[…] ウェブのレイアウト調整(1) 2カラム左サイドバー構成 […]