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

関連記事

  1. SNS関連

    GUに学ぶ!ファッション系ECのSNS活用術

    みなさん、洋服を買うときは何を参考にしていますか?数年前までは…

  2. Web関連

    情報を守ろう!はじめの一歩は机のお片付け!

    突然ですが、普段皆さんが仕事をしている机は綺麗ですか?必要なモノはすぐ…

  3. Web関連

    機械学習で進化した将棋界

    今回は機械学習について、とても興味深い事例がありましたので、ご紹介した…

  4. Web関連

    心に響く!採用サイトのキャッチコピー

    こんにちは!ここ最近花粉の所為かくしゃみ鼻水が辛い角田さんです。今年…

  5. Web関連

    ネット上だけではない?あなたの会社はセキュリティ対策できていますか?

    昨今ネット上でのセキュリティ対策やパスワード管理などの重要性が取りざた…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    あなたは分かってる?面接時に心がけておきたい3つのマナー
  2. Web関連

    リモートワークで働く際に知っておきたい6個のポイント
  3. Web関連

    本当はPerfumeの方が好きだけど話題のSTAR WARSについて紹介します。…
  4. AI関連

    人工知能(AI)がクレーム対応にはベター
  5. Web関連

    毎日見たくなるオウンドメディアサイトとは?
PAGE TOP