More Related Content
Similar to CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Similar to CSSフレームワークを使った 簡単なレスポンシブデザインの作成 (20)
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
- 3. 「目 次」
レスポンシブデザインについて
CSSフレームワークとは
CSSフレームワークのサービス色々
CSSフレームワークの使用方法 ∼ 概論編 ∼
CSSフレームワークの使用方法 ∼ 制作編 ∼
参考にさせてもらった
レスポンシブwebデザイン作成に役立つサイトと本
- 4. 「レスポンシブデザインについて」
単一のHTMLでスマートフォン、
タブレットといった
画面サイズが異なるデバイスへ対応できるWebサイトの制作手法
（以降からワンソースマルチデバイスと表記）
基本的にはグリッドシステム、
フルードイメージ、
メディアクエリを
利用してマルチデバイスに対応させます。
アットマーク エイティ
・ 「5分で分かるレスポンシブWebデザイン」
から引用
http://www.atmarkit.co.jp/ait/articles/1301/28/news068.html
- 6. やっぱりデメリットもあります。
それは、
コストが普通のPCサイトをつくるより当然多くなります。
それぞれのデバイスの、
デザインの整合性やコンテンツの優位性を
考えた構築が必要になってきます。
そして単純な制作作業時間。
そういったデメリットを少しでも無くすため
タイトルにも書いておりました通り、
制作作業時間を減らせるよう、
CSSフレームワークを使って
簡単なレスポンシブデザインを、作成していきます。
- 9. 調べてみると結構な数のサービスがあるとは
思いますが、
コードを覗いてみて自分の好みにあった
フレームワークを使えば良いでしょう。
● jsがフレームワーク内に必要か
● Gridの指定単位を pixel にするか % 、em にするか
● あとはデザインの好み
（ボタン、
アイコンなど）
- 10. 「CSS フレームワークの使用方法 ∼ 概論編 ∼ 」
今回は、先ほどのサービス色々であげられた
「Kube」
をつかってサイトを組み立てていきたいと思います。
僕が「Kube」を使う理由
● デザインは基本的に一から自分がしたい
（「Bootstrap」
とかは角丸、
グラデーションなどが最初からついてたので
使いたくなかった。 ）
● jsはあとで自分で用意するので最初はいらない
（「Foundation」 js がたくさん入っている）
は
● Gridの単位は % か em
（「Skeleton」「SimpleGrid」 pixel 単位）
や は
- 11. 要約すると、
とにかくコードもディレクトリもシンプルなもので
% か em のGridである相対または可変のレイアウトで
いこうとしたの
「Kube」
をつかうことにしました。
※Gridの構成が pixel 単位でよければ
「Skeleton」
を使ってたかも
こういったふうにCSSフレームワークにどこまでのことを
求めているかを検証していけば自分にあったものが
見つかると思います。
では実装に入っていこうと思います！
- 12. 「CSS フレームワークの使用方法 ∼ 制作編 ∼ 」
1. CSSフレームワークをダウンロード
これがないと始まりません。
今回は
「kube」
のサイトにアクセスして素材をダウンロードします。
ダウンロードすると以下のファイルがあります。
index.html kube.css master.css
（kube.min.cssっていうのも
あるけど内容は同じ）
- 13. 最低限の記述で、 あとは好きなようにいれてくださいといった
感じです。もうちょっと何かベースみたいなものが欲しい場合は、
サイト上のDEMOサイトのソースをコピペすればよいでしょう。
※CSSのコピペも忘れずに！
index.html
サイトに掲載されているCSSタグが書かれています。
kube.css
kube.css のスタイル以外で書き足したい場合は
このファイルに記入します。
※WordPressにいれる場合は style.css と
ファイル名を書き換えています。
master.css
- 14. 2. デザインラフを作成。
それを元にサイトを構築していく
今回はテストサイトの
デザインラフを
作ってみましたので、
右図ラフをもとに制作を
進めていきます。
- 16. 3. サイトの構築開始
3-1. 骨組みから作成
「kube」
のサイトの Grid にコードの例が記載されているので、
ラフに基づいて、
それらをhtml上にどんどんコピペしていけばOKです！
※サイトをプレビューしてみても、
うまく組まれているのかわからない状態に
なっています。そんな時はコンテンツ部分に background-color で
色をつけてあげたら効率よく進められると思います。
最終的には消すと思いますので、
コメントをいれるなどして消す場所が
どこにあるか、忘れないように！
- 17. とりあえず枠組みだけを スマホサイト用
レイアウト
作っていったら
こういう感じになりました。
PCサイト用レイアウト
- 18. tips 枠組みの幅を変えたい！
「kube」
に限らず他のCSSフレームワークでもそうですが、
あくまでパターン化されているので幅の細かい調整をしたいときは
自分で調整しなければなりません。
今回のラフにあたっては、
大枠のコンテンツ幅（ここでいう wrapper ）
は100%で
メインコンテンツとサイドバーで2カラムになっているので
メインコンテンツ+マージン+サイドバー＝100%
（wrapper）
とならなければいけないのでこの考え方をもとに調整をします。
- 19. 前ページでも述べたように
「Kube」
は%表示が kube.css に
記載されていますので僕の場合は使いたいクラスの元の値は
コメントに変えてその上に変更を記述します。
要素+空き+要素＝100%
（wrapper）
の考え方さえ守っていればやり方はpx単位であっても
変わりませんし、 僕が説明したやりかたでなくても構いません。
今、
むしろもっと良いやり方がある人は教えて下さい
（汗
- 20. kube.css内の
この部分を修正
今回の場合
（小数点切り捨て）
［サイドバー］
22% ➡27%
100% ［メインコンテンツ］
74% ➡69%
［空き］
変更なし
サイドバー
メインコンテンツを
5%ずつ増減しました
サイドバーを広くするかわりに
メインコンテンツを狭くする
100%
- 23. 5. ざくっとおさらい
どの ラフを作って
要素をいれていき
CSSフレームワークが 枠組みだけ
完成させる
自分にあっているか 作ってみる
● js必要か ● ちゃんと計画をたてて ● フレームワークに対応して
● 固定にするか可変にするか 構築する ないものは自分で実装する
● デザインをどこまで ● ラフをどこまで作るのか ● ユーザビリティーの確認
じぶんがするか …etc ● 枠組みの幅を変えるか …etc （ボタンが押しやすいかなど）…etc
WordPressにするときは所定の位置に流しこむ
jsやスタイルシートのアップロードも忘れずに！
- 24. 6.作ってみて個人的に感じたこと
● やっぱり骨組み作るのはさっとできる
●CSSフレームワークが用意するbaseの流れに沿って
作れば簡単にできる
●逆にいうと流れに逆らおうとすると面倒になる
いちいち調査が必要になってくる。
●Gridはフルにつかったけど、
タイポグラフや色とかは結局自分で
組みこんだ。今回はなかったけどテーブルとかは使うかも）
（
●知り合いの人に聞いたけどyoutube貼っつけたりしたら
不具合がでたりするケースがあるらしい （kubeに関しては）
● LESSやSASSの必要性（CSSで入力するものが増えてきたので）
- 27. ツール
FRONT-END CSS FRAMEWORKS
〈有用なCSSフレームワークのコレクションサイト〉
ブラウザ対応状況、 レスポンシブ対応の可否などが一目でわかります。
http://usablica.github.com/front-end-frameworks/compare.html
Responsive CSS Framework Comparison
〈レスポンシブなCSSフレームワークの機能比較表〉
「Bootstrap」「Foundation」「Skeleton」
か か の3つだけだけど
詳しく比較されています。全部英語だけど）
（
http://responsive.vermilion.com/compare.php
- 29. 記 事（Kubeについて）
KOJOKOJOKNIGHT
〈レスポンシブWEBデザイン化してみた〉
知り合いの方のサイト。Kubeで制作されました。
http://www.kojokojo.net/news/1419/
coliss
〈高性能すぎてビックリしました、 レスポンシブデザイン用の
超軽量フレームワーク-Kube Framework〉
http://coliss.com/articles/build-websites/operation/css/
css-framework-kubeframework-for-professional-developers.html
