UI・UX・CSS HTML5

業務システムに使える基本的な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/

-UI・UX・CSS, HTML5

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

業務システムの管理画面でBootstrapを使う

業務システムでBootstrapを使う理由 レスポンシブ対応(モバイル対応) HTML5対応 洗練されたデザインを簡単に作れる である。 なんとなく「ゆくゆくはモバイル(ipadなど)でも見れるように …

no image

業務システムのUIデザイン設計は質素でよいのか?

業務システムだからと言って 業務要件を満たせる項目が並んでいればいいのでしょうか? そういう人は成功しませんね。 UX(ユーザー体験)もしっかり設計しないと、良いサービスは生まれませんよ。 「一般人が …

no image

テーブルヘッダーを固定で、画面サイズに合わせて可変伸縮させる

技術要素 ウインドウサイズが変わったとき $(window).on(‘load resize’, function(){     // 処理を記載 }); ウインドウの幅を取得 $ …

no image

ブロック要素は縦に並び、インライン要素は横に並ぶ

CSS3にdisplay要素がある。 display:block → 次要素は下に来る(縦並び) display:inline → 次要素は右に来る(横並び) このようになる。

no image

業務システムにBootstrapは多分いらない

「モダンな画面が簡単にできるんですよ」なんて誰が言った? 俺が言った。誤りだった。取り消したい。 div地獄 試しに作っていて驚いた。divが10階層くらいになっている。 多分、自分の使い方が悪い。で …