基本的に情報（ファイルなど）をいただいたときは、（ファイル名などは）コピーして使う。手打ちはしないよ。
画像をhtmlに貼ったら、とりあえず表示されてるか確認しましょう。
教科書P214-216
figure要素
>figure要素は、写真、挿絵、図表、コードなどのまとまりを表します。 figure要素によるまとまりは、単体で独立したものでなければなりません。 つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、切り出した内容自体で意味が通るようにする必要があります。
<figure><img>
<figcaption>キャプション</figcaption></figure>
>figure要素で商品解説の写真を表し、figcaption要素で写真の内容についてキャプションを記述しています。商品解説の本文では、figure要素に直接言及することはなく、figure要素の内容がなくても文書の内容に影響はありません。一方、figure要素単体を見ても何の情報であるのかがわかるように、キャプションで必要最低限の内容を説明しています。
つまり<figcaption>は紹介文的に画像の下にちょんとつく説明文のことかな。
--->画像とキャプション部分のコード
<div>
<figure>
<img src="images/hm-Content-Images-01.jpg" alt="コラムイメージ01">
<figcaption>毎日の食事は大事なもの</figcaption>
</figure>
</div>
2つめのセクションも同じようにマークアップする。
・<div>で画像を囲う。画像はfigureで囲う。figcaptionもつける
・残りの<h3><h4><p>なども<div>で囲む。
・つまりsectionに<div>が2つ
--->第2セクション部分のコード
<section><!--2つめのセクション-->
<div>
<figure>
<img src="images/hm-Content-Images-02.jpg" alt="コラムイメージ02">
<figcaption>面倒なカロリー計算もおまかせ</figcaption>
</figure>
</div>
<div>
<h3>個人でのご利用、組織でのご利用も</h3>
<h4>働き盛りのアナタをサポート</h4>
<p>
ヘルセムは働き盛りのあなたに必要な栄養をギュッと閉じ込めるべく栄養士が考えてメニューを構成しています。毎日に必要な摂取カロリーを考慮した和洋中のメニューからご自身の好みでチョイス、また会社の福利厚生として昼食のみのデリバリープランもご用意。働き盛りの世代をサポートします。
</p>
</div>
</section>
svg画像
中身はコードになっている
ベクター画像。座標を指定することで構成されている。
ロゴとかはillustratorとかで作られていることが多い。普通の画像は拡大するとがくがくしてしまうが、作業と線だけでつくられているsvg画像はきれいに表示される。
直接ソースコードにこのsvg画像のコードを貼り付けることもできるらしい。
headerのロゴ画像も貼りましょう
<h1><a href="index.html"><img src="images/hc-Header_Logo.svg" alt="Healthem アナタの健康サポート"></a></h1>
ブラウザによってデフォルトの表示が違うので、リセットして同じように表示されるようにしていきますよ。
リセットcssとノーマライズcssというやり方がある。
リセットCSS:
<h1>とかが大きくなるのも全部なしにする。
参照
https://webdesign-trends.net/entry/8137
ノーマライズCSS：
<h1>とかが大きくなるのは大きくなる。
箇条書きの・も残すようにする。
paddingの値なんかがブラウザによって違うのを統一したりしているらしい。
ノーマライズCSSが主流らしい。
リセットCSSを自分でアレンジしてカスタマイズして使いまわすということもできるらしい。
作業しているcssフォルダの中にreset.cssを新規追加。
--->reset.css
@charset "UTF-8";
*{/*全称セレクタ セレクタとしての点数は0*/
margin: 0;
padding: 0;
font-size: 100%;
list-style-type: none;/*ulの中黒とかを無しに*/
text-decoration: none;/*aの下線とかを無しに*/
color: #000;/*フォントカラー黒*/
line-height: 1;
font-weight: normal;
}
普通はもうwebにある、リセットCSSのコードを張り付けるらしい。今回はいったんこれで統一しますよ。
reset.cssの呼び出しは、自分で使うcssの上の行に記述する。（じゃないと上書きされてしまう）
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
左上もぴたぴたに配置された。
