Webデザイン・マーケティング課授業15日目

2022年4月5日 20:27

1〜3時間目 HTML5・CSS演習

オリジナル教材

ひとまず作っていたサンプルサイトが出来たので、全コードです。

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>八千代梨農園</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="#about">八千代農園の思い</a></li>
               <li><a href="#nashi">八千代農園の梨について</a></li>
               <li><a href="#type">八千代農園の梨の種類について</a></li>
           </ul>
       </nav>
   </div>
   <section id="about" 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 id="nashi" 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 id="type" 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>
                   <span>2,800円（税込み）（5kg/大玉/10～12個入）</span>
               </a>
           </p>
       </div>
   </div>
   <section class="shopping">
       <div class="inner">
           <h3 class="sub_title">ショッピングに関するご案内</h3>
           <table>
               <tr>
                   <th>商品名</th>
                   <td>八千代農園の梨（幸水）</td>
               </tr>
               <tr>
                   <th>価格</th>
                   <td>2,800 円（税込）（5kg／大玉／10～12個入）</td>
               </tr>
               <tr>
                   <th>送料</th>
                   <td>全国一律 700円（一部離島を除く）送料詳細
                   </td>
               </tr>
               <tr>
                   <th>お届け日</th>
                   <td>日付指定不可。<br>
                       ※梨は収穫期になると一斉に熟します。その為お届け日の指定はお受けできません。何卒ご了承下さい。

                   </td>
               </tr>
               <tr>
                   <th>生産者</th>
                   <td>八千代農園</td>
               </tr>
               <tr>
                   <th>返品について</th>
                   <td>
                       基本的に、当園に責任がない限り返品はお受けできません。<br>
                       万が一商品に問題がございましたら、<br>
                       商品到着後２日以内にお電話またはメールにてご連絡をお願いします。
                   </td>
               </tr>
           </table>
       </div>
   </section>
   <footer>
       <small>&copy; YACHIYO NASHI NOEN</small>
   </footer>
</body>

</html>

reset.css

@charset "UTF-8";

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: 100%;
   font-weight: normal;
}

li {
   list-style: none;
}

table {
   border-collapse: collapse;
}

th {
   font-weight: normal;
   text-align: left;
}

img {
   vertical-align: bottom;
}

style.css

@charset "UTF-8";

/*===================
共通設定 & 汎用クラス
====================*/
html {
   scroll-behavior: smooth;
}

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;
}

/*===================
ボタン
====================*/
.btn a {
   background-color: #cc3227;
   display: block;
   color: #fff;
   text-decoration: none;
   width: 700px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   line-height: 1;
   padding-top: 15px;
   padding-bottom: 15px;
   border-radius: 10px;
   font-size: 41px;
   border: 3px solid #cc3227;
   transition: 0.3s;
}

.btn a span {
   font-size: 24px;
}

.btn a:hover {
   background-color: #fff;
   color: #cc3227;
}


/*===================
ショッピングに関するご案内
====================*/
.shopping {
   padding-top: 50px;
   padding-bottom: 50px;
}

.shopping .sub_title {
   font-size: 26px;
   border-left: 10px solid #d69411;
   padding-left: 15px;
   margin-bottom: 30px;
   line-height: 1.5;
}


.shopping table {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.shopping table th,
.shopping table td {
   border: 1px solid #333;
   padding: 10px;
}

.shopping table th {
   width: 150px;
   background-color: #d69411;
   color: #fff;
}

/*===================
フッター
====================*/
footer {
   background-color: #d69411;
   padding-top: 10px;
   padding-bottom: 10px;
   color: #fff;
   text-align: center;
}

こんな感じです。

今日は、以下のような内容です。

・ボタンの作成
・tableの作成
・特殊文字の書き方
・ページ内リンク
・次のサンプルの準備

■ボタンの作成

html

<p class="btn">
<a href="#">
ご注文はこちら<br>
<span>2,800円（税込み）（5kg/大玉/10～12個入）</span>
</a>
</p>

css

/*===================
ボタン
====================*/
.btn a {
background-color: #cc3227;
display: block;
color: #fff;
text-decoration: none;
width: 700px;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 1;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 10px;
font-size: 41px;
border: 3px solid #cc3227;
transition: 0.3s;
}

.btn a span {
font-size: 24px;
}

.btn a:hover {
background-color: #fff;
color: #cc3227;
}

こんな感じのコードです。

僕の癖が出てるっちゃ出てるのですが、aタグとかって出来ればブロック要素で括りたくなります。（今回はpタグ）

が、その辺の慣れの部分って、生徒にとっては理解できないから、何のためにpタグがあるかわからないかもですね。。。
次回は変えようかな。

cssは、aタグにdisplay:blockを入れた上で、

・ボタンの中で文字を中央揃え（text-align:center）
・ボタン自体を画面の中で中央揃え（marginの左右にauto）

この、二つの中央揃えをしないといけない箇所になります。というかそうなるように教材を作ったのですけどね。

この二つの中央揃えは、初学者にとっては理解しにくいですね。
ボタンのデザインは、いろんな所で出てくるので、引き続き何度も説明する予定。

spanタグを使って、文字の一部を選択し、文字の大きさを変えるのもポイントの一つです。

また、hoverした時に、ボーダーだけで表示するデザインにしたのですが、a:hoverの方にボーダーを書いてしまうと、ホバーした時にボタンが下にボーダー分大きくなってしまうので、hoverする前にborderを入れておくのもちょっとしたテクニックです。

transitionを使ったアニメーションも、今回が初の試みです。

スクリーンショット 2022-04-05 20.04.49

スクリーンショット 2022-04-05 20.04.56

■テーブルの作成

html

<table>
<tr>
<th>商品名</th>
<td>八千代農園の梨（幸水）</td>
</tr>
<tr>
<th>価格</th>
<td>2,800 円（税込）（5kg／大玉／10～12個入）</td>
</tr>
省略
</table>

css

.shopping table {
width: 800px;
margin-left: auto;
margin-right: auto;
}

.shopping table th,
.shopping table td {
border: 1px solid #333;
padding: 10px;
}

.shopping table th {
width: 150px;
background-color: #d69411;
color: #fff;
}

tableに関しては、前回やった内容からさほど変化がないですね。。

どちらかというとここの箇所は、h3のスタイルの方が新しい発見がある箇所です。

html

<h3 class="sub_title">ショッピングに関するご案内</h3>

css

.shopping .sub_title {
font-size: 26px;
border-left: 10px solid #d69411;
padding-left: 15px;
margin-bottom: 30px;
line-height: 1.5;
}

左側にボーダーを少し太めにかける、昔からよくある見出しのデザインですが、ポイントはline-height。

cssのbodyタグに対して、line-height:2があたっている状態で作っているので、h3も、指定しない限りline-heightが2になっている。

これだと、ボーダーが長くなりすぎるので、line-height:1.5にして、長さを調整する。

スクリーンショット 2022-04-05 20.14.18

■特殊文字の書き方

フッターの箇所は、シンプルにコピーライトを書いていく。

この時にコピーライトを表す記号を、

&copy;

で書く。

以下のサイトを紹介した。

■ページ内リンク

上部のメニューから、各コンテンツにジャンプするページ内リンクを作る。

htmlのnav部分

<nav class="inner">
<ul>
<li><a href="#about">八千代農園の思い</a></li>
省略
</ul>
</nav>

htmlの飛ばしたい部分

<section id="about" class="desc_wrap">
<div class="inner">
省略
</div>
</section>

こんな感じで、飛ばしたいところにidをつけて、aタグのhref属性に#id名を記述する。

css

html {
scroll-behavior: smooth;
}

cssに上記を記述すると、リンクをクリックした時に、スルスルっと移動する。

■次のサンプルの準備

ひとまずあまり時間がなかったので、コードを書いたり全体の説明はせず、フォルダ構成を一緒に作った。

htdocs
┗index.html
┗img
┗各画像
┗css
┗reset.css

reset.cssの準備まで行った。

今回は、以下のサイトから、Josh's Custom CSSを採用

■まとめ

ひとまず梨のLP?のサンプルが完成。少しづつ、解説していても、前に話した内容が増えて来た。
こんな感じで、似たようなコードを何度も書くことで、知識が定着していけば良いと思う。

明日以降から、新しい教材です。

今回終わったサイトの画像も含めたデータです。

この記事が気に入ったらサポートをしてみませんか？

Webデザイン・マーケティング課 授業15日目

■ボタンの作成

■テーブルの作成

■特殊文字の書き方

■ページ内リンク

■次のサンプルの準備

■まとめ

Webデザイン・マーケティング課授業15日目