このチュートリアルで作成できるレスポンシブなwebサイトをご覧ください。このwebページをご覧いだだき、レスポンシブな要素が、デスクトップ、タブレット、スマートフォンの各ブラウザーで、サイズの違いに対応してどのように変化するかをよくご確認ください。
このレスポンシブなwebサイトを実際に作ってみることができます。Responsive Web Design (Muse) Creative Cloudライブラリを開いてください。「保存」をクリックして、自分のアカウントにライブラリのコピーを作成します。スターターファイルを参照するには、レスポンシブwebデザインのスターターファイルリンクをクリックし、コンピューターにダウンロードしてください。
Creative Cloudライブラリフォルダーにアクセスできない場合は、Museのライブラリとしてコンピューターに素材をダウンロードすることができます。Responsive Web Design (Muse).mulibファイルをダブルクリックすると、自動的にMuseでファイルが開きます。その後は、Museのライブラリ（ウィンドウ／ライブラリ）パネルで使用できます。
注意：ライブラリを保存するには、Creative Cloudアカウントにログインする必要があります。
webサイトにレスポンシブなプロパティを持つフッターを作成し、スタイルを設定します。ソーシャルメディア用のアイコンを追加し、ロールオーバーステートを定義して、ユーザーがアイコン上にマウスを置くときの目印にします。自分のサイトから他のwebページを開くために、フッターアイコンにハイパーリンクを設定します。メニューウィジェットを使って、サイトのナビゲーションを定義します。最後に、他のウィジェットを使ってフッターにフォームを追加します。
webサイトにレスポンシブなプロパティを持つヘッダーを作成し、スタイルを設定します。サイトロゴとボタンを追加し、整列機能を使ってレイアウトを調整します。ヘッダーにサイトナビゲーション用のメニューを追加し、その外観をカスタマイズします。
ピン留めや他のレスポンシブな設定を使って、ブラウザーのサイズが異なる多様なデバイスでも、適切にページ要素が表示されるようにします。デザインにブレークポイントを追加し、ブラウザーのサイズに対応して変化するレイアウトを管理します。レスポンシブなツールを使って、様々なレイアウトでサイトがどのように見えるかをプレビューします。ページ要素を調整し、様々なブレークポイントで最適に表示されるようにします。
デスクトップ、タブレット、スマートフォンのブラウザーで適切に表示するためのメニューをデザインおよびレイアウトします。ヘッダーとフッターの要素の構成方法を説明します。広いデスクトップから狭いスマートフォンへの画面サイズの違いに対応してメニューを変化させ、メニューアイテムも調整します。
サイトのトップページデザインを仕上げます。テキストと画像に調整を加えてレイアウトを微調整し、ブラウザーに対応してコンテンツが適切にサイズ変更および拡大縮小されるようにします。追加のロールオーバーステートを定義し、ページの他の部分にナビゲートしたときのユーザーの操作性を強化します。
webサイトのデザインを仕上げ、個々のページにブレークポイントを追加する使用例を確認します。これは、マスターページ上のブレークポイントとは異なります。また、その他のデザインテクニックを学習します。ディスプレイに最適化されたレイアウトが表示されるように、コンテンツの表示をコントロールする方法、小さい画面で読みやすくするためにテキストを拡大する方法、ブレークポイント間でフォーマットとレイアウトをコピーする方法について説明します。
最後に、確認のためにサイトを共有またはライブでパブリッシュするためのオプションについて説明します。