[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs

Post on:2014年10月22日

一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。

サイトのキャプチャ

flexible.gs
flexible.gs -GitHub

flexible.gsのデモ

対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。

デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類が用意されており、サイズの定義はスタイルシートで変更も可能です。

サイトのキャプチャ

5種類のレイアウトを設定可能

flexible.gsでは一つの要素に、この5種類用のレイアウトを定義します。

サイトのキャプチャ

コードのサンプル

例えばロゴを配置したdivは、デスクトップ・タブレット横では左上、タブレット縦では上いっぱい、スマホでは上に小さく、といったことが簡単に実装できます。

サイトのキャプチャ

デモページ

flexible.gsの使い方

Step 1: head部分

IEのレンダリングモードとスマホ用の指定を記述し、当スタイルシートを外部ファイルとして記述します。

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/flexible.min.css">
  <link rel="stylesheet" href="css/flexible.style.css">
</head>

Step 2: HTML

デモの各要素はdivで、対応させるスクリーンに応じてclassを記述します。
xl-, lg-, md-, sm-, xs- は5種類の表示サイズの識別です。

<div class="row gutter-10-xs gutter-out-xs">
  <div class="xl-24-6 lg-12-3 md-8-6 sm-12-6 xs-1"><div class="example-home logo"><span>Logo</span> 01</div></div>
  <div class="xl-24-18 lg-12-9 md-1 sm-1 xs-1"><div class="example-home menu"><span>Menu</span> 02</div></div>
  <div class="xl-1 lg-1 md-1 sm-1 xs-1"><div class="example-home slider"><span>Slider</span> 03</div></div>
  <div class="xl-10-3 lg-12-3 md-2-1 sm-12-6 xs-1 "><div class="example-home sidebar"><span>Sidebar</span> 04</div></div>
  <div class="xl-10-7 lg-12-9 md-2-1 sm-12-6 xs-1 "><div class="example-home content"><span>Content</span> 05</div></div>
  <div class="xl-5-1 lg-12-4 md-2-1 sm-12-4 xs-1"><div class="example-home section"><span>Section</span> 06</div></div>
  <div class="xl-5-1 lg-12-4 md-2-1 sm-12-4 xs-1"><div class="example-home section"><span>Section</span> 07</div></div>
  <div class="xl-5-1 lg-12-4 md-2-1 sm-12-4 xs-1"><div class="example-home section"><span>Section</span> 08</div></div>
  <div class="xl-5-1 lg-12-6 md-2-1 sm-12-6 xs-1"><div class="example-home section"><span>Section</span> 09</div></div>
  <div class="xl-5-1 lg-12-6 md-1 sm-12-6 xs-1"><div class="example-home section"><span>Section</span> 10</div></div>
  <div class="xl-22-11 lg-20-10 md-18-9 sm-1 xs-1"><div class="example-home footer"><span>Footer</span> 11</div></div>
  <div class="xl-22-11 lg-20-10 md-18-9 sm-1 xs-1"><div class="example-home footer"><span>Footer</span> 12</div></div>
</div>

Step 3: CSS

あとは個別にスタイルを定義します。
ロゴの表示幅が変わるのは下記のようになります。

.xl-24-6,.lg-12-3{width:25%}
.md-8-6{width:75%}
.sm-12-6{width:50%}
.xs-1{width:100%}

sponsors

top of page

©2024 coliss