ざっくりした可変レイアウトの実装
関連ファイルから「rwd.css」を選択し、分割ビューに切り替えます。
「rwd.css」の57行目、「display: block;」を「display: none;」に変更します。
デザインビューに切り替えると、「私たちの製品」というブロックが丸ごと消えています。
デザインビューに戻し、タブレット表示に切り替えます。「私たちの製品」というブロックは表示されたままです。
デスクトップ表示に切り替えます。article要素に変更した要素内にカーソルを置きます。要素の右側のハンドルを左方向に（3つのグリッド分）ドラッグします。
画面を下方向にドラッグして、今度はaside要素に変更した要素内にカーソルを置きます。要素の右側のハンドルを左方向にドラッグし、グリッド3つ分の横幅に変更します。
をクリックすると、そのコンテンツが上部に移動します。
細かい調整はまだですが、これでスマートフォン、タブレット、デスクトップで3つの独立したレイアウトが作成できました。
ブラウザでプレビューして確認してみましょう。
特定のメディアクエリー内で「display: none;」に設定することで、隠したいコンテンツを非表示にしました。表示されないだけで読み込んでいることに注意してください。3G回線を使った閲覧では、いかに軽くできるかは慎重に検討すべき課題です。
