Webデザイン・マーケティング課 授業14日目
1〜3時間目 HTML5・CSS演習
オリジナル教材
今回から時間で分けるのをやめて、1日何をやったかを記述します。
今日やったのは、概ねこんな感じです。
・画面の中央揃え
・ナビをflexで作成
・コンテンツを一つ作ってコピペして増やす
・コンテンツの余白を一気にとる
今日書いた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>八千代梨農園</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 class="inner">
<img src="img/gra_top.jpg" alt="八千代梨農園">
</h1>
</header>
<div class="gnav">
<nav class="inner">
<ul>
<li><a href="#">八千代農園の思い</a></li>
<li><a href="#">八千代農園の梨について</a></li>
<li><a href="#">八千代農園の梨の種類について</a></li>
</ul>
</nav>
</div>
<section class="desc_wrap">
<div class="inner">
<h2 class="title">たっぷりと甘さがのった旬の梨を届けたい</h2>
<div class="desc">
<figure>
<img src="img/gra_01.jpg" alt="梨の画像">
<figcaption>熟れてない梨</figcaption>
</figure>
<p>
千葉県八千代市。ここは梨の一大産地。<br>
八千代梨農園は、この地で100年も前から続く梨農園。<br>
「梨は美味しく食べられる旬の時期が一つの品種につき大体２週間程度」です。<br>
けれど市場へは、お盆前の時期に合わせて出荷することが大半なので、熟していない青もぎりの梨が出回ることになります。<br>
八千代梨農園では、青もぎではない、「梨を育てる者にだけ分かる、熟した最高の状態の梨」の美味しさを消費者の皆さんに知って欲しくて、<br>
味がきちんとのってから発送できる直送をと考えました。
</p>
</div>
</div>
</section>
<section class="desc_wrap bg">
<div class="inner">
<h2 class="title">八千代農園の梨について</h2>
<div class="desc">
<figure>
<img src="img/gra_02.jpg" alt="梨の木の画像">
<figcaption>梨の木</figcaption>
</figure>
<p>当園の梨は、一般の市場やスーパーで買って頂くことはできません。なぜなら、農協や中央市場では形が同じ規格の梨を大量に揃えないと引き取ってもらえないのです。なので、当園のような小さな農家では規格に沿った梨を大量に揃える事ができなので、一般の市場には出回らないのです。ただし、農協や中央市場の規格にそぐわなくても、スーパーや市場の梨よりおいしい梨を作っている自信はあります。一般の梨より多少お高く感じられるかも知れませんが、他では味わえない大きくてそれでいて甘くておいしい梨果園の梨を一度ご賞味ください。
</p>
</div>
</div>
</section>
<section class="desc_wrap">
<div class="inner">
<h2 class="title">八千代農園の梨の種類について</h2>
<div class="desc">
<figure>
<img src="img/gra_03.jpg" alt="幸水">
<figcaption>幸水</figcaption>
</figure>
<p>当園の梨は、全て幸水（こうすい）になります。甘味が強く、果汁も多くて瑞々しい梨です。和梨での生産量は最も多い、人気の品種です。お盆や残暑見舞いの贈り物におすすめです。幸水梨は特に、シャリ感を大事にしています。青い状態からほんのり色が変わってきてうっすらと透明感がでてきたころを見計らって収穫しています。糖度がでてなおかつシャリ感がある状態だからです。
</p>
</div>
</div>
</section>
<div class="btn_area">
<div class="inner">
<p class="btn">
<a href="#">
ご注文はこちら<br>
2,800円（税込み）（5kg/大玉/10～12個入）
</a>
</p>
</div>
</div>
</body>
</html>今日書いた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;
}
.inner {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.title {
font-size: 41px;
margin-bottom: 30px;
border-bottom: 4px dotted #d69411;
}
.bg {
background-color: rgba(214, 148, 17, 0.3);
}
.desc_wrap {
padding-top: 50px;
padding-bottom: 50px;
}
/*===================
ヘッダー
====================*/
header {
margin-bottom: 50px;
}
/*===================
ナビ
====================*/
nav ul {
display: flex;
justify-content: space-between;
}
nav ul li {
width: 300px;
text-align: center;
}
nav a {
text-decoration: none;
background-color: #d69411;
color: #fff;
display: block;
line-height: 70px;
}
nav a:hover {
opacity: 0.5;
}
/*===================
各コンテンツ
====================*/
.desc_wrap .desc {
display: flex;
}
.desc_wrap .desc figure {
margin-right: 40px;
}
.desc_wrap .desc figure figcaption {
text-align: center;
margin-top: 5px;
}■画面の中央揃え
まずは、画面の中央揃えの設定。
.inner{
width:1000px;
margin-left:auto;
margin-right:auto;
}
この汎用的なクラスを作り、以下の図の、各ブロックの内側に設定していきます。
header部分なら、h1、
section部分なら、内側のdivタグです。
これで、.innerを設定した箇所が中央揃えされます。
■ナビをflexで作成
ナビをフレックスで作ります。
ナビに限らず、基本的に要素と要素を横並びにしたいときは、横並びにしたい物をくくっている要素にdisplay:flexを入れます。
今回の場合は、緑の箇所（liタグ）を横並びにしたいから、赤の箇所（ulタグ）にdisplay:flexを入れます。
あとは、細かく装飾して完成です。
nav ul {
display: flex;
justify-content: space-between;
}
nav ul li {
width: 300px;
text-align: center;
}
nav a {
text-decoration: none;
background-color: #d69411;
color: #fff;
display: block;
line-height: 70px;
}
nav a:hover {
opacity: 0.5;
}
line-heightに70pxを入れると、高さが70pxで文字が真ん中のナビが出来上がります。
line-height（行間）は、文字の上下を含めて70pxという意味なので、高さに対して真ん中に文字が配置されます。ただし、一行の文字限定です。
■コンテンツを一つ作ってコピペして増やす
中央のメインコンテンツを作っていきます。
似たようなレイアウトなので、一つ作ってコピペして増やす感じで作ります。
<section class="desc_wrap">
<div class="inner">
<h2 class="title">***タイトル***</h2>
<div class="desc">
<figure>
<img src="path/to/img/" alt="">
<figcaption>***キャプション***</figcaption>
</figure>
<p>***説明文***</p>
</div>
</div>
</section>
このブロックをコピペして、中身を書き換える。
大事なのは、.descが入ったdiv。このdivの内側のfigureとpが横並びになるので、その二つを括ったdivが必要になる。
.desc_wrap .desc {
display: flex;
}
.desc_wrap .desc figure {
margin-right: 40px;
}
.desc_wrap .desc figure figcaption {
text-align: center;
margin-top: 5px;
}
また、h2タグには、.titleを入れて、cssを設定している
.title {
font-size: 41px;
margin-bottom: 30px;
border-bottom: 4px dotted #d69411;
}
真ん中のコンテンツには、背景が必要なので、.bgを入れて設定している。
.bg {
background-color: rgba(214, 148, 17, 0.3);
}
■コンテンツの余白を一気にとる
各コンテンツの余白をとるのに、marginではなくpaddingを使って一気に設定する。
paddingを使ったのは、背景の色と文字に隙間を入れたいのと、marginだと同じ向きに向き合ったときは、marginの値がたされずに、大きい方が優先されるため、計算しにくいから。
.bg {
background-color: rgba(214, 148, 17, 0.3);
}
■まとめ
今回も、新しく説明することが多かった。
この先何度も出てくる内容なので、少しづつ慣れて行ってもらえれば良い。
明日はボタンから。
この記事が気に入ったらサポートをしてみませんか？