CodeZine(コードジン)

特集ページ一覧

ASP.NETに採用されたBootstrapでCSSデザイン変更

ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/07/08 14:00
目次

Bootstrapでのデザイン変更

 これまでダウンロードしたCSSファイルをそのまま使ってきましたが、BootstrapにはCSSを変更する方法も備わっています。デザインの変更方法としては、大きく以下の3つの方法が存在します。

  1. Bootstrapのサイトでカスタマイズ設定を行う
  2. LESSファイルに対してカスタマイズ設定を行う
  3. Bootswatchなどからデザイン設定済みファイルを入手する

1. Bootstrapのサイトでカスタマイズ設定を行う

 デザインを変更するには、Bootstrapサイトのカスタマイズページを利用します。このページからCSSの変更を行うことができます。試しに、Typographyというカテゴリの「@font-family-sans-serif」という入力ボックスに、「"MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif」と入れてみましょう。

フォントをMS Pゴシックを設定
フォントをMS Pゴシックを設定

 ヒラギノやメイリオが人気ですが、今回は違いが分かるように「MS Pゴシック」を設定しています。設定が完了したら、ページの一番下の「Compile and Download」ボタンをクリックしてCSSファイルをダウンロードします。ダウンロードした圧縮ファイルの中にbootstrap.cssファイルが含まれているので、Webサイト内のファイルを差し替えます。

フォントにMS Pゴシックが適用されていることを確認
フォントにMS Pゴシックが適用されていることを確認

 設定可能な変数は、100を超えるコンポーネントの色やサイズです。今回の手順ではWebページからCSSを生成できるので簡単ですが、毎回手作業で変更点を入力していくことは手間がかかります。その場合は、CSSを出力する仕組みである「LESS」を編集して管理することもできます。

2. LESSファイルに対してカスタマイズ設定を行う

 LESSは、CSS拡張メタ言語の一つで、変数/関数/階層化などを利用して効率的にCSSを生成できます。通常LESSを使用するためには、別途ツールを導入する必要がありますが、ここではVisual Studioの拡張機能を利用します。

Visual Studioの拡張機能画面からWeb Essentialsをインストール
Visual Studioの拡張機能画面からWeb Essentialsをインストール

 MicrosoftのMads Kristensen氏が開発している機能拡張「Web Essentials」をインストールします(ここでは執筆時点で最新のWeb Essentials 2013 for Update 2 RCを使用)。このツールをインストールするとNode.jsとLESSコンパイラであるlesscが「<ユーザーのLocalAppData>\Microsoft\VisualStudio\13.0\Extension」配下にインストールされます。

LESSファイルの入手

 Bootstrapのトップページからソースコード「bootstrap-3.x.x.zip」をダウンロードします。解凍したらLESSフォルダをVisual Studioのソリューションフォルダに追加します。BootstrapのLESSファイルの構成は以下のとおりです。

LESSファイルの内容
ファイル名 説明
variables.less 変数を記載するファイル
mixins.less Mixinという関数を記載するファイル
bootstrap.less BootstrapのCSS本体(他のコンポーネントをインポートして集約)
その他のless コンポーネント別に記載された設定ファイル

 LESSのMixinとは関数のようなもので、複数行に渡るCSSの定義を引数付で呼び出すことができます。そのため重複を減らしつつ複数個所で使用することができます。

LESSファイルの編集

 それでは、先ほどと同じ手順でフォントにMS Pゴシックを追加してみましょう。LESSは、テキストファイルなので、Visual Studioのエディタで編集できます。

Visual StudioでLESSファイルを編集
Visual StudioでLESSファイルを編集

 ここでは変数を定義する「variables.less」ファイルを開いてフォントの行を「@font-family-sans-serif: "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif」に変更しています。その後[WEB ESSENTIALS]メニューでLESSファイルのリコンパイルを選択すると、bootstrap.less配下にbootstrap.cssファイルが生成されます。この出力されたCSSを、Webサイトに反映するとフォントが変更されます。

 今回は、ASP.NETエンジニアに分かりやすい方法としてWeb Essentialsを使用しましたが、本格的な開発の時には、ソースファイルの配布物と同様にgrunt(ビルド自動化ツール)、less、csscomb(CSSの並び順を整形)、csslintrc(CSS構文チェック)を組み合わせるほうが良いでしょう。LESSの導入は少し手間がかかりますが、繰り返しCSSを出力する場合やBootstrapのバージョンアップ時にも対応が容易といったメリットがあります。

 ここまで、CSSを生成する方法を紹介してきました。これらが難しい場合には、別途CSSファイルを追加し単純にスタイルを上書きすることも可能です。チームのスキルに合わせて方針を検討すると良いでしょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築

著者プロフィール

  • WINGSプロジェクト 青木 淳夫(アオキ アツオ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きた...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5