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

  • 著者 スキルアップ先生 スキルアップ先生
  • カテゴリー 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

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