Chap13-4で出題した練習問題の解答例から、これまでのCSSデザインを復習します。
理解できていない箇所を明確にすることが目的です。
Chap14-4の続きです !
Contents
営業時間・交通アクセス
セレクタ#cont-4部分 HTMLの修正変更
<div>の位置が間違っていたので修正します。
<section id="open">
<h3>営業時間について</h3>
<div>
<p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
<p>その他、年末年始等の営業につきましては、お知らせでご確認ください。</p>
</div>
</section>「交通アクセス」の文章をリストに変更し、電話番号に電話リンクを追加します。
<section id="access-container">
<div>
<h3>交通アクセス</h3>
<dl>
<dt>所在地</dt>
<dd>東京都新宿区西新宿1-7-3</dd>
<dt>電話番号</dt>
<dd><a href="tel:03-3344-2222">03-3344-2222</a></dd>
</dl>
<ul>
<li>新宿西口駅前、徒歩3分</li>
<li>東京駅からJR中央線で14分</li>
<li>上野駅からJR山手線で24分</li>
<li>JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結</li>
</ul>
<p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
</div>
<p>地図</p>
</section>#cont-4のレイアウトと背景画像の表示
#cont-1,
#cont-2,
#cont-3,
#cont-4{
background-image: url(images/bg_1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
padding-top: 50vh;
}背景画像を上書き
#cont-4{
background-image: url(images/bg_4.jpg);
}セレクタ#cont-4>divの背景色と余白の設定
#cont-2>div,
#cont-4>div{
background-color: rgb(255,255,255);
padding: 80px 0;
}セレクタ#open>divの背景画像の表示と文章のレイアウト
ブラウザで確認しながら、paddingやbackground-positionを調整します。
#open>div{
background-image: url(images/illust_5.png);
background-repeat: no-repeat;
background-position: 20px top;
background-size: contain;
padding-left: 120px;
}段落間のマージンを調整します。
#open p{
margin-bottom: 10px;
}
またクセでセレクタに半角スペース使っていますが、「>」の方がいいですよ
<section>間の余白を設定
#opneの下パディングまたは#access-containerの上パディング、どちらでも構いません。
マージンでもいいですが<section>は文章ではないので、ここではパディングで紹介します。
#access-container{
padding-top: 30px;
}交通アクセスの定義・説明リストをFlexでレイアウト
#access-container dl{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin-bottom: 10px;
}
#access-container dt{
flex: 0 1 30%;
}
#access-container dd{
flex: 0 1 70%;
}交通アクセスの記号リストの記号を表示
#access-container ul{
list-style-type: disc;
padding-left: 25px;
margin-bottom: 10px;
}