Web関連

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

0

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

前回はCSSフレームワークBootstrapの導入について説明しました。
前回説明したとおり、Bootstrapを使うことで、多くの作業(特にHTMLモック作成や管理画面HTML作成)の工数削減につなげることができます。今回はそんなBootstrapの機能の中から、私が実際の制作現場で使ってみて便利だと思った機能をいくつかピックアップして紹介したいと思います。

r-hashimoto_1506081.jpg

ボタンの作成

WEBシステムで一番使われるのがアクションのトリガーになるボタンです。しかしこのボタン、HTMLで書くのは意外と困難だったりします。

ボタンというからにはクリックした後に何かしらページ遷移やアクションを起こさなければならないのですが、<input type=”button” ~>で作ったボタンは、そのままでは何もアクションを持たずボタンが表示されるだけです(正確にいうと標準の属性にてアクションを起こす機能は付いていません)アクションを起こすためには「onClick」等の属性を追加し、javascriptを自分で作成しなければなりません。もちろん複雑な処理を入れる場合はjavascriptの組み込みは仕方ないのですが、リンクをするだけでも
<input type=”button” name=”***” value=”***” onClick=”javascrpt:location.href=’***'”>
となりとても冗長な記載になります。
このようなことは、そもそもHTMLというものがWEBシステムを作るものではなく、文書をインターネットで共有するために作られたものになるため仕方がないのかもしれません。HTML5になると専用の「button」タグができるため、属性で動作も制御できるようになりますが、まだ開発現場ではHTML5を使うことは少ないためどうしても上記のような記載をしなければならなくなります。

そんな時便利なのがBootstrapに備えられている「btn」クラスです。
この「btn」クラスを付けるだけでアンカータグのリンクテキストをボタンに変えることができます。

<a href=”***” class=”btn”>テキスト</a>
こんな感じに書くだけで

r-hashimoto_1506082.jpg

となります。
これはとても便利です。
私もちょっとしたリンクボタンを作る時に多様しているオススメの機能です。

テーブルのストライプ表示

テーブル(表組み)の装飾の一つの手法として、行の色を交互に変えていくストライプ(しましま)表示があります。
このストライプ表示、データ量の多いシステムの表デザインとしては見やすくとても良いものなのですが、実際に実装しようとすると、とても骨が折れます。
私も過去にこのストライプ表示で表組みを作ったことがありますが、デザイン(CSS)を作るだけで多大な時間を費やしてしまいました・・・。調べてみると分かるのですが、このストライプ表示をするために、多くの方が苦労して実装しています。

しかし、この実装困難なストライプ表示、Bootstrapを使えば簡単に実装できてしまいます。
使いたい場合は「table」タグに「table table-striped」というクラスを追加するだけです。

例)
<table class=”table table-striped”>
<tr>
<td></td>
<td></td>
<td></td>
</tr>



</table>

r-hashimoto_1506083.jpgあっという間にできてしまうのがわかると思います。(今まで苦労してきたのが嘘のようです)
その他にも
テーブルを枠で囲む「table-bordered」
マウスポインタを行の上にホバーさせると行を強調して表示させる「table-hover」
等の便利なクラスも用意されています。
モーダルダイアログボックスの表示
モーダルダイアログボックスとは、「一度開いたダイアログボックスを閉じるまで、他の操作をできなくするタイプのダイアログボックス」のことです。最近では
画像の拡大表示やビューワーの機能として使われることが多くなってきています。(jqueryではライトボックスといわれています。こちらの方が一般的みたいですね)

現在ではよく使われる手法ですが、このモーダルダイアログボックスを実装するには、ライブラリのjsやcssを追加で読み込まなければならない等、意外と面倒です。私も組み込んでみましたが、デザインが崩れたり、組み込んでいるjsと追加したjsのバージョンがあわず動かなかった等、過去に多くのトラブルを経験してきました。
しかしBootstrapでは標準のjs、cssに機能が実装されているため、使いたいページでわざわざ追加のライブラリを読み込む必要はありません。

以下のようなウィンドウが標準で使えるようになっています。

r-hashimoto_1506084.jpg

まとめ

いかがでしたでしょうか。今回はBootstrapで便利な機能を紹介してきました。
ここで紹介したのは機能の一部なので、もっと役立つ機能がたくさんあります。昨今はBootstrapに関する書籍が多く出ているため、興味がある方はそれらの書籍を読んでみるのも良いかもしれません。もちろん便利と言ってもBootstrapだけでは表現できないこともあります。しかしHTMLモックやシステムテンプレートを作るうえでは必要な機能が充分そろっていると思いますので、工数削減を考えられている方は導入を検討してみてはいかがでしょうか。

0

あの定番セキュリティ対策に根本的な脆弱性!? 実は危険な「秘密の質問」前のページ

服は買うから借りるの時代??ファッションレンタルサイト次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    コンパクトカメラがなくなる?最近のスマホのカメラがすごい!

    みなさんは「スマートフォン(スマホ)」はお使いですよね?ほとんどの方が…

  2. Web関連

    ゲーミフィケーションとは?

    最近、ゲーミフィケーションという言葉を目にする方が多いのではないでしょ…

  3. Web関連

    これでパソコン用メガネも必要ない?目が疲れにくいWebデザインとは

    突然ですが皆さん、クライミングというスポーツをご存知ですか?'…

  4. Web関連

    初心者Webデザイナーおすすめ!Webデザインのコツ

    今回は、初心者Webデザイナーの方々に向けて、Webデザインのコツをご…

  5. Web関連

    リターゲティング広告の性質を逆に利用!新たなバナー広告活用法

    こんにちは!デザイナーの岡村です。ウェブ担当者の皆さん、「リターゲ…

  6. Web関連

    おいでよ、ミクロネーション!

    こんにちは。イギリスの正式名称を暗唱できる真野です。今回のコラムはフリ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ブログにコーポレートサイトにどうぞ!WordPressテンプレートの紹介
  2. Web関連

    レスポンシブで見せる写真の使い方
  3. Web関連

    CGでしょ!?疑うほど進化した期待のヘッドマウントディスプレイ
  4. AI関連

    働き方改革で変わる労働環境。AI(人工知能)サービスが生産性向上に大きく貢献
  5. サービス・新技術

    【非接触技術×AI】あらゆる場面で非接触がスタンダードとなる日は近い?
PAGE TOP