Web関連

面倒な作業を楽にするCSSフレームワーク

0

こんにちはサーバーエンジニアの橋本です。

WEBシステムを構築しているシステムエンジニアの悩みの種の一つに、「管理画面のHTMLテンプレートを作る」、というものがあります。
システム構築の際は、なるべくシステムの設計・構築に時間をかけたいため、デザインに工数を掛けたくないのがエンジニアの本音ですが、管理画面はクライアントが一番利用するページでもあり、だからといって手を抜くわけにはいきません。(あまりデザインが良くないとクレームにつながります)。そんな時役立つのがBootstrapを始めとするCSSフレームワークです。これを使うと簡単にデザイン性のある管理画面を作成することができます。
今回はそんなWEBシステム構築の際(特に管理画面構築の際)に重宝するようなツール・Bootstrapの紹介になります。

cssflame_15061701.png

Bootstrapとは

BootstrapとはCSSフレームワークの一つです。
と言っても、そもそもCSSフレームワークと聞いてピンとこない方も多くいるかと思います。
CSSフレームワークとは、CSSの書式指定やデザインを一つにまとめたライブラリーの集まり、のようなものです。
あらかじめCSSの定義やそのCSSで使うデザインが一つのセットとして提供されているため、そのフレームワークを組み込むだけで、簡単にHTMLに装飾を施すことができます。使う人はHTMLのタグに規則に従って「id」「class」を指定するだけです。

そのCSSフレームワークの中でも特に有名で利用されているのが今回説明するBootstrapになります。
その他にもいろいろなCSSフレームワークが出ていますが、もともとtwitter社内で作られたものであるということからの知名度と、組み込みが簡単なことから、CSSフレームワークとしては一番知られており、使っている人も多くいるのではないかと思います。(実際にこのBootstrapを利用して作られたサイトを最近良く目にします)
また、Jquery等のJSと組み合わせれば動的な動きを持たせることができ、かつレスポンシブWEBデザインに対応しているということも魅力の一つと言えます。リース当初は全くなかったのですが、昨今は関連の書籍も多く出てきました。それだけを見ても、注目を集めているといえるのではないでしょうか。

実際に私も昨今は多くの案件(システム)で利用しているのですが、簡単にデザイン性のあるWEBページを作ることができるという点でとても重宝しています。以前は管理画面のHTMLを自身で用意したりしていましたが、自身のデザインセンスの問題と、制作工数にかける時間の圧縮のため最近はBootstrapを使うようになりました。
もちろんBootstrapを使ってデザイン性のあるサイトを作ることもできます。ただ、どちらかと言うと、Bootstrapをはじめ多くのCSSフレームワークは、WEBサイト構築過程のサイトモック(WEBサイトの設計書のようなもの)やデザインにこだわる必要がないシステムの管理画面等に使われるケースが多いのではないでしょうか。

Bootstrapを使ってみる

では、早速Bootstrapの導入方法について説明したいと思います。

1.BootstrapのTopページにアクセスし、「Download Bootstrap」ボタンをクリックします。

cssflame_15061702.jpg

2.ダウンロードページ上にある「Download Bootstrap」ボタンをクリックします。

cssflame_15061703.jpg

3.展開されたフォルダの中に「css」フォルダー、「js」フォルダー、「fonts」フォルダーの3つのフォルダーが入っています。

4.ダウンロードページの下へスクロールすると「Basic Template」というタイトルの段落があります。
  そちらのHTMLをコピーして「3」で展開したフォルダに「index.html」というファイル名で保存します。

cssflame_15061704.jpg

5.以上で準備は完了です。「index.html」をブラウザで開きます。

cssflame_15061705.jpg

まとめ

いかがでしたでしょうか。
今回はBootstrapの紹介と導入の仕方について説明してきました。導入はそんなに難しいものではなかったのではないでしょうか。
Bootstrapは使い方しだいで多くの作業の工数削減につながります。いままで自分でCSSを作ってきたという方も、今後導入を検討されてはいかがでしょうか。
次回はこのBootstrapのHTMLへの組み込み方法を説明していきます。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

システム構築

0

スマートフォンアプリ広告で新たな利益獲得!前のページ

ホームページの更新メンテナンスに役立つPDCAサイクルの基本について次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    Web制作でも重要!顧客満足度を高めるための3つポイント

    ちょっと前にうちの社長が「本を読むときに、オススメ!コレめっちゃ便利」…

  2. Web関連

    OpenPNEを使うと、何が出来るの?

    こんにちは。ソーシャルメディアを使いこなせていない、コンサルティングの…

  3. Web関連

    【Webチームリーダー必見】自分のコピーを作る方法について

    目次- 自分のコピーを作るってどういうこと?- 仕事は、任せて…

  4. Web関連

    頭と心のストレッチ。 ホッと一息つく脱力系サイトまとめ

    2016年も約半分終わりました・・・。バリバリ仕事をこなしているであろ…

  5. Web関連

    スマホ?パソコン?マルチデバイスについて調べてみた。

    今やスマホ全盛期の時代。私たちの身の回りにあるのはガラケーではなく…

  6. Web関連

    通販サイトの構築や運営で失敗しないための3つのポイント!

    皆さん服は、店頭で買いますかそれともネットで買いますか。ネット…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    動画を長く見てもらうために、例をもとに考える。
  2. Web関連

    Web制作にも使えるかもしれない面白い心理学を集めてみました。No,3
  3. Web関連

    現場レベルのデータ分析。セルフサービスBI活用シチュエーションを考えてみた
  4. Web関連

    売り上げ(コンバージョン・問い合わせ数)を上げたい
  5. Web関連

    WEBフォント活用!手軽に使える日本語フォント
PAGE TOP