Webデザイン・マーケティング課 授業19日目
1〜3時間目 HTML5・CSS3
オリジナル教材
3時間目は、すべて考査につかう。
1、２時間目でサンプルサイトのトップページPCバージョンが出来上がった。ひとまず今日でHTMLとCSSの授業はひと段落なので、全部のコードを掲載します。
完成ファイルはこちら。
こちらは、imgフォルダしか入っていない練習ファイル。もしこのnoteを見た方で、練習がてら作って見たい方はどうぞ。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>洋菓子店CHALON</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<h1>
<a href="#">
<img src="img/logo.png" alt="洋菓子店CHALON">
</a>
</h1>
<nav>
<ul>
<li><a href="#">当店について</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">お菓子教室について</a></li>
</ul>
</nav>
</div>
</header>
<div class="key">
<p>
美味しいケーキを<br>
一人でも多くのお客様に<br>
召し上がっていただきたい<br>
<span>それがCHALONの想いです</span>
</p>
</div>
<div class="scroll">
<p>
<span class="material-icons">
expand_more
</span>
</p>
<p>scroll</p>
</div>
<section class="top_about row">
<div class="inner">
<h2 class="title">CHALONについて</h2>
<p class="lead">
オープンして１０年、振りかえれば長い道のりでした。 それは、お客さまのよろこぶ顔を思い浮かべながら進んできた一歩一歩の積みかさね。 変わらない、味とこだわり。進化しつづける、お客様へのサービス。
どちらも大切にしてきました。 これからもCHALONは、お客様の心に懐かしく残る様な、そんな洋菓子店であり続けます。
</p>
<a href="#" class="btn">CHALONについてもっと見る</a>
</div>
</section>
<section class="top_menu row">
<div class="inner">
<h2 class="title">メニュー</h2>
<div class="cake_wrap">
<figure>
<img src="img/menu_cake01.jpg" alt="モンブラン">
<figcaption>モンブラン</figcaption>
</figure>
<figure>
<img src="img/menu_cake02.jpg" alt="ナッツのケーキ">
<figcaption>ナッツのケーキ</figcaption>
</figure>
<figure>
<img src="img/menu_cake03.jpg" alt="ドーナツ">
<figcaption>ドーナツ</figcaption>
</figure>
<figure>
<img src="img/menu_cake04.jpg" alt="ショートケーキ">
<figcaption>ショートケーキ</figcaption>
</figure>
</div>
<a href="#" class="btn">メニュー一覧</a>
</div>
</section>
<section class="top_lesson row">
<div class="inner">
<h2 class="title">お菓子教室について</h2>
<div class="lesson_wrap">
<img src="img/about04.jpg" alt="お菓子教室">
<p>
CHALONでは、毎月第１・第２土曜日に、ご家族で参加できるお菓子教室を開催しています。<br>
当店の職人が、一から丁寧にレクチャーしますので、小さいお子さんでも安心して参加していただけます。<br>
家族の楽しい思い出作りに、是非御参加ください。
</p>
</div>
<a href="#" class="btn">お菓子教室についてもっと見る</a>
</div>
</section>
<div class="bottom_contents row pb0">
<div class="inner">
<section class="top_voice">
<h2 class="title">お菓子教室参加者の声</h2>
<div class="voice_wrap">
<img src="img/voice01.jpg" alt="参加者の声">
<div class="voice_desc">
<p>2022年4月11日参加</p>
<p>田中さんご家族</p>
<p>とても楽しかったです。子供達も夢中で作っていました。</p>
</div>
</div>
<a href="#" class="btn">参加者の声をもっと見る</a>
</section>
<section class="top_info">
<h2 class="title">CHALONからのお知らせ</h2>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<a href="#" class="btn">お知らせ一覧</a>
</section>
</div>
</div>
<footer>
<div class="inner">
<p class="footer_logo">
<img src="img/logo_white.png" alt="洋菓子店CHALON">
</p>
<div class="footer_wrap">
<div class="footer_left">
<ul>
<li><a href="#">当店について</a></li>
<li><a href="#">メニュー</a></li>
<li>
<a href="#">お菓子教室</a>
<ul>
<li><a href="#">ご参加の流れ</a></li>
<li><a href="#">参加者の声</a></li>
<li><a href="#">お申込み</a></li>
</ul>
</li>
</ul>
</div>
<div class="footer_right">
<ul>
<li><a href="#"><img src="img/icon_fb.png" alt="facebook"></a></li>
<li><a href="#"><img src="img/icon_tw.png" alt="twitter"></a></li>
<li><a href="#"><img src="img/icon_insta.png" alt="instagram"></a></li>
</ul>
<dl>
<dt>Address</dt>
<dd>
<address>
〒160-0005<br>
東京都新宿区愛住町22<br>
第3山田ビル1F
</address>
</dd>
</dl>
</div>
</div>
<p class="copy"><small>© CHALON</small></p>
</div>
</footer>
</body>
</html>reset.css
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
box-sizing: border-box
}
* {
margin: 0
}
html,
body {
height: 100%
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%
}
input,
button,
textarea,
select {
font: inherit
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word
}
#root,
#__next {
isolation: isolate
}style.css
@charset "UTF-8";
/*=========================
共通設定・汎用クラス
=========================*/
body {
font-size: 16px;
color: #333;
line-height: 2;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
text-decoration: none;
color: #f77237;
}
a:hover {
opacity: 0.6;
}
.inner {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.title {
font-weight: normal;
font-size: 26px;
line-height: 1;
margin-bottom: 30px;
text-align: center;
}
.btn {
display: block;
width: 270px;
line-height: 70px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #fff;
background-image: linear-gradient(to right, #3cad5a, #307041);
}
.row {
padding-top: 70px;
padding-bottom: 70px;
}
.pb0 {
padding-bottom: 0 !important;
}
/*=========================
ヘッダー
=========================*/
header {
padding-top: 20px;
padding-bottom: 20px;
}
header .inner {
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 a {
display: block;
}
header nav ul {
list-style: none;
padding: 0;
display: flex;
}
header nav ul li {
margin-left: 20px;
}
/*=========================
キービジュアル
=========================*/
.key {
background-image: url(../img/key2.jpg);
background-size: cover;
background-position: center center;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.key p {
background-color: rgba(247, 114, 55, 0.5);
color: #fff;
text-align: center;
line-height: 1.5;
font-size: 41px;
padding: 41px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.key p span {
font-size: 26px;
}
/*=========================
scroll
=========================*/
.scroll {
text-align: center;
line-height: 1;
color: #666;
}
.scroll span {
border: 1px solid #666;
border-radius: 50%;
padding: 10px;
}
/*=========================
CHALONについて
=========================*/
.top_about .lead {
margin-bottom: 30px;
width: 600px;
margin-left: auto;
margin-right: auto;
}
/*=========================
メニュー
=========================*/
.top_menu .cake_wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin-bottom: 30px;
}
.top_menu .cake_wrap figure {
width: 205px;
}
/*=========================
お菓子教室について
=========================*/
.top_lesson {
background-color: rgba(247, 114, 55, 0.5);
}
.top_lesson .lesson_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}
.top_lesson .lesson_wrap img {
width: 330px;
}
.top_lesson .lesson_wrap p {
width: 610px;
}
/*=========================
bottom_contents
=========================*/
.bottom_contents .inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bottom_contents .inner section {
width: 480px;
}
/*お菓子教室参加者の声*/
.top_voice .voice_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}
.top_voice .voice_wrap img {
width: 160px;
}
.top_voice .voice_wrap .voice_desc {
width: 300px;
line-height: 1;
}
.top_voice .voice_desc p:first-child {
font-size: 12px;
}
.top_voice .voice_desc p:nth-child(2) {
margin-bottom: 15px;
}
.top_voice .voice_desc p:last-child {
line-height: 1.5;
}
/*お知らせ*/
.top_info dl {
line-height: 1.5;
margin-bottom: 20px;
}
.top_info dl:last-of-type {
margin-bottom: 30px;
}
/*=========================
footer
=========================*/
footer {
background-color: #f77237;
color: #fff;
margin-top: 150px;
padding-top: 30px;
}
footer a {
color: #fff;
}
footer .footer_logo {
margin-bottom: 30px;
}
footer .footer_wrap {
display: flex;
justify-content: space-between;
}
footer .footer_left ul {
list-style: disc;
padding: 0;
list-style-position: inside;
}
footer .footer_left ul ul {
padding-left: 1em;
}
footer .footer_right ul {
list-style: none;
padding: 0;
display: flex;
margin-bottom: 30px;
}
footer .footer_right ul li {
margin-right: 20px;
}
footer .footer_right dl dt {
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
footer .footer_right dl dd {
line-height: 1.5;
}
footer .footer_right dl dd address {
font-style: normal;
}
footer .copy {
text-align: center;
}
実際に今日書いたのは、下部のコンテンツの右にある、お知らせのCSSから。
■お知らせを作る
<section class="top_info">
<h2 class="title">CHALONからのお知らせ</h2>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<dl>
<dt>2022年4月11日</dt>
<dd><a href="#">今月のケーキを追加しました</a></dd>
</dl>
<a href="#" class="btn">お知らせ一覧</a>
</section>一つ一つの日付とお知らせのテキストをdlで括っている。
一度全部のdlにmargin-bottom:20pxで余白を取り、ボタンの上のdlだけmargin-bottom:30pxを設定している。
ポイントは、昨日つかった:last-childは使えないこと。
今回はdlのならびにh2タグやaタグも、sectionに対しての小要素として書かれているので、
dl:last-child
このセレクタではうまくいかない。（最後の小要素はaタグであり、dlじゃないので、dl:last-childは存在しない）
なので、last-of-typeを使用している。of-type系だったら、小要素とかを気にせずに、単純に出てきた順番で考えてくれる。
■フッターとの隙間を埋める
.bottom_contentsが入っているdivに、.pb0を設定して、.rowにあたっているpadding-bottom:70pxを相殺する。
この時に、.pb0など、クラスに入れたら、CSSの詳細度を気にせずに絶対指定したpaddingやmarginにして欲しいので、importantを使った。
ただし、importantoはこういう場合のみにしか使わない方が良い。「最重要」がたくさんありすぎるとcssがゴチャゴチャになる。
■フッター
今回は以下のような枠組みで作る。
フッターの上の白いロゴと、下のコピーライトはpタグでくくり、真ん中の左側のメニューと右側のメニューは、青の枠線のところでdivでくくり、その外側でflexさせる。
<footer>
<div class="inner">
<p class="footer_logo">
<img src="img/logo_white.png" alt="洋菓子店CHALON">
</p>
<div class="footer_wrap">
<div class="footer_left">
<ul>
<li><a href="#">当店について</a></li>
<li><a href="#">メニュー</a></li>
<li>
<a href="#">お菓子教室</a>
<ul>
<li><a href="#">ご参加の流れ</a></li>
<li><a href="#">参加者の声</a></li>
<li><a href="#">お申込み</a></li>
</ul>
</li>
</ul>
</div>
<div class="footer_right">
<ul>
<li><a href="#"><img src="img/icon_fb.png" alt="facebook"></a></li>
<li><a href="#"><img src="img/icon_tw.png" alt="twitter"></a></li>
<li><a href="#"><img src="img/icon_insta.png" alt="instagram"></a></li>
</ul>
<dl>
<dt>Address</dt>
<dd>
<address>
〒160-0005<br>
東京都新宿区愛住町22<br>
第3山田ビル1F
</address>
</dd>
</dl>
</div>
</div>
<p class="copy"><small>© CHALON</small></p>
</div>
</footer>/*=========================
footer
=========================*/
footer {
background-color: #f77237;
color: #fff;
margin-top: 150px;
padding-top: 30px;
}
footer a {
color: #fff;
}
footer .footer_logo {
margin-bottom: 30px;
}
footer .footer_wrap {
display: flex;
justify-content: space-between;
}
footer .footer_left ul {
list-style: disc;
padding: 0;
list-style-position: inside;
}
footer .footer_left ul ul {
padding-left: 1em;
}
footer .footer_right ul {
list-style: none;
padding: 0;
display: flex;
margin-bottom: 30px;
}
footer .footer_right ul li {
margin-right: 20px;
}
footer .footer_right dl dt {
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
footer .footer_right dl dd {
line-height: 1.5;
}
footer .footer_right dl dd address {
font-style: normal;
}
footer .copy {
text-align: center;
}特にポイントらしいポイントはあまりないが、左側のメニューのリストが二重になる書き方は、慣れないとこんがらがるので、注意が必要。
後はここまでの内容が大丈夫だったら、大きくつまづくような事も無いと思われる。
■ まとめ
今日でひとまずHTMLとCSSの授業がひと段落。キリの良いところまで終わってよかった。
明日からはXDです。
この記事が気に入ったらサポートをしてみませんか？