![<!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>](https://image.slidesharecdn.com/submitnagoya20131121-131121012118-phpapp01/75/CSS-CMS-RWD-Web-39-2048.jpg)
Uploaded byMasayuki Abe
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
レスポンシブウェブデザイン（以下RWDと呼ぶ）とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS＋レスポンシブデザイン、CSSフレームワークを紹介します。
More Related Content
![[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法](https://cdn.slidesharecdn.com/ss_thumbnails/wordbenchrwd-140709214312-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
![11月12日セミナー資料[pdf]](https://cdn.slidesharecdn.com/ss_thumbnails/1112pdf-131112125424-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう](https://cdn.slidesharecdn.com/ss_thumbnails/okaweb20140607abe-140608211615-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Word pressセミナー東京[マイナビ主催] 阿部20131216](https://cdn.slidesharecdn.com/ss_thumbnails/wordpress20131216-131216071419-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
- 1. { CMS＋デザインテンプレ } {CSSフレームワーク } レスポンシブWebデザイン構築
- 2.
- 3.
- 4.
- 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 サーバーツール紹介
- 8.
- 9.
- 10. 楽天発表のスマートデバイスアクセス数 情報 : Nikkei Business Publications,inc.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. #wrapper { width: 92%; } #content{ width: 72%; } #sidebar { width: 25%; } 参考：http://hisakoevans.com/web-tutorial/page18.html
- 19.
- 20.
- 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.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. ¢ 超シャレ乙、無料テンプレが多い ¢ 広く使われているので情報も多い ¢ 簡単にメディアクエリ対応で感動レベル http://getbootstrap.com/
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 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"> <divclass="col-sm-3”>サイドバー</div> <div class="col-sm-6”>メイン</div> <div class="col-sm-3”>サイドバー</div> </div> </div>
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 54.
- 55.
- 56.
- 57.
- 58. コーディングしたくない Image : Some rights reserved by CJAG93
- 59.
- 62.
- 63. CMSのアップデート面倒 Image : Some rights reserved by CJAG93
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. 文字しか入力したくない Image : Some rights reserved by CJAG93
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.