スマート プレゼンター®でセミナー撮影

レスポンシブWebデザインと可変グリッドレイアウト

今回は、レスポンシブWebデザインと可変グリッドレイアウトをテーマにお話します。
Dreamweaverで、手際よく作成する方法です。

昨今のユーザーはスマホ、タブレット、デスクトップといった多様なデバイスでWebページを閲覧します。
それぞれのデバイスによってスクリーンのサイズも違うわけなのですが、
例えばデスクトップの大きなスクリーンで表示すると良い感じで表示されていたとしても、
それをスマホで見るとどうでしょうか?
小さなスクリーンで表示しますので、かなり文字が小さくなり、読みづらいことこの上なし。
そこで、スマートフォン用にはスマートフォン用の別サイトを用意するという手法がとられてきました。
それを商売とするASPサービスなどもあるでしょう。
ただし、そうすると、同じサイトを複数パターン用意することになりますので、制作上の効率が良くありません。
そこで、昨今ではユーザー側の環境に応じてフレキシブルに、1つのHTMLソースからなるWebページのデザインを組み替えるという考え方、および手法がとられるようになりました。それがレスポンシブWebデザインです。

例えば、今ご覧いただいているこのWebページの幅を縮めたり、伸ばしたりしていただくと、
いかがでしょうか?

レイアウトがフレキシブルに変化していくと思います。

このように、スクリーンの幅(ブラウザーの幅)に応じて、フレキシブルにレイアウトを変化させて出力させることで、
スマホのユーザーでも読みやすいサイトを作成できるのです。

このサイトの場合は、Wordpressで、そのようなテンプレートをもとに作成しましたので、
特に苦労は無かったのですが、独力でコーディングするには、少々手間がかかります。

そこで、お勧めなのが、Dreamweaverの可変グリッドレイアウトの機能です。
最小限のコーディングで、レスポンシブなWebサイトが作れます。
シンプルな物なら、本当に、2,3分でできます。

ファイルメニューから、「新規」と進めて、「新規ドキュメント」ダ イアログボックスを開きます。

すると、新規ドキュメント」ダイアログボックスが表示されますので、
ここで、「可変グリッドレイアウト」を選択します。

これが優れもので、あらかじめグリッドとガーター(列と隙間)がデバイスごとに用意されています。
ここで、デバイスごとの列数を入力していきます。

 

そして、ドキュメントタイプでは、HTML5がデフォルトになってますので、
後で、ビデオタグを使って、ビデオの挿入などを行っても良いでしょう。

「作成」をクリックし、CSSファイルを保存します。
すると、ビジュアルエイドというビジュアルの補助機能付きで、ドキュメントの新規作成ができます。
デザインビューは、ステータスバーのスクリーン切り替えアイコンで、デバイスの切り替えができます。

これで準備ができました。
次は、DIVで枠を作っていきますが、ここでも便利機能があります。
「可変グリッドレイアウトのDivタグを挿入する」というメニューです。

これを使うことで、グリッドにピシッとスナップして、伸び縮みするDivを挿入できます。
枠の中で流動的にコンテンツを流したい場合は、「Divタグを挿入」ではなく、
「可変グリッドレイアウトのDivタグを挿入する」を使います。

これを使ってDivを配置すると何が便利かと言うと、グリッドに合わせてスナップしたり、
段組みが簡単にできることです。
右のハンドルをドラッグすると、列の数(幅)を変更できます。

左のハンドルをドラッグすると、Divの開始位置を移動できます。
右上のアイコンをクリックすると、上の行に移動でき、段組み数を増やすことができます。

こうやって、ばしばし可変グリッドのDivを作っていきます。
そして、ステータスバーで、デバイスのスクリーンを切り替えながらDivの調整を行っていきます。

ここまで、一切コードをいじっていません。

後は、写真を入れたり、テキストを入れたり、動画を入れたりして、ページのコンテンツを追加していきます。

こうやって、同一のHTMLソースをもとに、3つのデバイスに応じたWebページを作ることができます。
DreamweaverのCS6より登場した機能で、目玉商品ともいえる機能です。

結構簡単に、レスポンシブなWebページが作れるので、お試しください。

記事がお役に立てましたら、下部のはてなブックマークなどの、ポチりをお願いします。

——————————————–

■略歴

石田 知志(いしだ さとし)

(株)A-flat代表取締役

http://a-flat.biz

03-5779-7694

IT系を中心とした各種の教材制作、テクニカルライティング、映像制作、セミナー撮影、技術資料の翻訳などを行っています。

主要なサービスとしては、画面録画付きセミナー撮影サービス「スマート☆プレゼンター」を提供しています。

http://a-flat.biz/archives/service-category/video

スクリーンも同時に精細に収録し、すぐにコンテンツ化します。セミナーDVDの制作、eラーニング、Webセミナー、Ustream中継などでご利用いただけます。