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

2023年10月21日2023年11月24日

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

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

ここぽてと

本日はフッターを作って、レスポンシブ対応の練習をしていきます！

DAY7　ゼロからサイトを作ってみよう③

フッターを作る

リストでカード形式のリンクを作成する

   <ul class="footer-nav-list">
      <li class="footer-nav-item">
        <a href="https://www.instagram.com/" target="_blank" class="footer-nav-link">
            <img src="./img/icon-instagram.png" alt="" class="sns-img">
            <p class="footer-nav-link-text">メニューご案内</p>
      </a></li>
      <li class="footer-nav-item">
        <a href="https://www.youtube.com/" target="_blank" class="footer-nav-link">
            <img src="./img/icon-youtube.png" alt="" class="sns-img">
            <p class="footer-nav-link-text">制作のウラガワ</p>
      </a></li>
      <li class="footer-nav-item">
        <a href="https://twitter.com/" target="_blank" class="footer-nav-link">
            <img src="./img/icon-twitter.png" alt="" class="sns-img">
            <p class="footer-nav-link-text">お店の混雑状況</p>
      </a></li>

.footer-nav-list{
    display: flex;
    justify-content: center;
    margin: 40px auto 0;
    padding: 0 20px;
    gap: 24px;
}
.sns-img{
    width: 56px;
}
.footer-nav-link-text{
    font-size: 12px;
    margin-top: 12px;
}

コピーライトの作成

   <div class="footer-copy-wrapper">
        <small class="footer-copylight">©2023 Sweet Delight.</small>
    </div>

.footer-copy-wrapper{
    border-top: 1px solid rgba(241, 238, 228, 0.25);
    padding: 12px;
    margin-top: 46px;
}
.footer-copylight{
    font-size: 12px;
}

smallタグとは

smallタグは初めて聞いたタグでしたが、テキストを一回り小さくするためのタグのようです。他のタグと同じようにclassをつけて名前をつけることもできます。smallタグは、<font size=”-1″>と同じ意味を持ち、文字の表示はブラウザによって左右され、確定でサイズを定められないため、あまり推奨されていません。smallとは反対にbigタグもあり、こちらは一回り大きく設定されます。

メモ
<small>とはテキストを一回り小さくするためのタグ
<big>とはテキストを一回り大きくするためのタグ

ついにスマホ版完成！！

レスポンシブ対応を作成する

まずスマホ表示を作ったので、ここからはパソコンやタブレットでのWEBページの表示の設定をしていきます。

/* タブレット・パソコン表示 */
@media screen and (min-width:768px) {
    body{
        letter-spacing: 0.05em;
        color: #3c301e;
    }
    .section-heading-main{
        font-size: 64px;
    }
    .header{
        padding: 16px;
    }

    .header-logo{
        margin: 0;
    }
    .header-inner{
        max-width: 1080px;
        padding:0 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;   
        font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif;
    }
    .header-nav-list{
        gap: 40px;
    }
    .header-nav-link{
        transition: opacity 0.3s;
        /*hoverしたときに0.3秒かけて変化させる*/
    }
    .header-nav-link:hover{
        opacity: 0.7;
    }
    .inner {
        max-width: calc(1000px + 20px * 2);
        padding:0 40px;
        margin: 0 auto;
    }
    .section-heading-main{
        font-size: 60px;
    }
    .about{
        padding: 100px 0;
    }
    .about-contents{
        display: flex;
        align-items: center;
    }
    .about-img{
        width: 300px;
    }
    .about-text-contents{
        margin-top: 0;
    }
    .about-text{
        font-size: 15px;
        padding-left: 40px;
    }
    .about-text + .about-text{
       margin-top: 30px;
    }
    .menu{
        padding: 0 0 100px;
    }
    .menu-list{
        display: flex;
        gap: 20px;
    }
    .menu-item + .menu-item{
        margin-top:0;
    }
    .shop{
        background: url(../img/bg-shop.png) center center / cover no-repeat;
        padding: 60px 0;
    }
    .shop-inner{
        max-width: 600px;
        margin: 0 auto;

    }
    .form{
        display: flex;
        gap: 20px;
    }
    .form-submit{
      margin-top: 0;
      transition: opacity 0.3s;
    }
    .form-submit:hover{
      opacity: 0.7;
      cursor: pointer;
    }
    .footer-text{
        margin-top: 12px;
    }
    .footer-nav-list{
        gap: 40px;
    }
    .footer-copylight{
        font-size: 13px;
    }
}
/*＠予測変換でmedia screen ブレイクポイントの設定
画面の幅が768pxまでは、括弧内のスタイルで表示できる*/

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

最終チェック

/* ファーストビュー */
.fv-picture img{
    width: 100%;
    /*750pxしかない画像を画面幅767pxになるまで伸ばす*/
}

img{
    width: 100%;
}

.header-logo{
    width: 200px;
    margin: 0 auto;
}
.footer-logo{
    width: 200px;
    margin: 0 auto;
}
/* widthを決めると左寄りになるので、margin 0 auto;を入れて中央寄せにする */

動画解説では、

ポイント
768ｐｘ以上（パソコン・タブレット）スマホ（300〜400ｐｘ）だけでなく767ｐｘもチェックすること→画面崩れをする事がある。

という感じで、一つずつイメージやポジション、大きさをコーディングされていますが、下のように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行で済むので、便利です。

section-heading1のコードを貼る

まとめ

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

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