CSSフレームワーク 「Bootstrap」を活用しよう

10月から始まった「スマホ時代にふさわしい、 いまどきのWebサイトコーディング術」のセミナーも12回目をむかえました。今回は「CSSフレームワークを活用しよう!」ということで、主にBootstrapの使い方について学びました。講師はWebデザイナー、アートディレクターの黒葛原道さん。黒葛原さんはWebデザインをベースに、マークアップ、フロントエンド、サイト構築に係る業務全般、ディレクション、撮影、グラフィックデザインなどを手がけ、また各所でWeb制作に関する講師も担当されています。

 

CSSフレームワークとは

そもそもCSSフレームワークとは 、ボタンやナビゲーション、レイアウトなど あらかじめ用意されたCSSのことを指し、それらをHTMLに適用することで早くサイトを作ることができます。CSSフレームワークの中には、「レスポンシブ対応」「CSSを読 み込ませるだけ」「アニメーションやスライドショーなどの動きに対応」など、種類によって対応は様々。

フレームワークを使うメリットとしては、サイトのレスポンシブ化 ・モックアップ作成ツールとしてデザインやCSSに詳しくないエンジニアなどの非デザイナー・コーダーでも、簡単にサイトが作れたり、通常のコーディングに取り入れることで サイト構築の高速化ができる点にあります。CSSフレームワークは様々な種類があり、Bootstrap、Foundation、Semantic-UI、Materializeなどがありますが、今回は一番カンタンなBootstrapの使い方についてレクチャーいただきました。

 

Bootstrapとは

BootstrapとはTwitter社が開発したフレームワークで、現在のバーションは3.3.7.。ベータ版として4も存在し、Ver.3と4の違いとして「LessからSassに」「単位がremに」「基準フォントサイズが14px →16pxに」「グリッドシステム が floatからflexboxに ・ ブレイクポイントが 4つから5つに」などが特徴で、その他細かい変更もあるそうです。

BootstrapはHTMLにclassをつける作業ですが、HTMLにBootstrapで定義されたCSSをつけていく作業と思っていただくとイメージしやすいと、黒葛原さんは説明されていました。

この後、実際にBootstrapを起動し、黒葛原さんが手を動かす実際の画面を見ながら、受講生それぞれが実践しました。Bootstrapを使用するにも、基本はHTMLを理解していないと難しい部分があるので、順を追って身につけていきたいですね。

関連記事

  1. コーディング実践

  2. なんだか楽しそうなHTML5・CSS3