前回の続きになります。
Contents
お部屋のご案内を完成させる
<section>の幅を変更
#room-container section{
width: 30%;
}display:flexで並べた子要素（Flexアイコン）の横幅はwidthプロパティより、flexプロパティを使う方が推奨されています。（この後の章で説明があります）
最後の<p>をデザイン class属性の追加
<p><a href="#" class="cont_link">この他にも、お部屋は3室あります。</a></p><p>のレイアウトには、セレクタに注意
#cont-1 p,
#cont-2>div>p:last-of-type{
width: 960px;
margin: auto;
text-align: right;
}bodyセレクタで文字の色と行間を変更
body{
font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
line-height: 160%;
color: rgb(90, 90, 90);
}写真の大きさを整える
#room-container img{
object-fit: cover;
height: 200px;
}
異なるサイズの写真は、幅・高さを決めてから「object-fit:cover」でトリミングできます。
リンク部分の追加修正
nav ul{
padding: 0;
display: flex;
justify-content: space-around;
width:960px;
margin: auto;
list-style-type: none;
}
nav a{
display: block;
padding: 20px 10px;
}#room-container部分の修正
#room-container{
padding-bottom: 20px;
}
#room-container h3{
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
font-size: 21px;
padding-bottom:10px;
}
#room-container section:first-child h3{
background-image: url(images/illust_4.png);
}
#room-container section:nth-child(2) h3{
background-image: url(images/illust_2.png);
}
#room-container section:last-child h3{
background-image: url(images/illust_3.png);
background-size: auto 80%;
}
#room-container img{
object-fit: cover;
height: 200px;
margin-bottom: 10px;
}HTMLの修正
「ご利用案内と料金について」
<p>基本60分でフリードリンク付きです。<br>
一般の方は1000円、大学生は700円、高校生以下は500円となります。</p>
<p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
<p>お部屋によって、料金は変わりません</p>「一般の方は〜」の１行を削除（<br>も削除）しておきます。
<p>基本60分でフリードリンク付きです。</p>
<p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
<p>お部屋によって、料金は変わりません</p>3つの段落は記号リストのタグに置き換えましょう。
練習問題 （Chap14-4 , Chap16-3で解答）
画像の指示に従って、「ご利用案内と料金について」「営業時間・交通アクセス」のコンテンツを完成させてみましょう。
画像に書かれていない部分は、できるだけ画像のように再現してみてください。
解答はChap14-4とChap16-3でやります
下の図の<article> #cont-3の部分は、<section id=”cont-3″>が正解です！
「営業時間について」の<div>は、開始タグの位置が間違っていたので、画像のように修正しておきましょう