[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms

サイト構築 -CSS

Post on:2013年10月4日

Grid Formsのデモ

本格的なデモの前に、まずは簡単なデモから。

デモはChrome, Safari, Firefoxなどのモダンブラウザ、スマフォ・タブレットのブラウザでご覧ください。IEは9+で、IE8以下はレスポンシブ非対応ですが別スクリプトを併用することで対応可です。

Grid Formsはその名の通りグリッドをベースにしたフォームで、紙のようなレイアウトの美しいフォームを簡単に実装できます。

デモページでは、フォームのさまざまな要素が美しいグリッドできっちりレイアウトされています。
入力時にはフォーカスでハイライトされるようになっています。

デモページ：幅1,200pxで表示

レスポンシブにも対応しており、表示サイズに合わせてレイアウトが最適化されます。

デモページ：幅780pxで表示

スマフォサイズで見ても、美しいですね。

デモページ：幅480pxで表示

プリント時にもその美しいレイアウトは保たれています。
実際にプリントしてみましたが、やはり美しかったです。

プリント時のプレビュー

Grid Formsの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" type="text/css" href="gridforms.css">
</head>

Step 2: HTML

マークアップはグリッドの設計に慣れが必要ですが、非常にナチュラルです。
まずは、form要素に.grid-formを指定し、フォームのセクションを分けるためにfieldset要素を使用します。各フィールとをdiv要素を使いdata-field-spanでグリッドを定義します。

<form class="my-grid-form">
    <fieldset>
        <legend>Form Section</legend>
        <div data-row-span="2">
            <div data-field-span="1">
                <label>Field 1</label>
                <input type="text">
            </div>
            <div data-field-span="1">
                <label>Field 2</label>
                <input type="text">
            </div>
        </div>
    </fieldset>
</form>