Webデザイン・マーケティング課 授業18日目
1〜3時間目 HTML5・CSS3
オリジナル教材
今日はオリジナルサイトの中身を作っていきます。
今日作ったのはここまで
今日書いたコードはこちら
html
<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">
<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>css
.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;
}
/*=========================
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;
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;
}結構たくさん書けた。
■アバウト部分
見出しがあり、リード文があり、ボタンがある感じ。
<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>見出しとボタンは、いろいろな箇所で共通するデザインなので、各々クラスをつけてcssを作る。
.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);
}新しく登場したのは、グラデーション。
background-image:linear-gradient(向き,最初の色,最後の色);
こんな感じで指定できる。
色は複数設定できるし、割合も細かく設定できるが、ひとまず今回は2色を使ったシンプルなグラデーションを使う。
リード文は、innerの幅いっぱいまでだと（1000px）横に長すぎて見にくいので、30文字位に収まるように600pxで作っている。
■メニュー部分
タイトルとボタンは共通なのでコピペして中身を変えただけ。
このメニューが並ぶところを作るのだが、画像とケーキの名前をバラバラに考えるのではなく、画像と名前を1セットとして捉えて（緑の枠）、次にその緑の枠を横に並ばせるためのオレンジの枠が必要。
今回はオレンジの枠はdivタグ、緑の枠はfigureタグで作る。
<div class="cake_wrap">
<figure>
<img src="img/menu_cake01.jpg" alt="モンブラン">
<figcaption>モンブラン</figcaption>
</figure>
省略
</div>/*=========================
メニュー
=========================*/
.top_menu .cake_wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 30px;
}
.top_menu .cake_wrap figure {
width: 205px;
}divタグ（.cake_wrap）にdisplay:flexを入れて、内側のfigureタグを横並びに。今回は、4個しかない予定だからいいけど、4個以上ケーキが入った時にちゃんと折り返されるように、念のためflex-wrap:wrapを入れ、figureにはwidthを設定した。
■お菓子教室
ここも、横並びにするところを間違えなければ特に問題なし。
<div class="lesson_wrap">
<img src="img/about04.jpg" alt="お菓子教室">
<p>
CHALONでは、毎月第１・第２土曜日に、ご家族で参加できるお菓子教室を開催しています。<br>
当店の職人が、一から丁寧にレクチャーしますので、小さいお子さんでも安心して参加していただけます。<br>
家族の楽しい思い出作りに、是非御参加ください。
</p>
</div>/*=========================
お菓子教室について
=========================*/
.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;
}横並びにしたい画像と文字をdivで括って(.lesson_wrap)後は、display:flexを入れればOK。
横幅をちゃんと設定したかったので、念のためflex-wrap:wrapを入れたが、実は今回は意味ないかもw
■下部のコンテンツ
<div class="bottom_contents row">
<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>/*=========================
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;
}二つのsectionを横並びにするために、.innerに対してflexを入れている。
また、写真と文字を横並びにするために、.voice_wrapにもflexを入れている。
.voice_descの中のpタグを、細かく調整したかったので、first-child、nth-child(2)、last-childを使ってセレクト。
今日は、下部のコンテンツの左側を作って時間になった。明日は右側とフッター。
■まとめ
今日は、比較的スムーズに授業が進んだ。また、説明する事も毎度同じようなことばかり（横にしたいものを括ってflex）になってきたw
ひとまず要素を自由に横並びにできれば、かなり自由度が上がるので、何度も反復して覚えてもらう。
この記事が気に入ったらサポートをしてみませんか？