引き続き、猫カフェトップページを使って、CSSのレイアウトを作成する流れを学習します。
CSSのレイアウトで使用する、プロパティを覚えるのが目的になります。
Chap10-3までのCSS
layout.css
img{
width:100%;
max-width: 100%;
height: auto;
}
header,
nav,
main,
section,
section>div,
footer{
width: 100%;
}
#cont-1 dl{
width:960px;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-flow: row nowrap;
}
#cont-1 dl div{
width: 23%;
}「お部屋のご案内」のレイアウト
「お部屋のご案内」に<div>とid名を追加
レイアウトに必要な<div>やid名をHTMLに追加しましょう。
<section id="cont-2">
<div>
<h2>お部屋のご案内</h2>
<p>今日はどの部屋でくつろぎますか？</p>
<div id="room-container">
<section>
<h3><a href="cat.html#room3">3Fにゃんルーム</a></h3>
<p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
<p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
</section>
<section>
<h3><a href="cat.html#room2">2Fにゃんルーム</a></h3>
<p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
<p>元気で遊び盛りの猫ちゃんが4匹。<br>
広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
</section>
<section>
<h3><a href="cat.html#room1">1Fにゃんルーム</a></h3>
<p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
<p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
</section>
</div>
<p>この他にも、お部屋は3室あります。</p>
</div>
</section>#room-containerの中の<section>をレイアウトする
#cont-1 dl,
#room-container{
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-containerと#info-item1,#info-item2をレイアウトする
#cont-1 dl,
#room-container,
#info-container{
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%;
}「営業時間・交通アクセス」のレイアウト
「営業時間・交通アクセス」に<div>とid名を追加
<section id="cont-4">
<div>
<h2>営業時間・交通アクセス</h2>
<section id="open">
<div>
<h3>営業時間について</h3>
<p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
<p>その他、年末年始等の営業につきましては、お知らせでご確認ください。</p>
</div>
</section>
<section id="access-container">
<div>
<h3>交通アクセス</h3>
<p>所在地は、東京都新宿区西新宿1-x-x<br>
電話番号は、01-2345-6789</p>
<p>新宿西口駅前、徒歩3分です。<br>
東京駅からJR中央線で14分、上野駅からJR山手線で24分。<br>
JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。</p>
<p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
</div>
<p>地図</p>
</section>
</div>
</section>#open,#access-containerと#access-container内をレイアウトする
#cont-1 dl,
#room-container,
#info-container,
#open,
#access-container{
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>p{
width: 640px;
background-color: rgb(200, 200, 200);
}「お知らせ」のレイアウト
「お知らせ」に<div>とid名を追加
<section id="cont-5">
<div>
<h2>お知らせ</h2>
<dl>
<div>
<dt>2022年10月1日</dt>
<dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
<dd><img src="images/news_10.jpg" alt="食欲の秋の画像"></dd>
</div>
<div>
<dt>2022年9月1日</dt>
<dd>読書の秋！ゆっくりと、読書をしながら…</dd>
<dd><img src="images/news_9.jpg" alt="読書の秋の画像"></dd>
</div>
<div>
<dt>2022年8月1日</dt>
<dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
<dd><img src="images/news_8.jpg" alt="夏の画像"></dd>
</div>
<div>
<dt>2022年7月1日</dt>
<dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
<dd><img src="images/news_7.jpg" alt="ネコファッションの画像"></dd>
</div>
<div>
<dt>2022年6月1日</dt>
<dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
<dd><img src="images/news_6.jpg" alt="梅雨の画像"></dd>
</div>
</dl>
</div>
</section>#cont-5の中の<dl>内をレイアウトする
#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>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%;
}
継承・上書きが出てきました。
できるだけ効率よく記述していきますが、次のように記述しても構いません。
#cont-1 dl,
#room-container,
#info-container,
#open,
#access-container{
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>p{
width: 640px;
background-color: rgb(200, 200, 200);
}
#cont-5 dl{
width:960px;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#cont-5 dl div{
width: 45%;
}