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

関連記事

  1. Web関連

    セミナー開催で、新規顧客の獲得!…は思ったほど楽じゃない。

    毎日どこかで何かしらのセミナーが開催され、新たな情報、技術を学びたい方…

  2. Web関連

    Web制作会社ティファナが伝授!飲食店の集客増加のためのWebマーケティング手法

    全国各地の飲食店は、集客のためにインターネットを活用してマーケティング…

  3. Web関連

    映画のWebプロモーションを調べてみた!(1)

    どうも!自分勝手の好き勝手をモットーに記事を書いていくと決めた コンサ…

  4. Web関連

    売り上げの上がるECサイトを作りたい

    売上をアップさせるショッピングサイトを制作します「どのように売上を…

  5. Web関連

    プリントケーキで思い出に残るお誕生日を!

    今回は、お誕生日や結婚記念日など特別な日にぴったりのユニークなプリント…

  6. Web関連

    web制作会社が提案する最適なweb動画配信方法

    最近就寝前に世界遺産の風景映像を見ることにハマっております!就寝前…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    米政府からの依頼!?「ペンタゴンをハックせよ」
  2. Web関連

    整理術を磨いて仕事の処理速度をアップ?!佐藤可士和から学ぶ仕事の取り組み方
  3. AI関連

    AI導入で店舗業務をデジタル化 キーワードは「効率化と高度化」
  4. AI関連

    AI天気予報がビッグビジネスにつながる
  5. AI関連

    【人工知能(AI)×ホームページ解析】Googleアナリティクスの新機能「ユーザ…
PAGE TOP