CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
•
8 gostaram•3,805 visualizações
レスポンシブウェブデザイン（以下RWDと呼ぶ）とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS＋レスポンシブデザイン、CSSフレームワークを紹介します。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Semelhante a CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう (20)
Mais de Masayuki Abe
Mais de Masayuki Abe (19)
Último
Último (11)
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
- 1. { CMS＋デザインテンプレ } { CSSフレームワーク } レスポンシブWebデザイン構築
- 5. Owner Director Designer Programmer
- 6. Owner Director 主にプログラミングを担当 Designer Programmer
- 7. CMS＋デザインテンプレとCSSフレームワークで、 レスポンシブWebデザイン構築 Contents 1 レスポンシブWebデザインとは Contents 2 RWDの3大要素 Contents 3 CSSフレームワーク Contents 4 CMS + RWDテンプレート Contents 5 サーバーツール紹介
- 10. 楽天発表のスマートデバイスアクセス数 情報 : Nikkei Business Publications,inc.
- 14. 11,868
- 16. RWD3大要素
- 17. グリッドデザインが、ブラウザの横幅を変えても レイアウトを維持したまま、要素のサイズを調整する 参考：http://hisakoevans.com/web-tutorial/page18.html
- 18. #wrapper { width: 92%; } #content { width: 72%; } #sidebar { width: 25%; } 参考：http://hisakoevans.com/web-tutorial/page18.html
- 21. @charset “utf-8”; /*最小幅 0px 以上*/ @media screen and(min-width:480px){ /*最小幅 480px以上の指定*/ } @media screen and(min-width:768px){ /*最小幅 768px以上の指定*/ } @media screen and(min-width:1024px){ /*最小幅 1024px以上の指定*/ }
- 22. Image : Some rights reserved by CJAG93
- 23. CSSフレームワーク CMS + RWDテンプレ紹介
- 24. CSSフレームワークの良いところ
- 25. Image：Justin Hee
- 32. ¢ 超シャレ乙、無料テンプレが多い ¢ 広く使われているので情報も多い ¢ 簡単にメディアクエリ対応で感動レベル http://getbootstrap.com/
- 37. 「dist」を使います
- 39. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-‐8"> <title>Bootstrapテスト</title> <meta name="viewport" content="width=device-‐width, initial-‐scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-‐-‐[if lt IE 9]> <script src=”assets/js/html5shiv.js"></script> <script src=“assets/js/respond.min.js"></script> <![endif]-‐-‐> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- 40. ブラウザで表示
- 43. たったこれだけ <div class="container"> <div class="row"> <div class="col-sm-3”>サイドバー</div> <div class="col-sm-6”>メイン</div> <div class="col-sm-3”>サイドバー</div> </div> </div>
- 44. Live Demo
- 45. RWDに役立つツールの紹介
- 47. Webサイトの表示速度を計測。ページの表示で、どこに時間 がかかったかチェックするツール http://web-tan.forum.impressrd.jp/e/2013/01/29/14562
- 58. コーディングしたくない Image : Some rights reserved by CJAG93
- 59. CMS + RWDテンプレート
- 62. あとは菱川さんお願いします
- 63. CMSのアップデート面倒 Image : Some rights reserved by CJAG93
- 69. Live Demo
- 70. 文字しか入力したくない Image : Some rights reserved by CJAG93