on:2014年10月22日sponsors一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。Mobileと現在主流のブラウザに対応しています。デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類が用意されており、サイズの定義はスタイルシートで変更も可能です。5種類のレイアウトを設定可能flexible.gsでは一つの要素に、この5種類用のレイアウトを定義します。コードのサンプル例えばロゴを配置したdivは、デスクトップ・タブレット横では左上、タブレット縦では上いっぱい、スマホでは上に小さく、といったことが簡単に実装できます。head部分IEのレンダリングモードとスマホ用の指定を記述し、当スタイルシートを外部ファイルとして記述します。HTMLデモの各要素はdivで、対応させるスクリーンに応じてclassを記述します。5種類の表示サイズの識別です。CSSあとは個別にスタイルを定義します。ロゴの表示幅が変わるのは下記のようになります。