Dreamweaver でこれらのチュートリアルをお試しください
モダンでレスポンシブな web ページをデザイン
モバイル、タブレット、デスクトップ — どんなデバイスでもサイトのナビゲーションが簡単にできるように、メニューのスタイル設定をおこないます。
なぜWebデザインにモバイルファーストのアプローチが有効なのかをご覧ください。ファイルとアセットを管理するサイトを定義してから、ロゴつきナビゲーションの基本構造を、ヘッダーセクションにHTMLで作成します。
紫色のテキストで箇条書きになっているメインメニューを、モバイル画面用にCSSでスタイル設定し、レイアウトを調整します。
モバイル、タブレット、デスクトップの画面によってメニューのレイアウトは異なります。CSSメディアクエリーを使って、それぞれのデバイス用にレイアウトを変更する方法を紹介します。さらに、実際のデバイスでリアルタイムにプレビューしながらデザインする方法もご覧ください。