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

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

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

Webサイト制作で必ず必要になるリセットや、レイアウトするときに使うFlexBoxを学習します。
ここから、何度も繰り返して学習することになるので、まずは理解することが目的になります。

Contents
  1. 異なるブラウザでの表示の違いをなくす
  2. 記号リストの余白を消す
  3. 記号リストの項目を横に並べる
  4. 記号リストの背景色で大きさを確認する
  5. 記号リストの項目がくっついているのを離す
  6. 記号リストの記号を消す
  7. 記号リストを画面の中央に配置する
  8. 完成したHTMLのソースコード

異なるブラウザでの表示の違いをなくす

「nyanroom」フォルダの「index.html」を使って、CSSでデザインするので準備しておきましょう。

bodyセレクタで文字の書体をゴシック体に、行の高さを100%に統一します。
エンベディングスタイルで記述してください。

➡︎ font-familyのチートシート

<title>保護猫カフェ/にゃんルーム</title>
<style>
   body{
        font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
        line-height: 100%;
   }
</style>

記号リストの余白を消す

ulセレクタで余白を0pxにします。

<title>保護猫カフェ/にゃんルーム</title>
<style>
   body{
        font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
        line-height: 100%;
   }
   ul{
        padding: 0;
   }
</style>

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.

<ul>のボックスが、画面の中央に配置されているのを確認できたら、背景色は削除しておきましょう。

完成したHTMLのソースコード

「どうしてもうまく表示できない」「どこでミスしているか分からない」という場合は、下のソースコードをコピーして使ってください。

できるだけ、時間をかけてでも自分がよくするミスを知っていくほうが、スキルアップにつながります。
「え!?これだけ?」みたいな凡ミスが一番よくあるパターンです。
焦らずじっくりと探すか、もう一度作り直すほうが早く終わることが多いでしょう。

index.html（クリックすると表示します）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>保護猫カフェ/にゃんルーム</title>
    <style>
        body{
            font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", 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;
        }
    </style>
</head>
<body>
    <p>にゃんルームのロゴ</p>
    
        <ul>
            <li>トップページ</li>
            <li>お部屋のご案内</li>
            <li>同居猫の紹介</li>
            <li>カフェメニュー</li>
            <li>保護猫カフェについて</li>
            <li>ご予約・お問い合わせ</li>
        </ul>

    <p>ネコの画像</p>

    <h1>にゃんルームは、あなたと猫だけのくつろぎスペース</h1>
    <p>猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。<br>
      お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。<br>
      早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。</p>

    <h2>同居中の猫ちゃんたち</h2>
    <dl>
      <dt>ブウくん 3歳</dt>
      <dd>エキゾチックショートヘアー</dd>
      <dd>ブウくんの画像</dd>
      <dt>ワラビくん 3歳</dt>
      <dd>シンガプーラ</dd>
      <dd>ワラビくんの画像</dd>
      <dt>キイくん 2歳</dt>
      <dd>スコティッシュフォールド</dd>
      <dd>キイくんの画像</dd>
      <dt>ミイちゃん 2歳</dt>
      <dd>スコティッシュフォールド</dd>
      <dd>ミイちゃんの画像</dd>
    </dl>
    <p>お部屋によって、待っている猫ちゃんが違います。</p>

    <h2>お部屋のご案内</h2>
    <p>今日はどの部屋でくつろぎますか？</p>
    <h3>3Fにゃんルーム</h3>
    <p>3Fにゃんルームの画像</p>
    <p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
        おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
    <h3>2Fにゃんルーム</h3>
    <p>2Fにゃんルームの画像</p>
    <p>元気で遊び盛りの猫ちゃんが4匹。<br>
        広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
    <h3>1Fにゃんルーム</h3>
    <p>1Fにゃんルーム画像</p>
    <p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
        お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
    <p>この他にも、お部屋は3室あります。</p>

    <h2>ご利用案内と料金について</h2>
    <p>猫が大好き！でも飼えない。<br>
        気に入った猫ちゃんと暮らしてみたい。<br>
        「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。<br>
        あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。</p>
    <h3>基本料金</h3>
    <p>基本60分でフリードリンク付きです。<br>
        一般の方は1000円、大学生は700円、高校生以下は500円となります。</p>
    <p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
    <p>お部屋によって、料金は変わりません</p>
    <h3>ご予約について</h3>
    <p>ご利用は、完全予約制です。<br>
        予約ページから、ご希望の日時とお部屋をご予約できます。</p>
    <h3>お食事について</h3>
    <p>お食事は、1Fにゃんルームのみのご利用となります。</p>
    <p>お食事は別途料金が必要になります。<br>
        カフェメニューのページをご覧ください。</p>

    <h2>営業時間・交通アクセス</h2>
    <h3>営業時間について</h3>
    <p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
        定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
    <p>その他、年末年始等の営業につきましては、お知らせでご確認ください。</p>
    <h3>交通アクセス</h3>
    <p>所在地は、東京都新宿区西新宿1-x-x<br>
        電話番号は、01-2345-6789</p>
    <p>新宿西口駅前、徒歩3分です。<br>
        東京駅からJR中央線で14分、上野駅からJR山手線で24分。<br>
        JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。</p>
    <p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>

    <h2>お知らせ</h2>
    <dl>
      <dt>2022年10月1日</dt>
      <dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
      <dd>食欲の秋の画像 </dd>
      <dt>2022年9月1日</dt>
      <dd>読書の秋！ゆっくりと、読書をしながら…</dd>
      <dd>読書の秋の画像</dd>
      <dt>2022年8月1日</dt>
      <dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
      <dd>夏の画像</dd>
      <dt>2022年7月1日</dt>
      <dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
      <dd>ネコファッションの画像</dd>
      <dt>2022年6月1日</dt>
      <dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
      <dd>梅雨の画像</dd>
    </dl>
    <p>2022 © TOU-WEB</p>
</body>
</html>