CSS Nite @Co-Edo, Vol.7 「まるわかりTwitter Bootstrap」参加

昨日、東京・茅場町のコワーキングスペース「Co-Edo」で、CSS Nite @Co-Edo, Vol.7 「まるわかりTwitter Bootstrap」が開催されました。
私も参加してきました。

Twitter Bootstrapは、おおざっぱにいえば、「Webページのひな形」です。
あらかじめさまざまなCSSやJavaScriptが用意されていて、一般的なレイアウトや機能を持ったWebページを手軽に作ることができます。
例えば、以下のようにHTMLを組むと、2カラム／右サイドバーで、レスポンシブデザインのページのひな形ができます。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrapのページの例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <h1>サンプルページ</h1>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="span9">
          <h2>メイン</h2>
          <p>Twitter Bootstrapで作ったページの例です。</p>
        </div>
        <div class="span3">
          <h2>サイドバー</h2>
          <p>Twitter Bootstrapで作ったページの例です。</p>
       </div>
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

素のTwitter Bootstrapのままだと、Twitter風のページになりがちです。
しかし、CSSをカスタマイズすることで、オリジナル風に見せることもできます。
Twitter Bootstrapのサイトにスタイルガイドがありますので、それを見ればカスタマイズできます。

今回のCSS Niteでは、Twitter Bootstrapに至る背景と、基本的なカスタマイズ手順についての話がありました。
カスタマイズはハンズオン形式で行ったので、理解しやすかったです。
また、コマンドラインを使って、CSSやJavaScriptのビルド作業を自動化することについてもお話がありました。

Twitter Bootstrapは、存在は知っていましたが、まだ使ったことがなかったので、とっかかりとして参加しました。
話がコンパクトにまとまっていたので、参加して良かったです。

お知らせ

CSS Nite @Co-Edo, Vol.7 「まるわかりTwitter Bootstrap」参加

おすすめ