Chapter20 デザイン設計

ドロワーメニューの作成に必要なファイルと作成手順です。 猫カフェのスマートフォン用ナビゲーションを完成させましょう。基本は、コピーペーストで簡単に作成できます。 ファイルをDLする Masterjsファイルは「jsフォルダ」を作成し、cssファイルは「cssフォルダ」へ保存してください nyanroom index.html room.html js（作成するフォルダ） drawer.js（DLしたファイル） css drawer.css（DLしたファイル） layout.css（使用するファイル） index.css destyle.css images nav.png（使用する画像ファイル） 作成手順 DLしたファイルをHTMLへリンクする CSSファイルは、layout.cssの&lt;link&gt;の下へ貼り付けます。 &lt;title&gt;保護猫カフェ/にゃんルーム&lt;/title&gt; &lt;link href=&quot;css/destyle.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;css/layout.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;css/drawer.css&quot; rel=&quot;stylesheet&quot;&gt; jsファイルは、&lt;/body&gt;の上に貼り付けます。 &lt;footer&gt; &lt;p&gt;2022 © TOU-WEB&lt;/p&gt; &lt;/footer&gt; &lt;script src=&quot;js/drawer.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; jQueryライブラリをCDNでリンクする &lt;title&gt;保護猫カフェ/にゃんルーム&lt;/title&gt; &lt;link href=&quot;css/destyle.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;css/layout.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;css/drawer.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;css/index.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; Master今回はjQueryプラグインのCDNはありません。DLしたファイルがプラグインですね。 &lt;nav&gt;にid名を追加する ドロワーメニューにするために、id名を追加します。 &lt;!-- navに#g-nav追加 --&gt; &lt;nav id=&quot;drawer-nav&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;トップページ&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;room.html&quot;&gt;お部屋のご案内&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;同居猫の紹介&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;カフェメニュー&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;保護猫カフェについて&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ご予約・お問い合わせ&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; ボタンとドロワーメニューの背景エリアを&lt;div&gt;で2ヵ追加する &lt;/nav&gt;の下に&lt;div&gt;を記述して、ボタン画像を表示、背景色を表示するボックスを挿入します。 &lt;/nav&gt; &lt;!-- div２カ所追加 --&gt; &lt;div id=&quot;menubtn&quot;&gt;&lt;img src=&quot;images/nav.png&quot; alt=&quot;menuボタン&quot;&gt;&lt;/div&gt; &lt;div id=&quot;drawer-bg&quot;&gt;&lt;/div&gt; &lt;/header&gt; layout.cssを編集 ドロワーメニューとボタンの表示・非表示の設定です。 スマートフォン用のnavセレクタ部分を削除、または無効化します。 /* ナビゲーション */ /* nav{ display: none; } */ PC用のわかりやすい場所に、メニューボタンのセレクタを追加し、非表示にします。 @media screen and (min-width:960px){ h2{ font-size: 28px; width: 960px; } /*メニューボタンを非表示*/ #menubtn{ display: none; } Masterコメントアウト文がわかりづらかったと思いますが、メニューボタン用のセレクタを追加して、非表示にしています。スマートフォン用の方は、CSSが無くても表示されます。 カスタマイズの紹介 Masterドロワーメニューを表示した時に、ロゴが背面に表示されてしまいます。これはボックスの重なり順、z-indexプロパティの影響です。ロゴ画像のボックスを最前面で表示するには、ドロワーメニューのz-indexの数値よりも、大きい数値にすると最前面で表示できます。 header&gt;p{ width: 40vw; margin: auto; position: relative; top: 7.6vw; z-index:1000; } Masterdrawer.cssで文字サイズや文字色、背景色、ボタンの配置場所を変更できます 背景色の変更 /*円の拡大*/ #drawer-bg{ position: fixed; z-index:3; width: 100px;/*円の形*/ height: 100px;/*円の形*/ border-radius: 50%;/*円の形*/ background: rgba(255,210,210,0.75);/*円の色*/ transform: scale(0); left:-50px;/*円のスタート位置*/ bottom:-50px;/*円のスタート位置*/ transition: all 0.6s;/*アニメーションの時間0.6秒*/ } メニューのテキストリンクの設定 /*リストの設定*/ #drawer-nav li{ text-align: center; list-style: none; } #drawer-nav li a{ font-size: 14px; color: #333; text-decoration: none; padding:10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; } Master3,8,9,11,15行目は、デザインを変更できるでしょう メニューボタン（肉球）の配置 /* メニューボタン */ #menubtn{ position:fixed; bottom:10px;/* ボタンの位置 */ left: 10px;/* ボタンの位置 */ z-index: 9999; cursor: pointer; width: 50px;/* ボタンのサイズ */ height:50px;/* ボタンのサイズ */ } Master4,5行目は、positionで固定表示した配置場所で、bottomは下から、leftは左からの距離です。8,9行目は、ボタンを表示するボックスのサイズです。

Chapter20 デザイン設計

Chap20-1 ナビゲーション設計

Chap20-2 Webデザイン設計

Chap20-3 デザインの基礎知識

Chap20-4 デザインと心理学

Chap20-4.5 ページトップリンク

Chap20-1.5 ドロワーメニュー