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

[su_button url=”https://deus-ex-machina-ism.com/?p=6407″ target=”blank”]ウェブ技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?page_id=3551″ target=”blank”]デジタルトランスフォーメーション技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?page_id=3707″ target=”blank”]人工知能技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?p=10″ target=”blank”]セマンティックウェブ技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?page_id=3704″ target=”blank”]ICT技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?p=20639″ target=”blank”]チャットボットと質疑応答技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?p=17486″ target=”blank”]ユーザーインターフェース技術[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?page_id=3696″ target=”blank”]プログラミング[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?p=23449″ target=”blank”]CSSとウェブデザイン[/su_button] [su_button url=”https://deus-ex-machina-ism.com/?page_id=12232″ target=”blank”]本ブログのナビ[/su_button]

サマリー

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では２カラム左サイドバーの構成を取った。

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

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

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

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