Downloaded 106 times
Recommended
![Webっちゃ vol.01 [Wordpressでできること]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fwebccha-wordpress01-130527043932-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Viewers also liked
Similar to CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
- 1.WordBench kyoto 2013 . 3 . 17 CSSフレームワークを使った簡単なレスポンシブデザインの作成
- 2.「自己紹介」facebook 秋山 一樹〈アキヤマ カズキ〉twitter akiyum● デザイナー DTPもWebも） （ やってます● WordPressの経験は2年ぐらい
- 3.「目 次」レスポンシブデザインについて CSSフレームワークとは CSSフレームワークのサービス色々 CSSフレームワークの使用方法 ∼ 概論編 ∼ CSSフレームワークの使用方法 ∼ 制作編 ∼ 参考にさせてもらった レスポンシブwebデザイン作成に役立つサイトと本
- 4.「レスポンシブデザインについて」単一のHTMLでスマートフォン、 タブレットといった画面サイズが異なるデバイスへ対応できるWebサイトの制作手法（以降からワンソースマルチデバイスと表記）基本的にはグリッドシステム、 フルードイメージ、 メディアクエリを利用してマルチデバイスに対応させます。アットマーク エイティ ・ 「5分で分かるレスポンシブWebデザイン」 から引用http://www.atmarkit.co.jp/ait/articles/1301/28/news068.html
- 5.「レスポンシブデザインのメリット」● ワンソースマルチデバイスにより、 更新 メンテナンスが楽 ・● プログラムを用いずにCSSのみで対応しようと思えばできる● SEOにおける優位性 （Googleはスマートフォンサイトの構築方法として レスポンシブWebデザインを推奨）ただし…
- 6.やっぱりデメリットもあります。それは、コストが普通のPCサイトをつくるより当然多くなります。それぞれのデバイスの、 デザインの整合性やコンテンツの優位性を考えた構築が必要になってきます。そして単純な制作作業時間。そういったデメリットを少しでも無くすためタイトルにも書いておりました通り、制作作業時間を減らせるよう、 CSSフレームワークを使って簡単なレスポンシブデザインを、作成していきます。
- 7.「CSS フレームワークとは」webサイトを作るときの便利な下地や骨組みのことをいいます。CSSフレームワークを使うとhtmlタグにクラスを指定してやるだけで、 ベースとなるレイアウトや良い感じのボタンがサクッと作れちゃいます。たとえば… classに これが button を こんな感じに！ いれるだけで <a href= # >ボタン</a> <a class= button href= # >ボタン</a> ボタン ボタン
- 8.「CSSフレームワークのサービス色々」CSSフレームワークで有名どころは「Twitter Bootstrap」 があります。（以下Bootstrap）他にも…「Less Framework 4」「Foundation 4」「SimpleGrid」「Skeleton」「Kube」などがあります。
- 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. デザインラフを作成。 それを元にサイトを構築していく今回はテストサイトのデザインラフを作ってみましたので、右図ラフをもとに制作を進めていきます。
- 15.
- 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%
- 21.3-2. 要素をいれていく細分化された枠組みに要素をいれていきます。文字の大きさ、空きなどもPCのままでは具合が悪いということであれば、各対応デバイスのMediaQueries直下に記述しましょう。4. 完成！とりあえず静的なhtmlでの作業は以上です。WordPressに移す作業に関しましてはレスポンシブではないサイトと変わらず、所定の位置に要素を適切に 流し込めば完成すると思われます。（PHPに変えるとこはするなど）
- 22.
- 23.5. ざくっとおさらい どの ラフを作って 要素をいれていきCSSフレームワークが 枠組みだけ 完成させる 自分にあっているか 作ってみる● js必要か ● ちゃんと計画をたてて ● フレームワークに対応して● 固定にするか可変にするか 構築する ないものは自分で実装する● デザインをどこまで ● ラフをどこまで作るのか ● ユーザビリティーの確認 じぶんがするか …etc ● 枠組みの幅を変えるか …etc （ボタンが押しやすいかなど）…etc WordPressにするときは所定の位置に流しこむ jsやスタイルシートのアップロードも忘れずに！
- 24.6.作ってみて個人的に感じたこと●やっぱり骨組み作るのはさっとできる●CSSフレームワークが用意するbaseの流れに沿って 作れば簡単にできる●逆にいうと流れに逆らおうとすると面倒になる いちいち調査が必要になってくる。●Gridはフルにつかったけど、 タイポグラフや色とかは結局自分で 組みこんだ。今回はなかったけどテーブルとかは使うかも） （●知り合いの人に聞いたけどyoutube貼っつけたりしたら 不具合がでたりするケースがあるらしい （kubeに関しては）● LESSやSASSの必要性（CSSで入力するものが増えてきたので）
- 25.
- 26.「参考にさせてもらったレスポンシブwebデザイン 作成に役立つサイトと本」今回スライドショーとテストサイトを作る時に参考にさせてもらったサイトや本の紹介になります。「ツール」 記事」書籍」 その他」 「 、 「 、 「 、 の順番で紹介していきます。
- 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
- 28.記 事（レスポンシブwebデザインの作り方）株式会社LIG〈必読！5分でわかる流行のレスポンシブWebデザインまとめ〉この記事以外にも参考になる記事がたくさんあります。http://liginc.co.jp/designer/archives/7734 WP-D〈流行りのレスポンシブウェブデザイン！ よく使われるデザインパターンを集めてみた！〉 ・「スマホになると当然、 表示面積がPCより小さく小さくなると思いますがそういった問題点をクリアするためのデザインパターンが用意されています。http://wp-d.org/2013/01/18/2028/
- 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
- 30.
- 31.
- 32.なんか最後の書籍なんかはステマみたいなことになりましたが。笑 。兎にも角にも、 レスポンシwebデザインは今後ますます増えていくと思いますので、制作者の方々は、 こういったCSSフレームワークなどのツールとうまくお付き合いして作業の効率を高めていくことが課題になりそうですね。
- 33.