CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう

2,298 views

Published on

レスポンシブウェブデザイン(以下RWDと呼ぶ)とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。

このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS+レスポンシブデザイン、CSSフレームワークを紹介します。

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,298
On SlideShare
0
From Embeds
0
Number of Embeds
938
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう

  1. 1. { CMS+デザインテンプレ } { CSSフレームワーク } レスポンシブWebデザイン構築
  2. 2. ¢ エバンジェリスト   ¢ 神戸生まれ、横浜育ち 企画、プロジェクト管理、販促などを担当
  3. 3. 仕事 Drupal 飲み 2ch
  4. 4. VENTURE 取り扱っていません Web Service Since 1998 Hosting 取り扱っていません
  5. 5. Owner   Director   Designer   Programmer  
  6. 6. Owner   Director   主にプログラミングを担当 Designer   Programmer  
  7. 7. CMS+デザインテンプレとCSSフレームワークで、 レスポンシブWebデザイン構築 Contents  1   レスポンシブWebデザインとは Contents  2   RWDの3大要素 Contents  3   CSSフレームワーク Contents  4   CMS + RWDテンプレート Contents  5   サーバーツール紹介
  8. 8. レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 菊池崇 (著) 価格:¥2,625 http://www.amazon.co.jp/dp/4048863231
  9. 9. レスポンシブWebデザインとは
  10. 10. 楽天発表のスマートデバイスアクセス数 情報  :  Nikkei  Business  Publications,inc.
  11. 11. Image:ZERGE_VIOLATOR
  12. 12. HTML CSS http://i.hoge.jp HTML CSS http://sp.hoge.jp HTML CSS http://t.hoge.jp HTML CSS http://hoge.jp
  13. 13. ¢ 開発コストの増加     スマートフォン、タブレット、PCに合わせて、 それぞれのHTML、CSSを用意するのは画面 サイズの多様化により、難しくなってきた。
  14. 14. 11,868
  15. 15. Image  :  ZERGE_VIOLATOR
  16. 16. RWD3大要素
  17. 17. グリッドデザインが、ブラウザの横幅を変えても レイアウトを維持したまま、要素のサイズを調整する 参考:http://hisakoevans.com/web-tutorial/page18.html
  18. 18. #wrapper { width: 92%; } #content { width: 72%; } #sidebar { width: 25%; } 参考:http://hisakoevans.com/web-tutorial/page18.html
  19. 19. レイアウトの大きさによって、画像サイズを拡大、縮小する手法 img { max-width: 100%; height: auto; }
  20. 20. ブレイクポイントをもうけCSSを用意し、画面サイズを変更   する手法 320PX 320∼767PX 768∼1023PX 1024PX以上
  21. 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. 22. Image  :  Some  rights  reserved  by  CJAG93
  23. 23. CSSフレームワーク   CMS  +  RWDテンプレ紹介
  24. 24. CSSフレームワークの良いところ
  25. 25. Image:Justin Hee
  26. 26. http://jquerymobile.com/
  27. 27. http://jquerymobile.com/
  28. 28. http://jquerymobile.com/
  29. 29. http://jquerymobile.com/
  30. 30. http://jquerymobile.com/
  31. 31. http://getbootstrap.com/
  32. 32. ¢  超シャレ乙、無料テンプレが多い ¢  広く使われているので情報も多い ¢  簡単にメディアクエリ対応で感動レベル http://getbootstrap.com/
  33. 33. http://getbootstrap.com/2.3.2/examples/carousel.html
  34. 34. http://azmind.com/demo/andia-­‐agency/
  35. 35. https://revolver.jp/?lang=ja
  36. 36. Twitter Bootsrapの使い方
  37. 37. 「dist」を使います
  38. 38. Basic templateを解凍した フォルダにコピー
  39. 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. 40. ブラウザで表示
  41. 41. たったこれだけ <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>
  42. 42. Live Demo
  43. 43. RWDに役立つツールの紹介
  44. 44. YSlowはYahooが提唱する 「ハイパフォーマンスウェ ブサイトのルール」に 従ってWebページが構築 されているかを測定する ツール。 http://yslow.org/
  45. 45. Webサイトの表示速度を計測。ページの表示で、どこに時間 がかかったかチェックするツール http://web-tan.forum.impressrd.jp/e/2013/01/29/14562
  46. 46. 携帯電話のリモート検証サービス http://appkitbox.com/testkit
  47. 47. リアル検証機が常備20台 以上(店舗による) http://www.yamada-denki.jp/store/index.html
  48. 48. Bootstarapの有料テンプ レートの販売サイト $4∼$45で販売されており、 拡張性の高いテンプレート がそろう https://wrapbootstrap.com/
  49. 49. http://wrapbootstrap.com/preview/WB0225S29
  50. 50. https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697
  51. 51. http://www.pixeden.com/
  52. 52. http://fortawesome.github.io/Font-Awesome/
  53. 53. http://liveweave.com/
  54. 54. http://colorschemedesigner.com/
  55. 55. コーディングしたくない Image  :  Some  rights  reserved  by  CJAG93
  56. 56.  CMS + RWDテンプレート
  57. 57. あとは菱川さんお願いします
  58. 58. CMSのアップデート面倒 Image  :  Some  rights  reserved  by  CJAG93
  59. 59. CMSアップデートを しないと危険
  60. 60. Q.ウェブサイトを運営 する中で起きた事がある 問題について
  61. 61. アンケート結果 テストサイト問題 リリース問題 リリース問題 リリース問題 セキュリティー問題
  62. 62. これらの問題を解決するために、 SmartReleaseを開発しました
  63. 63. テスト環境 公開環境 FTP  /  SSH Database Webサーバー バックアップ
  64. 64. Live Demo
  65. 65. 文字しか入力したくない Image  :  Some  rights  reserved  by  CJAG93
  66. 66. http://jp.jimdo.com/
  67. 67. http://ja.wix.com/
  68. 68. http://wordpress.com/
  69. 69. http://www.drupalgardens.com/
  70. 70. ¢ 今後はさらにスマートデバイスからのア クセスが増える ¢ 案件に合わせた、組み込み手法 ¢ フレームワークを使うことで、モックや スタートアップに最適
  71. 71. ID:chiyo.abe 阿部 正幸

×