CSSフレームワークを使った簡単なレスポンシブデザインの作成

WordBench kyoto2013 .3 .17

「自己紹介」

● デザイナー（DTPもWebも）やってます● WordPressの経験は2年ぐらい

秋山 一樹 〈アキヤマ カズキ〉facebook

twitter akiyum

「目次」

1 レスポンシブデザインについて

2 CSSフレームワークとは

3 CSSフレームワークのサービス色々

4 CSSフレームワークの使用方法 ～概論編～

5 CSSフレームワークの使用方法 ～制作編～

6 参考にさせてもらった レスポンシブwebデザイン作成に役立つサイトと本

「レスポンシブデザインについて」

単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイトの制作手法（以降からワンソースマルチデバイスと表記）基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させます。

アットマーク・エイティ「5分で分かるレスポンシブWebデザイン」から引用http://www.atmarkit.co.jp/ait/articles/1301/28/news068.html

「レスポンシブデザインのメリット」

● ワンソースマルチデバイスにより、更新・メンテナンスが楽● プログラムを用いずにCSSのみで対応しようと思えばできる● SEOにおける優位性 （Googleはスマートフォンサイトの構築方法として レスポンシブWebデザインを推奨）

ただし…

やっぱりデメリットもあります。それは、コストが普通のPCサイトをつくるより当然多くなります。それぞれのデバイスの、デザインの整合性やコンテンツの優位性を考えた構築が必要になってきます。そして単純な制作作業時間。そういったデメリットを少しでも無くすためタイトルにも書いておりました通り、制作作業時間を減らせるよう、CSSフレームワークを使って簡単なレスポンシブデザインを、作成していきます。

「CSSフレームワークとは」

webサイトを作るときの便利な下地や骨組みのことをいいます。CSSフレームワークを使うとhtmlタグにクラスを指定してやるだけで、ベースとなるレイアウトや良い感じのボタンがサクッと作れちゃいます。 たとえば…

<a href=”#”>ボタン</a>

classに“button”をいれるだけで

ボタン

<a class=”button” href=”#”>ボタン</a>

これが こんな感じに！

ボタン

「CSSフレームワークのサービス色々」

CSSフレームワークで有名どころは「Twitter Bootstrap」（以下Bootstrap）があります。他にも…「Less Framework 4」「Foundation 4」「SimpleGrid」「Skeleton」「Kube」などがあります。

調べてみると結構な数のサービスがあるとは思いますが、コードを覗いてみて自分の好みにあったフレームワークを使えば良いでしょう。

● jsがフレームワーク内に必要か● Gridの指定単位を“pixel”にするか“%”、“em”にするか● あとはデザインの好み（ボタン、アイコンなど）

「CSSフレームワークの使用方法 ～概論編～」今回は、先ほどのサービス色々であげられた「Kube」をつかってサイトを組み立てていきたいと思います。

僕が「Kube」を使う理由

● デザインは基本的に一から自分がしたい （「Bootstrap」とかは角丸、グラデーションなどが最初からついてたので 使いたくなかった。）● jsはあとで自分で用意するので最初はいらない （「Foundation」はjsがたくさん入っている）● Gridの単位は“%”か“em” （「Skeleton」や「SimpleGrid」は“pixel”単位）

要約すると、とにかくコードもディレクトリもシンプルなもので“%”か“em”のGridである相対または可変のレイアウトでいこうとしたの「Kube」をつかうことにしました。※Gridの構成が“pixel”単位でよければ「Skeleton」を使ってたかも

こういったふうにCSSフレームワークにどこまでのことを求めているかを検証していけば自分にあったものが見つかると思います。

では実装に入っていこうと思います！

これがないと始まりません。今回は「kube」のサイトにアクセスして素材をダウンロードします。ダウンロードすると以下のファイルがあります。

index.html kube.css（kube.min.cssっていうのも

あるけど内容は同じ）

master.css

「CSSフレームワークの使用方法 ～制作編～」1. CSSフレームワークをダウンロード

kube.css

master.css

index.html

最低限の記述で、あとは好きなようにいれてくださいといった感じです。もうちょっと何かベースみたいなものが欲しい場合は、サイト上のDEMOサイトのソースをコピペすればよいでしょう。 ※CSSのコピペも忘れずに！

“kube.css” のスタイル以外で書き足したい場合はこのファイルに記入します。※WordPressにいれる場合は“style.css” と　ファイル名を書き換えています。

サイトに掲載されているCSSタグが書かれています。

今回はテストサイトのデザインラフを作ってみましたので、右図ラフをもとに制作を進めていきます。

2. デザインラフを作成。それを元にサイトを構築していく

フレームワークといえども組み立てていくのは自分ですので計画をたててから構築していきましょう！※ラフをどこまでつくるのかというのはケースバイケースだと思いますが、今回はPCサイトのラフのみを作成しました。

3-1. 骨組みから作成「kube」のサイトの“Grid”にコードの例が記載されているので、ラフに基づいて、それらをhtml上にどんどんコピペしていけばOKです！※サイトをプレビューしてみても、うまく組まれているのかわからない状態になっています。 そんな時はコンテンツ部分に“background-color” で色をつけてあげたら効率よく進められると思います。最終的には消すと思いますので、コメントをいれるなどして消す場所がどこにあるか、忘れないように！

3. サイトの構築開始

とりあえず枠組みだけを作っていったらこういう感じになりました。

PCサイト用レイアウト

スマホサイト用レイアウト

枠組みの幅を変えたい！tips

「kube」に限らず他のCSSフレームワークでもそうですが、あくまでパターン化されているので幅の細かい調整をしたいときは自分で調整しなければなりません。今回のラフにあたっては、大枠のコンテンツ幅（ここでいう“wrapper”）は100%でメインコンテンツとサイドバーで2カラムになっているので

とならなければいけないのでこの考え方をもとに調整をします。

メインコンテンツ+マージン+サイドバー＝100%（wrapper）

前ページでも述べたように「Kube」は%表示が“kube.css”に記載されていますので僕の場合は使いたいクラスの元の値はコメントに変えてその上に変更を記述します。要素+空き+要素＝100%（wrapper）の考え方さえ守っていればやり方はpx単位であっても変わりませんし、今、僕が説明したやりかたでなくても構いません。むしろもっと良いやり方がある人は教えて下さい（汗

100%

100%

サイドバーを広くするかわりにメインコンテンツを狭くする

kube.css内のこの部分を修正今回の場合（小数点切り捨て）

［サイドバー］22%➡27%［メインコンテンツ］74%➡69%［空き］変更なしサイドバーメインコンテンツを5%ずつ増減しました

3-2. 要素をいれていく細分化された枠組みに要素をいれていきます。文字の大きさ、空きなどもPCのままでは具合が悪いということであれば、各対応デバイスのMediaQueries直下に記述しましょう。

4. 完成！

とりあえず静的なhtmlでの作業は以上です。WordPressに移す作業に関しましてはレスポンシブではないサイトと変わらず、所定の位置に要素を適切に（PHPに変えるとこはするなど）流し込めば完成すると思われます。

実際にサイトにアップしたのでこちらからもアクセス可能です。wordpress.akiyum.com

5. ざくっとおさらい

どのCSSフレームワークが自分にあっているか

● js必要か● 固定にするか可変にするか● デザインをどこまで　じぶんがするか　　　…etc

ラフを作って枠組みだけ作ってみる

● ちゃんと計画をたてて　構築する● ラフをどこまで作るのか● 枠組みの幅を変えるか …etc

要素をいれていき完成させる

● フレームワークに対応して　ないものは自分で実装する● ユーザビリティーの確認　（ボタンが押しやすいかなど）…etc

WordPressにするときは所定の位置に流しこむjsやスタイルシートのアップロードも忘れずに！

6.作ってみて個人的に感じたこと

● やっぱり骨組み作るのはさっとできる● CSSフレームワークが用意するbaseの流れに沿って　作れば簡単にできる● 逆にいうと流れに逆らおうとすると面倒になる　いちいち調査が必要になってくる。● Gridはフルにつかったけど、タイポグラフや色とかは結局自分で　組みこんだ。（今回はなかったけどテーブルとかは使うかも）● 知り合いの人に聞いたけどyoutube貼っつけたりしたら　不具合がでたりするケースがあるらしい（kubeに関しては）● LESSやSASSの必要性（CSSで入力するものが増えてきたので）

オリジナルなデザインでサイト制作しようと思うとやはりそれなりのレスポンシブwebデザインの知識は必要！あくまで作業効率化ツールとして考えた方が良い。理想は自分でオリジナルのレスポンシブテンプレを持ってた方が良いかも（時代の流れで作り直しや不要になるリスクはあるが）

7.まとめ

「参考にさせてもらったレスポンシブwebデザイン 作成に役立つサイトと本」

今回スライドショーとテストサイトを作る時に参考にさせてもらったサイトや本の紹介になります。「ツール」、「記事」、「書籍」、「その他」の順番で紹介していきます。

ツール

http://responsive.vermilion.com/compare.php

Responsive CSS Framework Comparison〈レスポンシブなCSSフレームワークの機能比較表〉「Bootstrap」か「Foundation」か「Skeleton」の3つだけだけど詳しく比較されています。（全部英語だけど）

http://usablica.github.com/front-end-frameworks/compare.html

FRONT-END CSS FRAMEWORKS〈有用なCSSフレームワークのコレクションサイト〉ブラウザ対応状況、レスポンシブ対応の可否などが一目でわかります。

記 事 （レスポンシブwebデザインの作り方）

http://wp-d.org/2013/01/18/2028/

WP-D〈流行りのレスポンシブ・ウェブデザイン！ よく使われるデザインパターンを集めてみた！〉「スマホになると当然、表示面積がPCより小さく小さくなると思いますがそういった問題点をクリアするためのデザインパターンが用意されています。

http://liginc.co.jp/designer/archives/7734

株式会社LIG〈必読！5分でわかる流行のレスポンシブWebデザインまとめ〉この記事以外にも参考になる記事がたくさんあります。

記 事 （Kubeについて）

http://coliss.com/articles/build-websites/operation/css/css-framework-kubeframework-for-professional-developers.html

coliss〈高性能すぎてビックリしました、レスポンシブデザイン用の 超軽量フレームワーク-Kube Framework〉

http://www.kojokojo.net/news/1419/

KOJOKOJOKNIGHT〈レスポンシブWEBデザイン化してみた〉知り合いの方のサイト。 Kubeで制作されました。

書 籍

スマートフォンサイトのためのHTML5+CSS3要所要所の技術がたくさん掲載されていて実践向きな書籍だったので自分の肌にあってました。一から自分でレスポンシブwebサイトを作りたい方にもオススメ！

Web Designing今月号がタイムリーな特集です。2012/10号もお勧めです。

その他

http://www.html5-memo.com/html5/responsive/

HTML5でサイトをつくろう〈ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました〉レスポンシブwebデザインのまとめが書かれていますとりあえずレスポンシブwebってどんなもんって考えている方にオススメです。

http://dotinstall.com/lessons/basic_twitter_bootstrap_v3

ドットインストール〈Twitter Bootstrap入門〉「Bootstrap」を使おうとお考えの方はこちらを参考にしてみてはどうでしょうか

なんか最後の書籍なんかはステマみたいなことになりましたが。。笑兎にも角にも、レスポンシwebデザインは今後ますます増えていくと思いますので、制作者の方々は、こういったCSSフレームワークなどのツールとうまくお付き合いして作業の効率を高めていくことが課題になりそうですね。　

ご清聴ありがとうございました