Chapter04 ナビゲーションデザイン

Webサイト制作で必ず必要になるリセットや、レイアウトするときに使うFlexBoxを学習します。ここから、何度も繰り返して学習することになるので、まずは理解することが目的になります。 異なるブラウザでの表示の違いをなくす 「nyanroom」フォルダの「index.html」を使って、CSSでデザインするので準備しておきましょう。 bodyセレクタで文字の書体をゴシック体に、行の高さを100%に統一します。エンベディングスタイルで記述してください。 ➡︎ font-familyのチートシート &lt;title&gt;保護猫カフェ/にゃんルーム&lt;/title&gt; &lt;style&gt; body{ font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Hiragino Sans&quot;, &quot;Hiragino Kaku Gothic ProN&quot;, &quot;Arial&quot;, &quot;Yu Gothic&quot;, &quot;Meiryo&quot;, sans-serif; line-height: 100%; } &lt;/style&gt; 記号リストの余白を消す ulセレクタで余白を0pxにします。 &lt;title&gt;保護猫カフェ/にゃんルーム&lt;/title&gt; &lt;style&gt; body{ font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Hiragino Sans&quot;, &quot;Hiragino Kaku Gothic ProN&quot;, &quot;Arial&quot;, &quot;Yu Gothic&quot;, &quot;Meiryo&quot;, sans-serif; line-height: 100%; } ul{ padding: 0; } &lt;/style&gt; See the Pen 4-4 by Rayout-gw (@Rayout-gw) on CodePen. 記号リストの項目を横に並べる 横に並べるレイアウトには、ulセレクタでdispayプロパティを使ってflexの値を使います。 See the Pen 4-2-2 by Rayout-gw (@Rayout-gw) on CodePen. 記号リストの背景色で大きさを確認する ulセレクタで横幅を960pxにし、好きな背景色を設定します。 See the Pen 4-2-3 by Rayout-gw (@Rayout-gw) on CodePen. 記号リストの項目がくっついているのを離す ulセレクタでリスト項目の整列と間隔を均等間隔で揃えます。 See the Pen 4-4-4 by Rayout-gw (@Rayout-gw) on CodePen. 記号リストの記号を消す ulセレクタでリスト項目の記号を表示しないようにします。 See the Pen 4-4-4 by Rayout-gw (@Rayout-gw) on CodePen. リストで使うCSS 記号リストを画面の中央に配置する ulセレクタでタグの左右の間隔（マージン）を自動調整にします。※ ボックスを中央に配置するときに使うTIPS See the Pen 4-4-6 by Rayout-gw (@Rayout-gw) on CodePen. &lt;ul&gt;のボックスが、画面の中央に配置されているのを確認できたら、背景色は削除しておきましょう。 完成したHTMLのソースコード 「どうしてもうまく表示できない」「どこでミスしているか分からない」という場合は、下のソースコードをコピーして使ってください。 できるだけ、時間をかけてでも自分がよくするミスを知っていくほうが、スキルアップにつながります。「え!?これだけ?」みたいな凡ミスが一番よくあるパターンです。焦らずじっくりと探すか、もう一度作り直すほうが早く終わることが多いでしょう。 index.html（クリックすると表示します） &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ja&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;保護猫カフェ/にゃんルーム&lt;/title&gt; &lt;style&gt; body{ font-family:&quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Hiragino Sans&quot;, &quot;Hiragino Kaku Gothic ProN&quot;, &quot;Arial&quot;, &quot;Yu Gothic&quot;, &quot;Meiryo&quot;, sans-serif; line-height: 100%; } ul{ padding: 0; display: flex; justify-content: space-around; width:960px; margin: auto; background-color:rgb(90, 140, 120); list-style-type: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;にゃんルームのロゴ&lt;/p&gt; &lt;ul&gt; &lt;li&gt;トップページ&lt;/li&gt; &lt;li&gt;お部屋のご案内&lt;/li&gt; &lt;li&gt;同居猫の紹介&lt;/li&gt; &lt;li&gt;カフェメニュー&lt;/li&gt; &lt;li&gt;保護猫カフェについて&lt;/li&gt; &lt;li&gt;ご予約・お問い合わせ&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;ネコの画像&lt;/p&gt; &lt;h1&gt;にゃんルームは、あなたと猫だけのくつろぎスペース&lt;/h1&gt; &lt;p&gt;猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。&lt;br&gt; お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。&lt;br&gt; 早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。&lt;/p&gt; &lt;h2&gt;同居中の猫ちゃんたち&lt;/h2&gt; &lt;dl&gt; &lt;dt&gt;ブウくん 3歳&lt;/dt&gt; &lt;dd&gt;エキゾチックショートヘアー&lt;/dd&gt; &lt;dd&gt;ブウくんの画像&lt;/dd&gt; &lt;dt&gt;ワラビくん 3歳&lt;/dt&gt; &lt;dd&gt;シンガプーラ&lt;/dd&gt; &lt;dd&gt;ワラビくんの画像&lt;/dd&gt; &lt;dt&gt;キイくん 2歳&lt;/dt&gt; &lt;dd&gt;スコティッシュフォールド&lt;/dd&gt; &lt;dd&gt;キイくんの画像&lt;/dd&gt; &lt;dt&gt;ミイちゃん 2歳&lt;/dt&gt; &lt;dd&gt;スコティッシュフォールド&lt;/dd&gt; &lt;dd&gt;ミイちゃんの画像&lt;/dd&gt; &lt;/dl&gt; &lt;p&gt;お部屋によって、待っている猫ちゃんが違います。&lt;/p&gt; &lt;h2&gt;お部屋のご案内&lt;/h2&gt; &lt;p&gt;今日はどの部屋でくつろぎますか？&lt;/p&gt; &lt;h3&gt;3Fにゃんルーム&lt;/h3&gt; &lt;p&gt;3Fにゃんルームの画像&lt;/p&gt; &lt;p&gt;3Fにゃんルームで待つ猫ちゃんは2匹。&lt;br&gt; おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。&lt;/p&gt; &lt;h3&gt;2Fにゃんルーム&lt;/h3&gt; &lt;p&gt;2Fにゃんルームの画像&lt;/p&gt; &lt;p&gt;元気で遊び盛りの猫ちゃんが4匹。&lt;br&gt; 広々としたリビングで思う存分、猫ちゃんたちと遊べます。&lt;/p&gt; &lt;h3&gt;1Fにゃんルーム&lt;/h3&gt; &lt;p&gt;1Fにゃんルーム画像&lt;/p&gt; &lt;p&gt;人懐っこい4匹の猫ちゃんがお出迎え。&lt;br&gt; お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。&lt;/p&gt; &lt;p&gt;この他にも、お部屋は3室あります。&lt;/p&gt; &lt;h2&gt;ご利用案内と料金について&lt;/h2&gt; &lt;p&gt;猫が大好き！でも飼えない。&lt;br&gt; 気に入った猫ちゃんと暮らしてみたい。&lt;br&gt; 「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。&lt;br&gt; あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。&lt;/p&gt; &lt;h3&gt;基本料金&lt;/h3&gt; &lt;p&gt;基本60分でフリードリンク付きです。&lt;br&gt; 一般の方は1000円、大学生は700円、高校生以下は500円となります。&lt;/p&gt; &lt;p&gt;最初の60分以降、30分ごとに300円の追加料金で予約できます。&lt;/p&gt; &lt;p&gt;お部屋によって、料金は変わりません&lt;/p&gt; &lt;h3&gt;ご予約について&lt;/h3&gt; &lt;p&gt;ご利用は、完全予約制です。&lt;br&gt; 予約ページから、ご希望の日時とお部屋をご予約できます。&lt;/p&gt; &lt;h3&gt;お食事について&lt;/h3&gt; &lt;p&gt;お食事は、1Fにゃんルームのみのご利用となります。&lt;/p&gt; &lt;p&gt;お食事は別途料金が必要になります。&lt;br&gt; カフェメニューのページをご覧ください。&lt;/p&gt; &lt;h2&gt;営業時間・交通アクセス&lt;/h2&gt; &lt;h3&gt;営業時間について&lt;/h3&gt; &lt;p&gt;営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。&lt;br&gt; 定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。&lt;/p&gt; &lt;p&gt;その他、年末年始等の営業につきましては、お知らせでご確認ください。&lt;/p&gt; &lt;h3&gt;交通アクセス&lt;/h3&gt; &lt;p&gt;所在地は、東京都新宿区西新宿1-x-x&lt;br&gt; 電話番号は、01-2345-6789&lt;/p&gt; &lt;p&gt;新宿西口駅前、徒歩3分です。&lt;br&gt; 東京駅からJR中央線で14分、上野駅からJR山手線で24分。&lt;br&gt; JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。&lt;/p&gt; &lt;p&gt;お車でお越しの方は、お近くのコインパーキングをご利用ください。&lt;/p&gt; &lt;h2&gt;お知らせ&lt;/h2&gt; &lt;dl&gt; &lt;dt&gt;2022年10月1日&lt;/dt&gt; &lt;dd&gt;秋にピッタリな、スイーツとお食事はいかが？&lt;/dd&gt; &lt;dd&gt;食欲の秋の画像 &lt;/dd&gt; &lt;dt&gt;2022年9月1日&lt;/dt&gt; &lt;dd&gt;読書の秋！ゆっくりと、読書をしながら…&lt;/dd&gt; &lt;dd&gt;読書の秋の画像&lt;/dd&gt; &lt;dt&gt;2022年8月1日&lt;/dt&gt; &lt;dd&gt;猫ちゃんたちも、暑さでぐったりしています。&lt;/dd&gt; &lt;dd&gt;夏の画像&lt;/dd&gt; &lt;dt&gt;2022年7月1日&lt;/dt&gt; &lt;dd&gt;猫ちゃんたちの夏ファッションが楽しめます。&lt;/dd&gt; &lt;dd&gt;ネコファッションの画像&lt;/dd&gt; &lt;dt&gt;2022年6月1日&lt;/dt&gt; &lt;dd&gt;雨の日は、ねこ部屋でゆっくりしませんか？&lt;/dd&gt; &lt;dd&gt;梅雨の画像&lt;/dd&gt; &lt;/dl&gt; &lt;p&gt;2022 © TOU-WEB&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

Chapter04 ナビゲーションデザイン

Chap4-1 ユーザビリティ・アクセシビリティ

Chap4-2 ナビゲーションデザインとは

Chap4-3 ナビゲーションとレイアウトパターン

Chap4-4 ナビゲーションで使うCSS