はじめてのHTML・CSS講座（2日目）

投稿日 2018年12月13日
更新日 2020年9月18日
著者スキルアップ先生
カテゴリー HTMLCSS_4日講座
カテゴリーレッスン

はじめてのHTML・CSS講座（全４回講座）の２日目の授業内容です。
前回は、headerの中にロゴと営業時間などを記載しました。

HTMLとCSSでデザインカンプの中盤までコーディング！

グローバルナビゲーションを作りましょう

<!--ここからナビゲーション-->
<nav class="gnav">
    <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="item.html">おすすめ商品</a></li>
        <li><a href="about.html">販売会社</a></li>
        <li><a href="news.html">ニュース</a></li>
        <li><a href="contact.html">お申込み</a></li>
        <li><a href="https://www.instagram.com/skillupweb/" target="_blank">Instagram</a></li>
    </ul>
</nav>

先生

まずはナビゲーションの色を塗ろう

.gnav {
    background-color: #44d038;
}

先生

今縦並びになっているパーツを横並びにしてセンター揃えにしましょう

.gnav ul {
    display: flex;
    justify-content: center;
}

先生

リンクの文字を調整していきましょう

.gnav a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    padding: 20px;
    display: block;
}

.gnav liとセレクタを指定すると、gnavというクラス名のついたものの中に入っているliタグ、という意味になります。

■displayについての概念
displayで「どんな表示方法をとるか」という設定ができます。
■リンクの概念についても知っておきましょう
→絶対パスと相対パス

ナビゲーションを完成させたら、次はメインビジュアルです。

メインビジュアル

<!--メインビジュアル-->
<div class="mv">
    <img src="images/main.jpg" alt="安心の有機野菜で豊かな食卓を">
</div>

メインビジュアルがこのままでは画面幅によってはうまく表示されませんので、CSSで画面横幅いっぱいに広げます。

.mv img {
    width: 100%;
}

おすすめ商品のセクション

<section>
    <h2 class="ttl">おすすめ商品</h2>
    <div class="item_wrap">
        <!--ひとつめの商品-->
        <div class="item">
            <img src="images/item/vegetables_basket.jpg" alt="お試しバスケット">
            <h3>有機野菜お試しバスケット</h3>
            <p>農薬や化学肥料を使わずに育てられた有機野菜の定期便を頼む前に一度試してみたい方におすすめ</p>
        </div>
        <!--2つめの商品-->
        <div class="item item_gray">
            <img src="images/item/vegetables_month1.jpg" alt="有機野菜定期便">
            <h3>有機野菜定期便</h3>
            <p>農薬や化学肥料を使わずに育てられた有機野菜。栽培している約50種類のお野菜のうち季節のお野菜５品目を毎月１度、定期的にお届けします。</p>
        </div>
        <!--3つめの商品-->
        <div class="item">
            <img src="images/item/vegetables_month2.jpg" alt="有機野菜定期便プレミアム">
            <h3>有機野菜定期便プレミアム</h3>
            <p>農薬や化学肥料を使わずに育てられた有機野菜。栽培している約50種類のお野菜のうち季節のお野菜７品目を毎月１度、定期的にお届けします。</p>
        </div>
    </div>
    <div class="item_btn">
        <a href="">商品一覧を見る</a>
    </div>
</section>

おすすめ商品のセクションはタイトルが真ん中にあり、次に似たレイアウトが３つ連続して横並びになっています（３カラム、と呼ぶ）さっそくCSSも書いてみましょう。

section {
    padding: 60px 0;
}

.ttl {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.item_wrap {
    display: flex;
    justify-content: space-between;
    width: 960px;
    margin: 0 auto 30px;
}

.item {
    width: 300px;
}

.item img {
    width: 100%;
}

.item h3 {
    font-size: 18px;
    text-align: center;
    margin: 10px 0;
}

.item_btn {
    text-align: center;
}

.item_btn a {
    background-color: #44d038;
    display: inline-block;
    padding: 10px 30px;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
}

.item_btn a:hover {
    background-color: #1b7014;
}

復習

2日目の授業で使用した主なHTML

h1、h2	見出し。h1が最も上のランクでh6まで存在する（あまりh5とかh6まで使わない）
p	段落をあらわす。主に文章を書くのに使用
nav	主要なナビゲーション
ul、li	箇条書き。ulの間にliで書く
a	リンク href=”URI”でリンク先を指定する target=”フレーム名”リンク先を別タブなどで表示させられる
section	ひとつのまとまりを区切りとしてあらわす、グループ化するタグ。このタグには見出しが必要である
class=”●●”	要素にCSSで定義したスタイルを適用するためにつける、名札のようなもの

2日目の授業で使用した主なCSS

margin	0 auto	真ん中寄せ
display	block inline-block	要素の表示に影響幅、高さの表示にも設定
text-decoration	none	下線をナシに
margin-bottom	40px	要素の外側の下部に40pxの隙間をあける
width	960px	横幅を960pxにする