スキルアップ先生 はじめてのHTML・CSS講座（全４回講座）の２日目の授業内容です。
前回は、headerの中にロゴと営業時間などを記載しました。
HTMLとCSSでデザインカンプの中盤までコーディング！
headerとnavを整える
ロゴと営業情報が横並びにはなったものの、まだ画面の端に寄りすぎていたりナビが縦並びの状態ですので、CSSで整えていきましょう。
■画面の端に広がりすぎ問題を解決する
デザインカンプに忠実に作成するのであれば、ロゴと営業時間等の情報は左右に離れてはいるものの、画面にたいしてぴったりとくっつくわけではありません。
画面の端に広がりすぎると「読み辛い」サイトになってしまいます。
これを解決するために「クラス名を指定して横幅を決め、画面の中央に常に持ってくる」という作業を行います。
■クラス(class)名を指定する
いろんなものが「div」になってしまうと、CSSが干渉し合います。
HTMLを適切に書き換え、クラス名を指定して横幅を決め、画面の中央に常に持ってくる設定をしましょう。
<!--ヘッダー-->
<header>
<div class="header_inner">
<h1><a href="index.html"><img src="images/logo.png" alt="有機野菜どっとこむ"></a></h1>
<div class="header_info">
<p>営業時間：9:00〜18:00</p>
<p>電話番号：000-0000-0000</p>
</div>
</div>
</header>
<!--ヘッダーここまで-->■クラス（class）とは
HTMLのタグに名前をつけるものです。
<div class=”header_inner”> といったように、class=”●●●” と書きます。
CSSでそのclassを指定する場合は、
.header_inner {……} と指定します。
初心者のころはよく最初のドットを入れ忘れるので、注意しましょう。
上記のHTMLに合わせてCSSを書き直していきます。
■画面中央に持ってくるための記述
横幅を指定して、margin: 0 auto; する書き方はまるごと覚えましょう（よく使用します）
marginというのは、要素の外側に余白を作るCSSプロパティです。
※margin解説もさるわかさんの記事がおすすめ！
■真ん中寄せの作業を実際に書くと、横並びが解除されます。
display: flex; を入れる場所をしっかり把握して、入れ替えましょう。
@charset "utf-8";
header{
padding: 20px;
border-bottom: 2px solid #f8ef0e;
}
.header_inner{
display: flex;
justify-content: space-between;
width: 960px;
margin: 0 auto;
}
.header_info{
font-weight: bold;
font-size: 18px;
color: #1c61ce;
}つぎはナビゲーションがまだ横並びになっていませんでしたので、横並びにします。
■HTMLにクラス名をつけて、表示する文字をデザインカンプのとおりに書き直します。
<!--グローバルナビ-->
<nav class="gnav">
<ul>
<li><a href="">おすすめ商品</a></li>
<li><a href="">販売会社</a></li>
<li><a href="">ニュース</a></li>
<li><a href="">お申込み</a></li>
</ul>
</nav>
<!--グローバルナビここまで-->上記のHTMLに合わせてCSSを記述します。
.gnav{
border-bottom: 2px solid #f8ef0e;
padding: 10px;
}
.gnav ul{
text-align: center;
}
.gnav li{
display: inline;
margin: 0 20px;
}
.gnav a{
color: #333;
text-decoration: none;
font-size: 16px;
}.gnav liとセレクタを指定すると、gnavというクラス名のついたものの中に入っているliタグ、という意味になります。
■displayについての概念
displayで「どんな表示方法をとるか」という設定ができます。
displayの概念と基本的な値についてはこちらの記事がとてもわかりやすく解説してくれていますので読んでみてください。
https://saruwakakun.com/html-css/basic/display
（他の記事も本当にわかりやすく解説されていておすすめです）
１日目に作成した部分を整えることができました。
■リンクの概念についても知っておきましょう
→絶対パスと相対パス
２日目で作るのはデザインカンプの下記の部分です。
メインビジュアルを入れる
<!--メインビジュアル-->
<div class="main-visual">
<img src="images/main.jpg" alt="安心の有機野菜で豊かな食卓を">
</div>
<!--メインビジュアルここまで-->メインビジュアルがこのままでは画面幅によってはうまく表示されませんので、CSSで画面横幅いっぱいに広げます。
.main-visual img {
width: 100%;
}おすすめ商品のセクション
<!--おすすめ商品セクション-->
<section>
<h2 class="ttl">おすすめ商品</h2>
<div class="container">
<div class="item">
<div class="item_img"><img src="images/item/vegetables_basket.jpg" alt="有機野菜お試しバスケット"></div>
<h3 class="item_ttl">有機野菜お試しバスケット</h3>
<p>農薬や化学肥料を使わずに育てられた有機野菜の定期便を頼む前に一度試してみたい方におすすめです。</p>
</div>
<div class="item">
<div class="item_img"><img src="images/item/vegetables_month1.jpg" alt="有機野菜定期便"></div>
<h3 class="item_ttl">有機野菜定期便</h3>
<p>農薬や化学肥料を使わずに育てられた有機野菜。栽培している約50種類のお野菜のうち季節のお野菜５品目を毎月１度、定期的にお届けします。</p>
</div>
<div class="item">
<div class="item_img"><img src="images/item/vegetables_month2.jpg" alt="有機野菜定期便プレミアム"></div>
<h3 class="item_ttl">有機野菜定期便プレミアム</h3>
<p>農薬や化学肥料を使わずに育てられた有機野菜。栽培している約50種類のお野菜のうち季節のお野菜７品目を毎月１度、定期的にお届けします。</p>
</div>
</div>
</section>
<!--おすすめ商品セクションここまで-->おすすめ商品のセクションはタイトルが真ん中にあり、次に似たレイアウトが３つ連続して横並びになっています（３カラム、と呼ぶ）さっそくCSSも書いてみましょう。
.ttl{
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.container{
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.item{
width: 300px;
}
.item_img img{
max-width: 100%;
}
.item_ttl{
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 20px 0;
}復習
2日目の授業で使用した主なHTML
| h1、h2 | 見出し。h1が最も上のランクでh6まで存在する （あまりh5とかh6まで使わない） |
| p | 段落をあらわす。 主に文章を書くのに使用 |
| section | まとまりを区切りとしてあらわす、グループ化するタグ |
| class=”●●” | 要素にCSSで定義したスタイルを適用するためにつける、 名札のようなもの |
2日目の授業で使用した主なCSS
| margin | 0 auto | 真ん中寄せ |
| display | inline | 要素が幅と高さを持たずに横に並ぶ |
| text-decoration | none | 下線をナシに |
| margin-bottom | 40px | 要素の外側の下部に40pxの隙間をあける |
| width | 960px | 横幅を960pxにする |
| max-width | 100% | 最大の横幅を100%にする（親要素の幅をはみ出さない） |