SkyVisualEditorでレスポンシブWebデザインに挑戦

レスポンシブなページとは？

レスポンシブなページを作るにはいろいろと手法もあります。代表的なもので
・レスポンシブwebデザイン
・リキッドレイアウト
・フレキシブルレイアウト
・グリッドレイアウト
SkyVisualEditorではダッシュボードレイアウトで「フレキシブルレイアウト」を採用しています。
それぞれメリット・デメリットはあるようですがここでは説明は省かせていただきます。

今回はデスクトップでみた場合、タブレットでみた場合、スマートフォンで見た場合に画面解像度によって見え方を変える 「レスポンシブwebデザイン」に挑戦してみます。

それでは「Salesforceレイアウト」で作成したページでボタンの大きさ・ページブロックセクション内の項目の文字サイズ・配置を スタイルシートのみで、それぞれの端末に合わせて見た目を変えていきたいと思います。
解説はポイントだけに絞っていきますが、最後に貼り付けるだけで体験できるサンプルを掲載しておきますのでお試しください！

レスポンシブWebデザインって？

「レスポンシブWebデザイン」は、単一のファイルで「CSS3」の「メディアクエリ」を利用してディスプレイサイズに応じてデザインを変更するものです。

メディアクエリとは？

メディア クエリは、CSS スタイルに適用できるシンプルなフィルタです。 メディア クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようにできるものです。

メディアクエリを使ってみよう！

今回はSkyVisualEditorのスタジオでページスタイルに「@media ・・・・」この形式で記述していってみます。 書き方　@media ( サイズなど指定する　)
一般的な例

    @media screen and (max-width: 1024px) {
        この間にスタイルを記述
    }

この場合　最大1024pxまではこのスタイルが適用されるという事になります。
以下にように切り替えたい解像度ごとに指定していきます。

    @media screen and (max-width:1024px) {
        1024px以下になった時に適用されるスタイル
    }
    @media screen and (max-width: 360px) {
        360px以下になった時に適用されるスタイル
    }

ボタンのスタイルを変えてみよう

では早速、メディアクエリを使って解像度が1024px以下のなった時のボタンのスタイルを変更してみましょう。

    @media screen and (max-width:1024px) {
        .btn {
                background: #0070d2;
                border: 1px solid #0070d2;
                color: white;
                padding: 16px;
                text-align: center;
                vertical-align: middle;
                width:auto !important;
        }
    }
    @media screen and (max-width: 360px) {
        360px以下になった時に適用されるスタイル
    }

このように「btn」というクラスをもったボタンに対して解像度が1024px以下になった時にボタンのスタイルが適用され ボタンの背景色が青色になります。そして、360px以下になった時にもこのスタイルは引き継がれます。

項目を横並びから縦並びにしてみよう

ここからはスマートフォンでの見たとき（360px以下になったとき）の為にページブロックセクション内の2列表示されている ラベルと表示項目を横並びから縦並びに変えてみましょう。

まずは出力されたHTMLの構造から理解しましょう。
ページブロックセクションは出力後はTABLE(テーブルタグ）が出力されます。そして図のようにラベルのTDには「labelCol」というクラスが指定され、 表示項目のTDには「dataCol」というクラスが指定されています。
これらを利用して以下のように「@media screen and (max-width: 360px)」の部分に解像度が360px以下になったとき用にスタイルを指定します。

　@media screen and (max-width: 360px) {
    .detailList .labelCol, .detailList .dataCol{
        width: 100%;
        /* このtdのdisplayをblockにするのが重要 */
        display: block;
        font-size:1.2em;
    }
　}

コメントでも記述してますがTDの「display」を無理やり「block」とすることで画面が狭くなったときに横並びに耐えられなくなり折返してしまいます。 この原理をつかって、ラベルと表示項目を縦並びに変えてしまうという方法です。

いかがでしょう？あとはお好みに合わせて、文字の大きさを調節したり、表示位置を調整したりしてみてください。 このようにSkyVisualEditorで作成した「Salesforceレイアウト」の画面もページスタイルに書くだけでこのようにレスポンシブにできます。 よかったらお試しください。

以下にサンプルです。こちらは弊社のサポート外ですのでご理解の上、参考までにお使いいただければと思います。

@media only screen and (max-width:1024px){
    .detailList .labelCol,.detailList .dataCol{
        font-size:1.2em;
    }
    .base .bPageTitle h1{
        font-size:1.2em !important;
    }
    
    .base input.btn{
        background: #0070d2;
        border: 1px solid #0070d2;
        color: white;
        padding: 16px;
        text-align: center;
        vertical-align: middle;
        width:auto !important;
    }
    
    .base .msg{
        font-size:1.2em !important;
        line-height: 1.5;
    }
    
    .base .msgcell{
        padding-left:5px !important;
    }
}

@media only screen and (max-width:360px){
    .detailList { margin: 0 -10px; }
    
    .pbHeader .pbTitle,
    .pbHeader .pbButton,
    .pbBottomButtons .pbTitle,
    .pbBottomButtons .pbButtonb {
        width: 100%;
        display: block;
    }

    .detailList .labelCol,
    .detailList .dataCol{
        width: 100%;
        display: block;
        font-size:1.2em;
    }
    .detailList .labelCol{
        text-align:left;
        padding-left:20px;
    }
    .detailList .dataCol{
        padding-left:40px;
    }
    .detailList .data2Col{
        font-size:1.2em;
    }
}