【デイトラ学習記録】Web制作コース初級編 DAY6　コーディング練習編　ゼロからサイトを作ってみよう②

2023年10月20日2023年11月24日

こんにちは、ここぽてとです。

本日も前回と引き続き、仮想スイーツショップのサイトを作っていきます。

ここぽてと

今日はメインコンテンツの作成です♪

DAY６　ゼロからサイトを作ってみよう②

<picture>タグを使って、パソコンとスマホの画像を出し分ける

<!-- Emmetでpicture>srcと入れてから、src:mを選択することでそれぞれのデバイスの画像を出し分けることができる -->
<picture>
     <!-- 768px以上の記述 -->
    <source media="(min-width:768px)" srcset="./img/fv.png">
    <!-- それ以下の時の記述 -->
    <img src="./img/sp/fv.png" alt="素材のおいしさをそのままに Sweets Delight" />
</picture>

このように設定することで、画面幅（パソコン・スマホ）によってファーストビュー画像を切り替えることができます！<picture>要素の書き方覚えておきましょう。

メインコンテンツを作る（Aboutセクションと共通パーツ）

<section class="about">
    <div class="inner">
        <h2 class="section-heading">
            <span class="section-heading-main">About</span>
            <span class="section-heading-sub">ー 当店について ー</span>
        </h2>
        <div class="about-contents">
            <img src="./img/about.png" alt="" class="">
            <p class="about-text">当店では、素材の持つ美味しさや風味を最大限に生かし、シンプルでありながらも、素材の良さを引き出すこだわりのスイーツを提供しています。</p>
            <p class="about-text">自然な味わいを大切にし、素材を感じさせるスイーツで、心に残るひとときをお過ごしください。</p>
        </div>
    </div>
</section>

/* 共通クラス */
.inner{
padding: 0 40px;
/* 画面端に40pxずつ余白 */
}
.section-heading{
text-align: center;
margin-bottom: 40px;
}
.section-heading-main{
display: block;
font-size: 40px;
}
.section-heading-sub{
display: block;
font-size: 12px;
}

ポイント
・共通クラスを作ることで、同じスタイルを何度も書かなくて済み、コードがスッキリする
・共通クラスには一目見て何かすぐわかるように、わかりやすい名前をつける

メモ
<section>タグの中には必ず1つ以上、<h>タグ（見出し）を入れなければなりません。

/* Aboutセクション */
.about{
    padding: 40px 0;
    background-color: #f1eee4;
}
.about-text{
font-size: 14px;
/* 行間 */
line-height: 2;
}
.about-text-contents{
margin-top: 20px;
}
/* .about-textと隣り合う.about-textは余白16px */
.about-text + .about-text{
margin-top: 16px;
}

今回は検証ツールでスマホ表示を見ながら、コーディングしているので、パソコン表示だと見本通りにはできていません。ただ、Webページを見るときは、パソコンよりスマホの方が多いと思うので、まずスマホ表示を作ってから、後にパソコン表示を作った方がよさそうです！

Menu（メインコンテンツ）を作る

<section class="menu">
    <div class="inner">
        <h2 class="section-heading">
            <span class="section-heading-main">Menu</span>
            <span class="section-heading-sub">ー 今月のケーキ ー</span>
        </h2>
        <div class="menu-contents">
          <ul class="menu-list">
            <li class="menu-item">
                <div class="menu-img"><img src="./img/menu1.png" alt="おすすめ ストロベリーケーキ"></div>
            <div class="menu-text-contents">
                <h3 class="menu-name">
                    <span class="menu-name-main">ストロベリーケーキ</span>
                    <span class="menu-name-sub"> - Strawberry cake - </span>
                </h3>
                <p class="menu-text"> # 旬のあまおうトッピング</p>
            </div>
            </li>
            <li class="menu-item">
                <div class="menu-img"><img src="./img/menu2.png" alt="おすすめ ブルーベリーチーズケーキ"></div>
            <div class="menu-text-contents">
                <h3 class="menu-name">
                    <span class="menu-name-main">ブルーベリーチーズケーキ </span>
                    <span class="menu-name-sub">  - Blueberry cheesecake -  </span>
                </h3>
                <p class="menu-text">  # フランス産チーズをブレンド</p>
            </div>
            </li>
            <li class="menu-item">
                <div class="menu-img"><img src="./img/menu3.png" alt="おすすめ チョコレートケーキ"></div>
            <div class="menu-text-contents">
                <h3 class="menu-name">
                    <span class="menu-name-main"> チョコレートケーキ </span>
                    <span class="menu-name-sub"> - Chocolate cake -  </span>
                </h3>
                <p class="menu-text"> # ベルギー産チョコレート使用</p>
            </div>
            </li>
          </ul>
        </div>
    </div>
</section>

/*Menuセクション*/
.menu{
    background:#f1eee4;
    padding: 80px 0;
}
.menu-item + .menu-item{
    margin-top: 62px;
}
.menu-text-contents{
    text-align: center;
    padding: 16px 10px;
    /* カード形式であれば、余白を入れたい場合はpaddingを充てるほうがいい
→paddingで上と横をしていれば、画像下の文章が長くても余白を入れることができ、すっきり見せる事ができるから。 */
}
.menu-name-main{
    display: block;
    font-size: 18px;
}
.menu-name-sub{
    display: block;
    font-size: 12px;
    color: #a98c5f;
    margin-top: 8px;
}
.menu-text{
    font-size: 14px;
    color: #a98c5f;
    margin-top: 16px;
}

今回はリストを使って、カード形式の形を作っています。テキストの余白はmarginやpaddingなどありますが、（私はmargint-topを入れがち）カード形式であれば、余白を入れたい場合は、paddingで上と横をしていれば、画像下の文章が長くても余白を入れることができ、すっきり見せる事ができるからpaddingを充てるほうがいいとのことです。

Shop情報（フォーム）を作る

<section class="shop">
    <div class="shop-inner">
        <!-- クラスは2つ充てる事ができる（共通クラス＋変更したいクラス） -->
        <h2 class="section-heading section-heading-l">
            <span class="section-heading-main">Shop</span>
            <span class="section-heading-sub">ー ショップ情報 ー</span>
        </h2>
        <div class="shop-contents">
              <p class="shop-text">ただいま、オンラインストアを準備中です。最新情報は以下より送信いただいたメールアドレスへご案内いたします。</p>
              <form action="" class="form">
                <input type="e-mail" class="form-input" placeholder="example@sample.com">
                <button type="submit" class="form-submit">SEND</button>

              </form>
        </div>

    </div>
</section>

/*shopセクション*/
.shop{
    background: url(../img/sp/bg-shop.png) center center / cover no-repeat;
    /*background-image: url(../img/sp/bg-shop.png);
    background-position: center center;
    background-size: cover;でもOK*/
    padding: 80px 0;
}
.shop-inner{
    padding: 0 20px;
}
.shop-text{
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 2;/*行間の余白*/
}
.form{
    margin-top: 40px;
}
.form-input{
    width: 100%;
    border-radius: 4px;
    background-color: rgba(255,255,255 ,0.7);
    border: none;
    padding: 14px;
    font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif;

}
/* .form-input::placeholder{
    color: #a98c5f;
} 
メールアドレスの例の文字色が変えられます（今回は変えないのでコメントアウト）*/

.form-submit{
    border-radius: 4px;
    border: none;
    font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif;
    display: block;
    margin: 10px auto 0;
    width: 120px;
    padding: 12px 10px;
    color: #fff;
    background: #a98c5f;
}

.section-heading{
   text-align: center;
   margin-bottom: 40px;
}
.section-heading-l{
    color: #fff;
    }

複数クラスを指定する（共通クラス＋変更したいクラス）

Aboutコンテンツやメインコンテンツは、タイトルの文字色がブラウンでしたが、Shopコンテンツのタイトルはタイトルの文字色が白だったので、2つクラスを充てて、CSSも追加しました。

背景の設定

動画解説では、

background-image: url(../img/sp/bg-shop.png);
background-position: center center;
background-size: cover;

という感じで、一つずつイメージやポジション、大きさをコーディングされていますが、下のようにbackgroundで背景画像＋位置＋サイズを省略して書くことも可能です。

background: url(../img/sp/bg-shop.png) center center / cover no-repeat;

こんな感じ！慣れるまで時間がかかりますが、3行が1行で済むので、コーディングの量も減って楽です。

フォームの設定

<form>タグで入力できたら、その中に、メールアドレスを入力できるエリアを作成しています。

今回はメールアドレスの入力なので、type=”e-mail”にしていますが、type属性の値を”text”指定すると、1行のテキストを入力できるエリアを作成することができます。（例：<input type=”text”>）

inputタグには大体name属性も出てくることがありますが、今回はclassで名前をつけています。javascriptなどのプログラミング言語で入力項目のデータを操作するときは、name属性をつけるそうです。

背景色をrgbaで設定

background-color: rgba(255,255,255 ,0.7);

背景色を設定するときに、rgbaで設定すると、色だけでなく透過処理も一緒にすることができます。コードが1行で済むので、便利です。

まとめ

本日は主にメインコンテンツ作成とフォームの作成をしていきました。デイトラの初級編が追加されて、中級編を受けた後に、また初級編を受けなおしていますが、教材が前のものよりもすごくわかりやすくなっています。WEB制作コースは値上げしたようですが、改めて受けなおしてみてお得だなと感じました。次回はフッターをコーディングしていくので、頑張っていきましょう。

よかったらシェアしてね！