剛史レスポンシブなページとは?レスポンシブなページを作るにはいろいろと手法もあります。代表的なもので・レスポンシブwebデザイン・リキッドレイアウト・フレキシブルレイアウト・グリッドレイアウトSkyVisualEditorではダッシュボードレイアウトで「フレキシブルレイアウト」を採用しています。それぞれメリット・デメリットはあるようですがここでは説明は省かせていただきます。「レスポンシブwebデザイン」に挑戦してみます。スタイルシートのみで、それぞれの端末に合わせて見た目を変えていきたいと思います。解説はポイントだけに絞っていきますが、最後に貼り付けるだけで体験できるサンプルを掲載しておきますのでお試しください!レスポンシブWebデザインって?「レスポンシブWebデザイン」は、単一のファイルで「CSS3」の「メディアクエリ」を利用してディスプレイサイズに応じてデザインを変更するものです。スタイルに適用できるシンプルなフィルタです。クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようにできるものです。・・・・」この形式で記述していってみます。最大1024pxまではこのスタイルが適用されるという事になります。以下にように切り替えたい解像度ごとに指定していきます。}※注意点は高い解像度から先に指定すること、CSSの中では後から書いた方が優勢になります※最初に指定されたスタイルは引き継ぎます。ボタンのスタイルを変えてみようでは早速、メディアクエリを使って解像度が1024px以下のなった時のボタンのスタイルを変更してみましょう。ボタンの背景色が青色になります。360px以下になった時にもこのスタイルは引き継がれます。ラベルと表示項目を横並びから縦並びに変えてみましょう。出力されたHTMLの構造から理解しましょう。ページブロックセクションは出力後はTABLE(テーブルタグ)が出力されます。表示項目のTDには「dataCol」というクラスが指定されています。360px)」の部分に解像度が360px以下になったとき用にスタイルを指定します。}コメントでも記述してますがTDの「display」を無理やり「block」とすることで画面が狭くなったときに横並びに耐えられなくなり折返してしまいます。この原理をつかって、ラベルと表示項目を縦並びに変えてしまうという方法です。いかがでしょう?あとはお好みに合わせて、文字の大きさを調節したり、表示位置を調整したりしてみてください。このようにSkyVisualEditorで作成した「Salesforceレイアウト」の画面もページスタイルに書くだけでこのようにレスポンシブにできます。よかったらお試しください。こちらは弊社のサポート外ですのでご理解の上、参考までにお使いいただければと思います。関連するキーワードSkyVisualEditorTerraSkyBaseについてTerraSkyBaseはクラウドサービスを手掛ける株式会社テラスカイのコンテンツプラットフォームです。