HTML&CSS Day2 :基本的なHTMLを使う

１.概要

参考書のChapter３にてHTMLの基本的な使い方を学習。
サイトのヘッダーとフッターを作成。

2.目次

• head要素
• body要素
  • header要素
  • footer要素
• 相対パス
• 感想

3.head要素

文書に関する基本情報。ウェブブラウザや検索エンジンが文書の概要を把握するために参照する。

●必須
1.文字コード

    <meta charset="utf-8">

2.タイトル(サイトのタブに表記される)

    <title>AAA website</title>    

●任意
1.ページの概要(↓xxx部分に概要を記載。たくさんページ作ったら必須だろうな〜）

    <meta name="description" content="XXXXXXXXX"> 

●スマートフォンの表示用
1.表示領域　

    <meta name="viewport" content="width=device-width">

2.スマホメニューボタン(JavaScriptを埋め込む)

    <script src="./js/toggler-menu.js"></script>

4.body要素

Webページのコンテンツや本文。

4-1.header要素

    <header class="header">
    </header>

以下をコーディング
・ロゴ指定。
　イメージロゴにはトップページへのリンクを張る。クラス指定も。

     <a class="header-logo" href="./index.html">
        <img src="./images/common/logo-header.png" alt="aaa">
      </a>

・スマホ用のメニューボタンを設定。

    <button class="toggle-menu-button"></button>

・ナビゲーションエリアを設定

    <div class="header-site-menu">
        <nav class="site-menu">
            <ul>
                <li><a href="./concept.html">CONCEPT</a></li>
                <li><a href="./menu.html">MENU</a></li>
                <li><a href="./shop.html">SHOP</a></li>
                <li><a href="./access.html">ACCESS</a></li>
            </ul>
        </nav>
    </div>

こつ：項目単位に、CSSやJavaScriptで識別できるよう、class指定をする。

4-2.footer要素

    <footer class="footer"></footer>

以下をコーディング
・ナビゲーションエリアを設定。
headerをコピペ

・ロゴ指定。
headerと同様。headerと記載している部分をfooterへ変更

・電話番号、営業時間、コピーライトを記述

5.相対パス

同じウェブサイト内へリンクを張るときに使用。
・同じディレクトリへのパスは./の後ろにファイル名を記述
・上の階層へのパスは../を記述。２階層上であれば../../のように階層の数だけ繰り返す
・下の階層へのパスは、ディレクトリ名の後ろに/を記述

6.感想

本日は５４行しか記述していないのにヘロヘロ。今日記載した部分はサイトベースで見た場合は1秒しかかからないのに、記述する時間は長い……
htmlでWeb作成するには根気が必要。