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

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

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

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

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

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

フレームワーク 目次

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

1. CSS 960 Grid System

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

960 Grid System

960 Grid System

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

960 Grid System を使ったサンプル

960GridSystemを使ったサンプル

↑ フレームワーク 目次へ

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

フレームワークという言葉は少し置いておいて、まずはこの 960 Grid System を使ってみましょう。まずは 960 Grid System のサイトから、ファイルをダウンロード。ちょっとリンクが小さくて分かりにくいですけど、左上にあります。

Download

960 Grid System ダウンロード

960 Grid System フォルダの中身

960 Grid System フォルダの中身

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

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

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

960 Grid System code フォルダの中身

960 Grid System code フォルダの中身

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

12カラムのレイアウト

12カラムのレイアウト

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

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

サンプル

↑ フレームワーク 目次へ

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. カラムを入れ子にする

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

入れ子にしたカラム

カラムを入れ子にしたサンプルピンクの背景が親ボックスです！

子要素の、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にならないといけませんでした。ということは、必ずきつきつにカラムを詰め込まなければなりません …。でもデザインによっては、もうすこし余白を作りたい場合もありますよね。

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

カラムの左右に余白を指定

そんなときは、prefix_x、suffix_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ではメイン部分を先に書いて、レイアウト的には右に持ってきたい場合もあります。

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

HTMLで先に書いたカラムを右にレイアウト

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

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

HTML

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

サンプル

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

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

  • Variable Grid System
    好きなグリッドシステムを作れるジェネレーター
  • 960 Gridder
    Webサイトにグリッドのレイヤーをかぶせて確認できるブックマークレット
↑ フレームワーク 目次へ

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

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

Bon Bon Buttons

Bon Bon Button

Bon Bon Buttons のサイトからファイルをダウンロードすると、HTML と CSSファイル、それから1枚の png 画像があります。

Bon Bon Buttons のフォルダの中身

Bon Bon Buttons のファイルの中身

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

クラスを付けるだけ！

  • 色：orange, pink, blue, green, transparent
  • 形：round, oval, brackets, skew, back, knife, shield, drop, morph

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

HTML

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

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

サンプル

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

↑ フレームワーク 目次へ

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

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

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

↑ フレームワーク 目次へ

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

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

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

補足

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
  • stylesheets フォルダ
    cssファイルが3つ入ってます
  • 404.html
  • javascripts フォルダ
    簡単な Javascript のコードが書かれた jsファイル（タブのCSSクラス切り替え用）と jQuery が入ってます
  • images フォルダ
    アイコン画像が入ってます
  • robots.txt

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

HTML

<!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 フォルダの中身

  • base.css
  • layout.css
  • 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 の欲しい機能だけジェネレートしてくれるみたいなので、いろいろ試してみたいですね！

↑ フレームワーク 目次へ

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

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

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

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

↑ フレームワーク 目次へ

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

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

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

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

Sandbox

Sandbox

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

Sandbox フォルダの中身

Sandbox フォルダの中身

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

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

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

  • index.php
    トップページなど、メインとなるテンプレートファイル
  • header.php
    ヘッダーを表示するテンプレートファイル
  • footer.php
    フッターを表示するテンプレートファイル
  • sidebar.php
    サイドバーを表示するテンプレートファイル
  • single.php
    個別記事を表示するテンプレートファイル
  • comments.php
    コメント欄を表示するテンプレートファイル
  • search.php
    検索フォームを表示するテンプレートファイル
  • style.css
    スタイルシート
  • functions.php
    テーマ内で使う関数などを書いておくファイル

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

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

  • 404.php
    404 Not Found を表示するテンプレートファイル（index.phpで代用可）
  • archive.php
    ブログのアーカイブを表示するテンプレートファイル（index.phpで代用可）
  • category.php
    カテゴリーのアーカイブを表示するためのテンプレートファイル（index.phpで代用可）
  • tag.php
    タグのアーカイブを表示するテンプレートファイル（index.phpで代用可）
  • author.php
    作成者のアーカイブを表示する為のテンプレートファイル（index.phpで代用可）
  • attachment.php
    添付ファイル（画像や動画など）を表示するためのテンプレートファイル（single.phpで代用可）
  • image.php
    記事中の添付ファイル、画像を表示するテンプレートファイル （single.phpで代用可）

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

固定ページ用

  • page.php
    固定ページ用のデフォルトのテンプレートファイル
  • archives.php
    固定ページを使って、アーカイブを表示するためのファイル
  • links.php
    固定ページを使って、リンクを表示する為のテンプレートファイル

固定ページ用に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

↑ フレームワーク 目次へ

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

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

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

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

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

↑ フレームワーク 目次へ

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

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

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

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

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

follow me on twitterfollow me on twitter RSS feedStay up to date via RSS