GumbyでレスポンシブWEBデザインを実現する方法

作成:2014/03/02

gumbyでレスポンシブWEBデザインを実現する方法
Gumbyを使用すると簡単にレスポンシブWEBデザインを実現する事ができます。
どうやればレスポンシブWEBデザインを実現できるのか情報が全くなかったので、実現する方法を紹介します。

Gumbyのことや使うまでの記事はこちら↓
WordPressのテーマ作成に Sass + compass + Gumby を使うための設定
 Gumbyの使い方

GumbyでレスポンシブWEBデザインを実現

Gumbyをダウンロードしたら、内包されている「demo.html」を元にすれば簡単にできます。
「demo.html」のheadタグとファイルの下の方で読み込んでいるjavascriptを書けば後は

  <div class="row">
    <div class="twelve columns special head">
      <h1>Gumby</h1>
      <h2>A <span>responsive <span>960</span> grid</span>
      from <a href="#">Digital Surgeons</a></h2>
    </div>
  </div>

  <div class="row">
    <div class="three columns">
      <p>220px</p>
    </div>
    <div class="nine columns">
      <p>700px</p>
    </div>
  </div>

  <div class="row">
    <div class="twelve columns">
      <p>940px</p>
    </div>
  </div>

と、書くだけでレスポンシブWEBデザインの枠が完成します。後は各要素をCSSで装飾していくだけです。

超簡単！

一応ソースコード全文

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="humans.txt">

  <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

  <!-- Facebook Metadata /-->
  <meta property="fb:page_id" content="" />
  <meta property="og:image" content="" />
  <meta property="og:description" content=""/>
  <meta property="og:title" content=""/>

  <!-- Google+ Metadata /-->
  <meta itemprop="name" content="">
  <meta itemprop="description" content="">
  <meta itemprop="image" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

  <!-- We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
       However, there is a blank style.css in the css directory should you prefer -->
  <link rel="stylesheet" href="css/gumby.css">
  <!-- <link rel="stylesheet" href="css/style.css"> -->

  <script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>

<style>

</style>

<body>

  <div class="row">
    <div class="twelve columns special head">
      <h1>Gumby</h1>
      <h2>A <span>responsive <span>960</span> grid</span>
      from <a href="#">Digital Surgeons</a></h2>
    </div>
  </div>
  <div class="row">
    <div class="three columns">
      <p>220px</p>
    </div>
    <div class="nine columns">
      <p>700px</p>
    </div>
  </div>

  <div class="row">
    <div class="twelve columns">
      <p>940px</p>
    </div>
  </div>

  <!-- Grab Google CDN's jQuery, fall back to local if offline -->
  <!-- 2.0 for modern browsers, 1.10 for .oldie -->
  <script>
  var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
  if(!oldieCheck) {
    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
  } else {
    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
  }
  </script>
  <script>
  if(!window.jQuery) {
    if(!oldieCheck) {
      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
    } else {
      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
    }
  }
  </script>

  <!--
  Include gumby.js followed by UI modules followed by gumby.init.js
  Or concatenate and minify into a single file -->
  <script gumby-touch="js/libs" src="js/libs/gumby.js"></script>
  <script src="js/libs/ui/gumby.retina.js"></script>
  <script src="js/libs/ui/gumby.fixed.js"></script>
  <script src="js/libs/ui/gumby.skiplink.js"></script>
  <script src="js/libs/ui/gumby.toggleswitch.js"></script>
  <script src="js/libs/ui/gumby.checkbox.js"></script>
  <script src="js/libs/ui/gumby.radiobtn.js"></script>
  <script src="js/libs/ui/gumby.tabs.js"></script>
  <script src="js/libs/ui/gumby.navbar.js"></script>
  <script src="js/libs/ui/jquery.validation.js"></script>
  <script src="js/libs/gumby.init.js"></script>

  <!--
  Google's recommended deferred loading of JS
  gumby.min.js contains gumby.js, all UI modules and gumby.init.js
  <script type="text/javascript">
  function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "js/libs/gumby.min.js";
  document.body.appendChild(element);
  }
  if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
  </script> -->

  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Change UA-XXXXX-X to be your site's ID -->
  <!--<script>
  window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
  Modernizr.load({
    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
  });
  </script>-->

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
     chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
  <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
  <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->

  </body>
</html>