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

デスクトップでの表示はもちろん、スマフォやタブレットでも、そして印刷してもかっこいいレイアウトのフォームを実装できるスタイルシートのフレームワークを紹介します。
将来的にはスクリプトを使って、機能を強化していくようですよ。

サイトのキャプチャ

Grid Forms

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>

IEへの対応

IE8でレスポンシブにする時は、下記のスクリプトを外部ファイルとして使用します。

top of page

©2017 coliss