いまさらBootstrapを使ってみて最近のCSSのトレンドなどを知る。

完全に乗り遅れていましたが、Bootstrapを使ってみました。

Bootstrapとは?

Bootstrapは、CSSフレームワークと呼ばれるものの一つで、以前はTwitter Bootstrapと呼ばれていました。

スクリーンショット 2014-09-07 14.05.07

Bootstrap

エンジニアならCSSというものの構文自体は簡単に理解できると思いますが、それで綺麗なサイトを作れるかと言われると、なかなかできません。

Bootstrapは、よく使うCSSを部品化して使えるようになっていて、簡単にWebサイトにスタイルを当てられるのがウリです。

導入

BootstrapのCSSとJavaScriptを組み込めば、すぐに使える状態になります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

簡単です。

テンプレートを試してみる

シンプルなナビバーのテンプレートを試してみます。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Bootstrapでは、HTMLの要素にclassをつけることで、デザインを当てていきます。ナビゲーションバーにはnavbarクラスを適用し、色を黒に反転させるためにnavbar-inverseクラスを適用し、ページ上部に固定するためにnavbar-fixed-topクラスを適用する、という形です。

こうしてCSSには触れずにマークアップだけすれば、それっぽいデザインのサイトができあがります。

スクリーンショット 2014-09-07 14.21.27

レスポンシブ対応もしていて、画面の幅を狭めると、ナビゲーションバーのメニューが開閉するような機能まで提供されています。

スクリーンショット 2014-09-07 14.21.49

これは便利!

読んだ本

この本を読みました。

index

はじめてのBootstrap

CSSなどの基本的な知識自体はあるので、30分くらいでざーっと読めて、すぐに書き始められました。

CSSの使い方の変化

最後に余談ですが、CSSの使い方の変遷について。

昔は<table>タグでレイアウトを構成し、CSSを書くとしてもhtmlファイルの中に直接、少しだけ書くということが多かったように思います。

<style TYPE="text/css">
a{
	color: #339933;
	text-decoration: none;
}
</style>

文字色は、<font>タグとかで変えていたので、それでも変えられないような細かいスタイルに限って使っていました。

それから、レイアウトは<div>で構成するようになって、<font>タグなんかは使われなくなって、htmlファイルにスタイルは書かれずに、外部のcssファイルに書くことが多くなりました。

<link rel="stylesheet" type="text/css" href="/css/style.css" />

この時は、htmlファイルは文書の構造だけを定義し、cssファイルにデザインを書くという完全な分業を目指していたように思います。

そして時が経って、Bootstrapなどは、またhtmlファイルにデザインの一部を書く方向に、ほんの少しだけ戻っているような印象です。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<!-- ...(略)... -->
</div>

これをデザインと受け取るか構造と受け取るかは極めて微妙ですが。

実際にサービスを開発するときには、デザイナー寄りの人がCSSを書き、エンジニアがプログラムを書きますが、HTMLを書くのをどちらがやるべきかは結構悩みます。でも、Bootstrapくらいの感じなら、エンジニアも手を出しやすくて、お互いにうまく回りそうです。

About katty0324

Comments are closed.

Scroll To Top