CodeZine(コードジン)

特集ページ一覧

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

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

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

3. Bootswatchなどからデザイン設定済みファイルを入手する

 最後にテーマを入手する方法について紹介します。

Bootstrapのフリーテーマを配布しているBootswatch
Bootstrapのフリーテーマを配布しているBootswatch

 Bootswatchは、テーマをオープンソースで開発/配布しているサイトです。Bootswatchでは15パターンにわたるテーマが公開されておりプレビューを見ることができます。テーマを適用するには、Bootstrap.cssをダウンロードして、Webサイトの同ファイルを上書きして保存するだけです。

Bootswatchのuniteテーマを適用して赤色に変更
Bootswatchのuniteテーマを適用して赤色に変更

 ここでは、Uniteというテーマをダウンロードして、赤系のデザインに変更しました。CSSだけではなくLESSファイルも入手することができるため、BootswachをベースにしてLESSで拡張していくことも可能です。

有償テーマを配布しているWrapBootstrap

 有償で販売されているテーマも存在します。WrapBootstrapというサイトでは、Bootstrap対応のデザインテンプレートが数多く公開されています。1サイト用、複数サイト用、再販用という3つの価格帯に分かれていますが、1サイト用であれば数ドルと値段も安いので、テンプレートを購入することを検討してもよいでしょう。

最後に

 以上、Bootstrapの基本について説明してきました。Bootstrapでは、ページを簡単にデザインできることが理解できたと思います。今回はASP.NET MVCのひな形で使用されている機能を中心に説明してきましたが、Bootstrapには多くの部品が提供されています。公式サイトは英語ですが、分かりやすい構成になっているので、一度目を通してみると良いでしょう。今後、ASP.NETでWebページを作るときにはBootstrapの活用を検討してみてはいかがでしょうか。

参考資料



  • 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