HTML5 UI・UX・CSS

業務システムに使える基本的なHTML5レイアウトのテンプレート

投稿日:

デザインが軽視されがちな業務システムの管理画面。モック作成も担当範囲であれば、どのようなテンプレートを使うべきだろうか。

HTMLテンプレ―トによって見た目の制御が容易になるので、ぬかりなくやっておこう。

CSSを使ってやるのか、それともBootstrapを使ってグリッド状にやっていくのか。どのようにHTMLを書けば保守性が高いか調査した。

HTML5のdiv要素を使った基本的なテンプレート

http://www.webdlab.com/labs/layout-float/ の「2. 2カラムレイアウト」が基本になる。

ヘッダーには<header>が、フッターには<footer>が使用されているHTML5準拠のコーディングである。

真ん中のメインのエリアは<div id="container">として定義され、その中を<div id="column1">と<div id="column2">に分けている。

column1はfloat:leftで、column2はfloat:rightである。

Bootstrapを使ったグリッド型テンプレート

Bootstrapはメディアクエリを使用したレスポンシブテンプレートである。

HTML5の<header><footer>要素を使えば、メディアクエリを使わなくてもレスポンシブ対応してくれるのかと思っていたが、そうではなかった。

<header><footer>などのはセマンティックウェブ=構造化のためのクエリであり、レスポンシブ対応とは関係ないことがわかった。

気になるのが<article><section>タグというHTML5から追加された要素だが、これは<div>を使っておくのがよさそうだ。

業務システムは検索エンジンに読み込ませる必要がないからである。

<参考>

https://sole-color-blog.com/blog/65/

-HTML5, UI・UX・CSS

Copyright© SIerからWeb系自社開発に転職!失敗して感じたたった1つの後悔 , 2019 All Rights Reserved.