Chapter11 ボックスモデル

パディングを使い方を猫カフェトップページで学習します。レイアウトで使うpaddingプロパティのテクニックを理解することが目的です。 Chap10-3までのHTMLとCSS Masterついて来れない人はポイントだけでも押さえていきましょう。何をするのかが分かっていれば、作成する作業が遅れていても、後で作成できます。 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;link href=&quot;destyle.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link href=&quot;layout.css&quot; rel=&quot;stylesheet&quot;&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; list-style-type: none; } a{ display: block; padding: 20px 10px; } a:link,a:visited{ color:rgb(51,51,51); text-decoration: none; } a:hover{ background-color:rgb(255,210,210) ; color: rgb(200,50,0); } h1{ background-image: url(images/bg_h1.jpg); background-size: cover; background-position: center; padding: 60vh 0 0 0; } table,th,td{ border: 1px solid rgb(60,60,60); } table{ width: 400px; border-collapse: collapse; } th,td{ padding:15px; text-align: center; } th{ width: 150px; background-color: rgb(200, 200, 200); text-align: left; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;p&gt;&lt;img src=&quot;images/logo.png&quot; alt=&quot;にゃんルームのロゴ&quot;&gt;&lt;/p&gt; &lt;nav&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;cat.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;/header&gt; &lt;main&gt; &lt;h1&gt;にゃんルームは、&lt;br&gt;あなたと猫だけのくつろぎスペース&lt;/h1&gt; &lt;p&gt;猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。&lt;br&gt; お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。&lt;br&gt; 早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。&lt;/p&gt; &lt;section id=&quot;cont-1&quot;&gt; &lt;div&gt; &lt;h2&gt;同居中の猫ちゃんたち&lt;/h2&gt; &lt;dl&gt; &lt;div&gt; &lt;dt&gt;ブウくん 3歳&lt;/dt&gt; &lt;dd&gt;エキゾチックショートヘアー&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_1.jpg&quot; alt=&quot;ブウくんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;ワラビくん 3歳&lt;/dt&gt; &lt;dd&gt;シンガプーラ&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_2.jpg&quot; alt=&quot;ワラビくんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;キイくん 2歳&lt;/dt&gt; &lt;dd&gt;スコティッシュフォールド&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_3.jpg&quot; alt=&quot;キイくんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;ミイちゃん 2歳&lt;/dt&gt; &lt;dd&gt;スコティッシュフォールド&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/neko_4.jpg&quot; alt=&quot;ミイちゃんの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;/dl&gt; &lt;p&gt;お部屋によって、待っている猫ちゃんが違います。&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;section id=&quot;cont-2&quot;&gt; &lt;div&gt; &lt;h2&gt;お部屋のご案内&lt;/h2&gt; &lt;p&gt;今日はどの部屋でくつろぎますか？&lt;/p&gt; &lt;div id=&quot;room-container&quot;&gt; &lt;section&gt; &lt;h3&gt;&lt;a href=&quot;cat.html#room3&quot;&gt;3Fにゃんルーム&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;&lt;img src=&quot;images/room_3f.jpg&quot; alt=&quot;3Fにゃんルームの画像&quot;&gt;&lt;/p&gt; &lt;p&gt;3Fにゃんルームで待つ猫ちゃんは2匹。&lt;br&gt; おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。&lt;/p&gt; &lt;/section&gt; &lt;section&gt; &lt;h3&gt;&lt;a href=&quot;cat.html#room2&quot;&gt;2Fにゃんルーム&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;&lt;img src=&quot;images/room_2f.jpg&quot; alt=&quot;2Fにゃんルームの画像&quot;&gt;&lt;/p&gt; &lt;p&gt;元気で遊び盛りの猫ちゃんが4匹。&lt;br&gt; 広々としたリビングで思う存分、猫ちゃんたちと遊べます。&lt;/p&gt; &lt;/section&gt; &lt;section&gt; &lt;h3&gt;&lt;a href=&quot;cat.html#room1&quot;&gt;1Fにゃんルーム&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;&lt;img src=&quot;images/room_1f.jpg&quot; alt=&quot;1Fにゃんルーム画像&quot;&gt;&lt;/p&gt; &lt;p&gt;人懐っこい4匹の猫ちゃんがお出迎え。&lt;br&gt; お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。&lt;/p&gt; &lt;/section&gt; &lt;/div&gt; &lt;p&gt;この他にも、お部屋は3室あります。&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;section id=&quot;cont-3&quot;&gt; &lt;div&gt; &lt;h2&gt;ご利用案内と料金について&lt;/h2&gt; &lt;p&gt;猫が大好き！でも飼えない。&lt;br&gt; 気に入った猫ちゃんと暮らしてみたい。&lt;br&gt; 「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。&lt;br&gt; あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。&lt;/p&gt; &lt;div id=&quot;info-container&quot;&gt; &lt;section id=&quot;info-item1&quot;&gt; &lt;h3&gt;基本料金&lt;/h3&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;一般&lt;/th&gt;&lt;td&gt;1,000円&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;大学生&lt;/th&gt;&lt;td&gt;700円&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;高校生以下&lt;/th&gt;&lt;td&gt;500円&lt;/td&gt; &lt;/tr&gt; &lt;/table&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;/section&gt; &lt;div id=&quot;info-item2&quot;&gt; &lt;section&gt; &lt;h3&gt;ご予約について&lt;/h3&gt; &lt;p&gt;ご利用は、完全予約制です。&lt;br&gt; 予約ページから、ご希望の日時とお部屋をご予約できます。&lt;/p&gt; &lt;/section&gt; &lt;section&gt; &lt;h3&gt;お食事について&lt;/h3&gt; &lt;p&gt;お食事は、1Fにゃんルームのみのご利用となります。&lt;/p&gt; &lt;p&gt;お食事は別途料金が必要になります。&lt;br&gt; カフェメニューのページをご覧ください。&lt;/p&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;section id=&quot;cont-4&quot;&gt; &lt;div&gt; &lt;h2&gt;営業時間・交通アクセス&lt;/h2&gt; &lt;section id=&quot;open&quot;&gt; &lt;div&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;/div&gt; &lt;/section&gt; &lt;section id=&quot;access-container&quot;&gt; &lt;div&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;/div&gt; &lt;p&gt;地図&lt;/p&gt; &lt;/section&gt; &lt;/div&gt; &lt;/section&gt; &lt;section id=&quot;cont-5&quot;&gt; &lt;div&gt; &lt;h2&gt;お知らせ&lt;/h2&gt; &lt;dl&gt; &lt;div&gt; &lt;dt&gt;2022年10月1日&lt;/dt&gt; &lt;dd&gt;秋にピッタリな、スイーツとお食事はいかが？&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/news_10.jpg&quot; alt=&quot;食欲の秋の画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;2022年9月1日&lt;/dt&gt; &lt;dd&gt;読書の秋！ゆっくりと、読書をしながら…&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/news_9.jpg&quot; alt=&quot;読書の秋の画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;2022年8月1日&lt;/dt&gt; &lt;dd&gt;猫ちゃんたちも、暑さでぐったりしています。&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/news_8.jpg&quot; alt=&quot;夏の画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;2022年7月1日&lt;/dt&gt; &lt;dd&gt;猫ちゃんたちの夏ファッションが楽しめます。&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/news_7.jpg&quot; alt=&quot;ネコファッションの画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;div&gt; &lt;dt&gt;2022年6月1日&lt;/dt&gt; &lt;dd&gt;雨の日は、ねこ部屋でゆっくりしませんか？&lt;/dd&gt; &lt;dd&gt;&lt;img src=&quot;images/news_6.jpg&quot; alt=&quot;梅雨の画像&quot;&gt;&lt;/dd&gt; &lt;/div&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/section&gt; &lt;/main&gt; &lt;footer&gt; &lt;p&gt;2022 &copy; TOU-WEB&lt;/p&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; layout.css img{ width:100%; max-width: 100%; height: auto; } header, nav, main, section, section&gt;div, footer{ width: 100%; } #cont-1 dl, #room-container, #info-container, #open, #access-container, #cont-5 dl { width:960px; margin: 0 auto; display: flex; justify-content: space-around; flex-flow: row nowrap; } #cont-1 dl div{ width: 23%; } #room-container section{ width: 32%; } #info-item1, #info-item2{ width: 45%; } #open{ display: block; } #access-container div{ width: 310px; } #access-container&gt;p{ width: 640px; background-color: rgb(200, 200, 200); } #cont-5 dl{ flex-flow: row wrap; justify-content: space-between; } #cont-5 dl div{ width: 45%; } &lt;h1&gt;の文章と背景画像の完成 h1のパディングを使って背景画像を表示しながら、文章を移動させてレイアウトします。h1セレクタの内容は、index.htmlの方へ記述しているので追加します。 h1{ background-image: url(images/bg_h1.jpg); background-size: cover; background-position: center; text-align: right; padding: 60vh 5% 10vh 0; color: rgb(255,255,255); line-height: 140%; } &lt;h1&gt;の文章を修正・変更しておきましょう。「、」を削除し&lt;br&gt;を追加します。 &lt;h1&gt;にゃんルームは&lt;br&gt;あなたと猫だけのくつろぎスペース&lt;/h1&gt; Master&lt;br&gt;が元々あった場合は無視してください。「、」は削除しましょう。 リード文の文章と背景画像をレイアウトする リード文に&lt;div&gt;とid名を追加 &lt;main&gt; &lt;h1&gt;にゃんルームは、&lt;br&gt;あなたと猫だけのくつろぎスペース&lt;/h1&gt; &lt;div id=&quot;lead&quot;&gt; &lt;p&gt;猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。&lt;br&gt; お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。&lt;br&gt; 早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。&lt;/p&gt; &lt;/div&gt; &lt;section id=&quot;cont-1&quot;&gt; 段落の幅960pxで中央に配置し、背景画像を右側に表示する #lead p{ width: 960px; margin: auto; background-image: url(images/txtimg_1.jpg); background-position: right center; background-repeat: no-repeat; background-size : 385px auto; } background-image , background-repeat , background-positionプロパティは、背景画像のセットになるので覚えておきましょう。background-sizeプロパティは使わないこともあるので、追加オプションと覚えておけば良いです。値は、デザインカンプの実寸サイズの「幅385px 高さauto（自動）」で設定するといいでしょう。 パディングで文章の位置調整と背景画像を表示する パディングで移動するのは文章だけで、背景画像は動いていないことを確認しておきましょう。パディングを設定することでボックスが大きくなり、背景画像の表示領域は広がります。 #lead p{ width: 960px; margin: auto; background-image: url(images/txtimg_1.jpg); background-position: right center; background-repeat: no-repeat; background-size : 385px auto; padding : 160px 410px 160px 0; line-height : 40px; } background-positionで背景画像の位置を微調整する 背景画像を動かすのは、background-positionプロパティでできます。設定した値を座標とし、ボックスと背景画像の位置を合わせて表示してくれます。 #lead p{ width: 960px; margin: auto; background-image: url(images/txtimg_1.jpg); background-position: 100% 80%; background-repeat: no-repeat; background-size : 385px auto; padding : 160px 410px 160px 0; line-height : 40px; }

Chapter11 ボックスモデル

Chap11-1 CSSのボックスモデル

Chap11-2 マージンとパディング

Chap11-3 ボックスのサイズ

Chap11-4 ボックスのデザイン