初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで

Posted under - Web Design

43

Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です!

Framework

Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。

今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。

ひょっとしたら、私みたいにフレームワークって何だろう?って思ってる人も多いかもしれないなーと思って、思い切ってブログにしてみました。

フレームワーク 目次

  1. 960 Grid System
  2. とっても可愛らしいボタンを作れるBon Bon Buttons
  3. HTML5 + モバイル対応のフレームワーク
  4. クロスブラウザの HTML5+CSS3 のフレームワークを使うと、IEでも HTML5 とか CSS3 が使えるの?
  1. WordPress にもフレームワークがあるの?
  2. 直感的な操作でレイアウトが組めるWordPressのフレームワーク
  3. フレームワークって何か分かってきた!

1. CSS 960 Grid System

フレームワークっていう言葉自体は、枠組みとか構造という意味。それでは、例えば CSS のフレームワークって何でしょう?説明するより実際に見てみた方が早いと思うので、代表的な CSS のフレームワークを使ってみたいと思います。

960 Grid System

960 Grid System

代表的な CSS フレームワークのひとつ、960 Grid System を使って、サンプルをひとつ作ってみました。960 Grid System は、CSS で簡単にグリッドを作ってくれる優れもの!例えば、以下のようなレイアウトが、簡単に作れちゃいます。

960 Grid System を使ったサンプル

4 columns
300px
class=”grid_4 alpha”

4 columns
300px
class=”grid_4 omega”

2 columns
140px
class=”grid_2 alpha”

2 columns
140px
class=”grid_2″

2 columns
140px
class=”grid_2″

2 columns
140px
class=”grid_2 omega”

sidebar
300px
class=”grid_4″

1.1. 960 Grid System を使ってみよう!

フレームワークという言葉は少し置いておいて、まずはこの 960 Grid System を使ってみましょう。まずは 960 Grid System のサイトから、ファイルをダウンロード。

DOWNLOAD

960 Grid System

960 Grid System フォルダの中身

960グリッドシステムのフォルダ

ダウンロードしたファイルを解凍すると、いっぱいフォルダが並んでいます … ちょっと訳がわからない … 難しそうって思ってしまうかもしれませんが、大丈夫!一個ずつフォルダの中身を見てみると、下記のような感じです。

  • app_plugin – Fireworks、Photoshop 用のプラグインが入ってます。
  • code – 基本的にこれを使います。
  • lisence – ライセンスについてのテキストが入ってます。
  • sketch_sheet – レイアウトを手書きで下書きできるように、スケッチ用のPDFファイルが入ってます。
  • template – Fireworks、Photoshop、Illustrator、Gimp などの、色んなソフトウェアでワイヤーフレームを作る時に便利なテンプレートファイルが入ってます。

この中で使うのは、codeフォルダの中のファイルだけです。では、code フォルダの中を見てみましょう。フォルダの中には、数枚の html ファイルと css、img フォルダがあるだけです。これなら難しくなさそうですね!よくあるサンプルと一緒です。

960 Grid System code フォルダの中身

code フォルダ

試しに demo.html をブラウザで開いてみると、以下のような 12カラムのグリッドできれいにレイアウトされたボックスが表示されると思います。

12カラムのレイアウト

960 グリッドシステム

960 Grid System – 1カラム 60px、カラム間 20px のマージン。

まず、960 Grid System は、960px のコンテナを、12個(他にも 16個、24個もデフォルトで用意されてます)のカラムに等分しています。1カラムの幅は 60px。そして左右に 10px ずつ padding が指定されています。なので 80px x 12 カラムで 960px なんですね!

このカラムは CSS のクラスを使って、簡単に 4カラム分の幅のボックスとか、8カラム分の幅のボックスとか、サイズを指定して使い分けていきます。どんなふうになるかは、サンプルを見てみてくださいね。

960 Grid Sample

1.2. 960 Grid System の使い方

それでは 960 Grid System を使ってみます。自分で HTML ファイルを用意したら、code フォルダ内の 960.css を外部ファイルとして読み込みます。必要なら、同じファイル内にある reset.css(リセット用)と text.css (フォントなどの指定)も一緒に読み込みます。

そしてまずはコンテナを作って、container_12 というクラスを付けておきます。

HTML
<head>
<link rel="stylesheet" href="css/reset.css" type="text/css" /> 
<link rel="stylesheet" href="css/text.css" type="text/css" /> 
<link rel="stylesheet" href="css/960.css" type="text/css" />
</head>
<body>
<div class="container_12">
</div>
</body>

次にレイアウトをコンテナの中に作っていきます。4カラム分の幅のボックスを作りたいときは、grid_4、8カラム分のボックスを作りたいときは grid_8 というふうに div タグにクラスを付けるだけです。

8:4 の 2カラムの場合
<div class="container_12">
  <div class="grid_8">メイン</div>
  <div class="grid_4">サイドバー</div>
  /* div じゃなくてもいいけど clear します */
  <div class="clear"></div>
</div>
6:3:3 の 3カラムの場合
<div class="container_12">
  <div class="grid_6">メイン</div>
  <div class="grid_3">サイドバー1</div>
  <div class="grid_3">サイドバー2</div>
  <div class="clear"></div>
</div>

気を付けるのは、全幅が12カラム分なので、クラスで指定した数字が、全部足して 12になるように調整します。そして一段作ったら、空の要素を作って class="clear"(フロート解除)します。

1.3. カラムを入れ子にする

各カラムは、もちろん入れ子(内包させる)こともできますが、ちょっと注意が必要です。というのは、各カラムには左右 padding10px ずつ指定してあので、そのまま入れ子にすると、入りきらずにレイアウト崩れをおこします。それを防ぐためのクラスが別途用意されているので、合わせて指定します!

入れ子にしたカラム

4 columns
300px
class=”grid_4 alpha”

4 columns
300px
class=”grid_4 omega”

2 columns
140px
class=”grid_2 alpha”

2 columns
140px
class=”grid_2″

2 columns
140px
class=”grid_2″

2 columns
140px
class=”grid_2 omega”

sidebar
300px
class=”grid_4″

ピンクの背景が親ボックスです!

子要素の、1番左側にくるカラムには、padding-left を 0 にするクラス、alpha を付けます。逆に 1番右にくるカラムには、padding-right を 0 にするクラス、omega を付けるだけです!

HTML
<div class="grid_8" id="main">
  <div class="grid_4 alpha">
   子要素 4 columns
  </div>
  <div class="grid_4 omega">
    子要素 4 columns
  </div> 
</div><!-- /main -->
<div class="grid_4" id="sidebar">
  ここはサイドバー
</div><!-- /sidebar -->
<div class="clear"></div>

1.4. カラムの左右に空白を作りたい

今まで紹介したやり方は、カラムの幅の合計が 12にならないといけませんでした。ということは、必ずきつきつにカラムを詰め込まなければなりません …。でもデザインによっては、もうすこし余白を作りたい場合もありますよね。

カラムの左右に余白を付けたレイアウト

3 columns
220px
class=”grid_3 prefix_1 suffix_1″

2 columns
140px
class=”grid_2″

3 columns
220px
class=”grid_3 prefix_1 suffix_1″

そんなときは、prefix_xsuffix_x(x は数字)というクラスを合わせて指定します。例えば以下のように書きます。

HTML
<div class="grid_4 prefix_2">
</div>
<div class="grid_4 suffix_2">
</div>

prefix_2 は、左に 2カラム分のスペース、suffix_2 は、右に 2カラム分のスペースってことです。

1.5. HTML で先に書いたメインカラムを右にしたい

今までのやり方だと、HTML に先に書いたものから順番に、左からレイアウトされていきました。でも、HTML ではメイン部分を先に書いて、レイアウト的には右に持ってきたい場合もあります。

左右を逆転させたレイアウト

8 columns
620px
class=”grid_8 push_4″

4 columns
300px
class=”grid_4 pull_8″

その為のクラスもちゃんと用意されています。さっきと同じように push_xpull_x(x は数字)というクラスを、同時指定してあげます。push_xpull_xposition プロパティを使ってオフセットするクラスです。

push は右側にオフセットしたいカラム数、pull は左にオフセットしたいカラム数という感じです。

HTML
<div class="grid_8 push_4">
</div>
<div class="grid_4 pull_8">  
</div> 
<div class="clear"></div>

960 Grid Sample

960 Grid System … 今回は 12カラムで紹介しましたけど、他のカラム数でも使えます。ジェネレーターもあって、好きなカラム数で作成したCSSファイルをダウンロードできるので、いろいろ試してみてください!

また、今回は固定幅のサンプルでしたけど、フレキシブルな幅、リキッドレイアウトに対応している CSS もあります。

2. とっても可愛らしいボタンを作れるBon Bon Buttons

じゃーグリッドシステムのことを CSS のフレームワークって言うんだ! … いいえ、違います!今度は CSS3 を使って、可愛らしいボタンを簡単に作ることができる Bon Bon Buttons を見てみます。

Bon Bon Buttons

Bon Bon Button

Bon Bon Buttons のサイトからファイルをダウンロードすると、HTML と CSS ファイル、それから 1枚の PNG 画像があります(2014年6月追記:サイトが閉鎖されて、ダウンロードできなくなってしまいました ….)

Bon Bon Buttons のフォルダの中身

Bon Bon Button

HTML を見ると、簡単なコードが書いてあるだけです。Bon Bon Buttons は a タグbutton タグなどに、決まったクラスを付けてあげるだけで、可愛いボタンに装飾してくれるフレームワーク。色も形も色々選べます!

クラスを付けるだけ!

他にもフォントを選べたり、サイズを変えたり、質感を変更したり、アイコンを付けたりいろいろできます!

HTML
<a class="button pink oval serif" haref="#">Button</a>

可愛いのでサンプルを作ってみました ;D

Go to Sample

少しのファイルを読み込んでクラスを指定してあげるだけで、簡単にかわいいボタンができました!

2.1. で、結局フレームワークってなんなの?

フレームワークとは、概念的な意味もあるっぽいので、言葉では少し説明しづらいんですけど、私たち Webデザイナーにとっては、Webサイトを作る時に利用すると、仕事を効率化してくれる便利な下地というか、骨組みといった感じでしょうか …。さっきのグリッドシステムや、この Bon Bon Buttons を利用する事で、ゼロから作らずに効率的に Webサイトを作る事ができますよね!

なので作る Webサイトによって、利用できるフレームワークは様々だし、それぞれに対応したフレームワークもたくさん公開されています!もうちょっと他のフレームワークを見てみましょう。

3. HTML5 + モバイル対応のフレームワーク

例えば Webサイトを HTML5 で作って、スマートフォンでも見れるように CSS3 の Media Queries を使ってみようかなーって思ったとします。

そのとき、IE8 以下は HTML5 に対応していないのでいろいろ準備も必要だし、CSS3 を使うので、その為の準備もしなくちゃなりません …。そういう下準備をしてくれてあるフレームワークだってあったりまします。

MEMO

CSS3 の Media Queriesって何?っていう人は、過去記事:CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書きを読んでみてくださいね!

また、IE8 以下を HTML5 に対応させる方法は、過去記事:はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろを読んでみてください!

3.1. HTML5 + CSS3 Media Queries ベースのフレームワーク

それでは HTML5 + CSS3 Media Queries でのモバイル対応向けのフレームワークのひとつ、Skeleton を見てみましょう。

Skeleton

Skeleton

今回もまた、ファイルをダウンロードして中身を見てみます。ダウンロードしてみると以下のようなシンプルな構造になっています。

skeleton フォルダの中身

Skeletonフォルダ

index.html を開いて見てみると下記のように HTML5 で書かれてます!(HTML5のフレームワークなので当たり前ですが …。)

HTNL
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

     <!-- Basic Page Needs
  ================================================== -->
     <meta charset="utf-8" />
     <title>Your Page Title Here :)</title>
     <meta name="description" content="">
     <meta name="author" content="">
     <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->

こんな感じで IE にだけクラスをつけたり、html5.js を読み込んだりしてます。description とかは、自分で入れるように空になってますねー。

スタイルシートはというと、下記の 3枚が用意されてます。

stylesheets フォルダの中身
  1. base.css
  2. layout.css
  3. skeleton.css
1. base.css

リセットと、基本的なスタイルを指定してあるだけの簡単なもの。あと、ボタンやタブなどのスタイルが指定してあります。

2. layout.css

Media Queries 用のスタイルシートです。

/* Mobile Landscape Only */
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) { /* ここにスタイルを書く*/ }

上記のように、各スクリーンサイズごとに指定があるけど中身は空っぽです。自分で書きこむようになっています!あと、コメントアウトされてますが、@font-face(Webフォント)を使う時の書式も書かれてます。

3. skeleton.css

これは 960px のグリッドシステムのスタイルシート。冒頭で紹介した 960 Grid System のようなグリッドシステムも付属されてます。

index.html にコンテンツを入れたり、base.css にスタイルを追加したりしていけば、HTML5 で Webサイトができちゃうって訳です。もちろん、layout.css には、スマートフォンとか iPad 用のスタイルを指定します。これでモバイル向け対応も OK です。グリッドシステムでレイアウトしていくなら、付属のグリッドシステムを使えばいいので簡単ですね!

3.2. だんだんフレームワークっていうものが分かってきた!

ちょっと乱暴に説明しすぎましたけど、こんな風に Webサイトを作る為に必要な準備段階での作業、ファイルをひとまとめにしてくれてる感じです。さっきよりもファイル数も種類も増えてきましたけど、フレームワークっていうものが、だんだん分かってきたかと思います!

あ、それから、skeleton – CSS3 Media Queries は、モバイル対応だけで、IEのことは考えてないので、必要なら別途対応してあげましょう。

4. クロスブラウザの HTML5 + CSS3 のフレームワークを使うと、IE でも HTML5 とか CSS3 が使えるの?

HTML5 + CSS3 のフレームワークって言葉をよく目にしますよね!そしてときどき、クロスブラウザを表記している HTML5 + CSS3 のフレームワークもあります。

でも、HTML5 はもちろん、CSS3 だって IE8 以下は使えません … そこで何も知らない私は、このフレームワークを使えば、HTML5 + CSS3 で Webサイトが作れて、IE でもちゃんと表示される!って思っちゃいます w (私だけかな?)

4.1. G5 Framework を見てみよう

HTML5 + CSS3 のクロスブラウザなフレームワーク、G5 Framework というフレームワークを見てみます。

G5 Framework

G5 Framework

G5 Framework のトップページで紹介されてる、同梱パッケージは以下の通り。

こんな風に IE を HTML5 に対応させるライブラリや、CSS3 に対応させるライブラリの他、グリッドシステムや、ちょっと便利な jQuery のプラグインなどがパッケージされています。これだけ揃ってれば、自分でいろいろ用意しなくても、HTML5 + CSS3 のサイトが作れちゃいますね!

上から 4番目の CSS3PIE は、IE でもある程度 CSS3 のプロパティを使えるようにできる優れもの!万能ではないけれど、使ったことがある人もたくさんいると思います。

1番上の Modernizr は、私はまだ使ったことがないので、レビューは出来ませんが、未対応ブラウザでもある程度 HTML5 や CSS3 に対応させることができる javascript ライブラリ。対応できない部分は、必要最低限の機能だけを提供する、プログレッシブ・エンハンスメントという考え方に基づいて作られているそうです。

Modernizr

Modernizr

HTML5 については、ブラウザの実装差異がまだまだあるけれど、Modernizr を利用して Audio や Video、Canvas などは使えるみたいですね(まだ試してません)!

また、CSS3 や HTML5 の欲しい機能だけジェネレートしてくれるみたいなので、いろいろ試してみたいですね!

DOWNLOAD

Modernizr

4.2. 結局クロスブラウザとはいうものの …

CSS でよく見かけるクロスブラウザという言葉は、IE でも Firefox でも、Chrome でも何でも、同じ様に表示させることを言いますよね。でも、HTML5 や CSS3 は、ブラウザ間の実装差異があるので、なかなかクロスブラウザという訳にはいかないようです。

各ブラウザごと、使えない要素やプロパティーについては、まだまだチェックが必要ですね!

今回は、G5 Framework しか紹介してませんけど、もちろん他に色んな HTML5 のフレームワークがあります!バンクーバーのうぇぶ屋さんでたくさん紹介されているので、リンクを貼っておきます。

5. WordPress にもフレームワークがあるの?

ここまで読んでくれた人は、もうフレームワークっていうものがどんなものか、何となくでも分かってくれたと思います!それでは最後に WordPress のフレームワークを見て終わりにします!

ブログソフトウェア WordPress でテーマを作るときにもフレームワークがあって、WordPress CODEX でもいくつか紹介されています!

いくつか紹介されているんですけど、その中からひとつ Sandbox というテーマフレームワークを見てみます!

Sandbox

Sandbox

  • WordPress – Free Themes Directory

    Sandbox

Sandbox は上記のように、ほとんど装飾されてない無地な感じのテーマです。結構前からあるテーマで、固定幅じゃなくて、フレキシブルなリキッドレイアウトのテーマフレームワーク。ダウンロードしてみると、フォルダの中は以下のような感じです。

Sandbox フォルダの中身

Sandbox フォルダ

いっぱいありますねー。ひと通りテンプレートファイルも揃ってるので、あとは CSS でスタイリングしていけば、オリジナルなブログができちゃいますね!

ファイルがいっぱいあって難しそうって思うかもしれません …。でも、必ずしも全部のファイルを使う必要もありません!簡単にテンプレートファイルの役割を説明すると以下のような感じです。

必須ではないけど使いたいファイル

上記は WordPress でブログを作った事がある人にはおなじみのファイルですね!

場合によっては使いたいファイル

上記は必ずしも使わなくてもいいファイルですね!なければ index.php や single.php で代用できます。詳しくは、過去記事:WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方を読んでみてくださいね!

固定ページ用

固定ページ用に 3種類のファイルが用意されてます。その他 translation フォルダや、po ファイルは、言語ファイル(WordPressは世界中で使われているので)なので気にしなくて OK です。

また、examples フォルダの中には、1カラムや 3カラムにするための CSS や、印刷用の print.css が入ってます。style.css の以下の部分を書き換えれば、簡単に 3カラムなどにする事が出来るようになってます!

CSS
@import url('examples/2c-l.css'); /* 2カラム左の場合 */

@import で examples フォルダ内のスタイルシートを読み込むだけです!

全てのファイルが必要な訳ではないし、作りたいWebサイトによってカスタマイズもいろいろ必要ですけど、スタンダードな感じのテーマフレームワークですね!

6. 直感的な操作でレイアウトが組めるWordPressのフレームワーク

今まで紹介してきたフレームワークは、Webサイトを作る時の下準備というか土台というか、そんな感じで、実際には自分でコードを書かなくちゃいけませんでした。フレームワークの中のファイルやコードを読み解いたりする必要もありました。

でも、そんな知識も必要ないフレームワークもあります。WordPress CODEX でも紹介されていますけど、WordPress のテーマを作る PressWork というフレームワークは、ブラウザ上でいろいろ操作するだけで WordPress をカスタマイズできます!もちろん万能ではないけれど、簡単なブログとかならコレで十分ですね!

PressWork

PressWork

DOWNLOAD

PressWork

PressWork のレビューは、かちびと.netさんに詳しく載ってます!

7. フレームワークって何か分かってきた!

簡単な CSS から WordPres まで、いろんなフレームワークを見てきました。もちろん Javascript のフレームワーク、PHP のフレームワークなど、Web制作をするのに便利なフレームワークはたくさんあります。

何となく難しそうなイメージのあったフレームワーク(私だけ?)ですが、ひとつひとつファイルを覗いてみると、決して難しいものではなくて、Web制作を便利に、効率的にしてくれるものだったんですね!使い勝手や好き嫌いなど人それぞれあると思いますが、いろんなフレームワークがあるのでダウンロードして試してみるのもいいかもです!

また、実際に Webサイトを作る時に使わなくても、こんな風にやってるんだなーと勉強になったりすること間違い無しです。

ATTENTION

それから、フレームワークごと、それぞれライセンスもあるので使用する場合は確認してくださいね!

7.1. 自分だけのフレームワークを作ろう!

私は、今回紹介したようなフレームワークを、実際にいつも使ってるかというと、実は使ってなかったりします。グリッドシステムなどは、ページ数が多くて、レイアウトを変えたいけど全体的な統一感を保ちたいなーというときには使ってますが、ここで紹介したその他のフレームワークは全くと言っていい程使ってません …。HTML5 関連はまだ勉強中ですし …。

でも Webサイトを作る時、テキストエディタを開いて、真っ白なページに 1行目から書き始める … なんてことはしないと思います。大まかなテンプレートや、必要なファイル群は、誰でも自分だけのフレームワークとして作ってあると思います。

私も自作の WordPress のフレームワークを数種類作ってあります。最近 HTML5 でのテーマも作ってみました。Web制作を効率的にしてくれるフレームワーク。自分にあったものを選んだり、自作したりして工夫しています。

フレームワークっていう用語は、方法手法っぽい意味合いもあって、ちょっと難しい言葉ですねー。昔はちっとも意味が分からない用語のひとつだったなーと思って、今回ブログにしてみました!

Comments

Thank you for the comment.