モバイル、タブレット、デスクトップ — どんなデバイスでもサイトのナビゲーションが簡単にできるように、メニューのスタイル設定をおこないます。

1. メニューの構造を作成する

なぜWebデザインにモバイルファーストのアプローチが有効なのかをご覧ください。ファイルとアセットを管理するサイトを定義してから、ロゴつきナビゲーションの基本構造を、ヘッダーセクションにHTMLで作成します。

2. モバイル用にメニューのスタイルを設定する

紫色のテキストで箇条書きになっているメインメニューを、モバイル画面用にCSSでスタイル設定し、レイアウトを調整します。

3. タブレットとデスクトップ用にメニューのスタイルを設定する

モバイル、タブレット、デスクトップの画面によってメニューのレイアウトは異なります。CSSメディアクエリーを使って、それぞれのデバイス用にレイアウトを変更する方法を紹介します。さらに、実際のデバイスでリアルタイムにプレビューしながらデザインする方法もご覧ください。

06/15/2017
Daniel Walter Scott
このページは役に立ちましたか。