BLOGスタッフブログ

Twitter Bootstrapを利用する4

Twitter Bootstrapは、その名の通りTwitterが提供しているcssフレームワークです。
今回は、新規にページを作る場合を考えてみます。 前回は、既存のページをブートストラップに対応させる内容でした。 今回は新規ページですから、初めからブートストラップを考慮した作りにしましょう。 と言いたい所ですが、解説はあくまで「既存のwebサイト(システム)」にブートストラップを組み込む内容なので、 HTMLタグ構造や構文は可能な限り他のページ資産と同じ作りにしていきます。 ページは以下の登録系の画面を想定します。 ※オブジェクトの配置は適当です。項目名も雰囲気程度と思ってください。(´・ω・`) 今回はブートストラップのいくつかの機能を使ってみます。 1) 項目名の色分け 項目名を必須/任意で色分けしてありますが、これはブートストラップの「ラベル」を利用しています。 2) 検索・カレンダー どちらもリンク・ボタン的なオブジェクトを想定していますが、ブートストラップの「バッチ」を使用したオブジェクトです。 3) ボタン ボタンもブートストラップの「ボタン」を使用したオブジェクトです。 上記のように、ブートストラップ側で用意された見た目がある場合、必須マークや各種カラーリングを決めないでもよいので使い勝手がいいです。 (解説では1)~3)は全て標準カラーですが、既に利用している色にするために色合いを変えてもよいでしょう。) さて、今回までに作成したHTMLですが、ヘッダとフッタを除くとイメージ類は一切利用していません。 このため、ある程度の見た目を維持しつつ、画像ファイルでボタン等を作成する必要がなくなります。 特にwebシステムの開発では、場合によってはかなり開発が楽になるかもしれません。 今回はここまで。それではまた。

上松 博志が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します