HTMLテンプレート（雛形）
HTMLテンプレートを事前に用意しておくことで、作業効率が向上します。このページでは、私が用意したテンプレートを紹介していますが、これが唯一の正解というわけではありません。自分のニーズに合わせてカスタマイズして使用することをおすすめします。これにより、より効果的な作業が可能になるでしょう。
HTMLテンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>site title</title>
<meta name="description" content=""><!-- 100文字以内 -->
<!-- TEL -->
<meta name="format-detection" content="telephone=no">
<!-- Favicon -->
<link rel="icon" href="favicon.ico"><!-- 32×32 -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- 180×180 -->
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<!-- Style Sheets -->
<link rel="stylesheet" href="css/style.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- Chrome Error -->
<script>
console.log("chrome transition");
</script>
</head>
<body>
<!-- header -->
<header>
<div class="logo"><a href="">LOGO</a></div>
<!-- nav -->
<nav class="gnav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">COMPANY</a></li>
<li><a href="">BUSINESS</a></li>
<li><a href="">RECRUIT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</header>
<!-- main -->
<main>
<!-- article -->
<article>
<!-- section -->
<section>
<h2>見出しその１</h2>
<p>コンテンツの内容</p>
</section>
<!-- section -->
<section>
<h2>見出しその２</h2>
<p>コンテンツの内容</p>
</section>
</article>
</main>
<!-- footer -->
<footer>
<!-- Copyright -->
<div class="copyright">©2023 SITE NAME</div>
<!-- Page Top -->
<div class="pagetop"><a href="#">PAGETOP</a></div>
</footer>
<!-- Script -->
<script src="js/script.js"></script>
</body>
</html>タグや設定について
viewport
width=device-width, initial-scale=1 は、レスポンシブウェブデザインを実現するために重要な設定です。
width=device-width は、デバイスの画面幅に合わせてページの表示幅を設定します。これにより、デバイスごとに最適な表示が実現されます。initial-scale=1 は、初期表示時のズームレベルを 1（100%）に設定し、ユーザーが最初にウェブページを開いたときに正確なスケールで表示されるようにします。
<meta name="viewport" content="width=device-width, initial-scale=1">Favicon
通常は16×16ピクセルまたは32×32ピクセルが一般的なFaviconの標準サイズですが、一部のデバイスやブラウザはより大きなFaviconをサポートしている場合もあります。
一方で、apple-touch-icon.pngは主にAppleデバイス（iPhone、iPadなど）のホーム画面に追加されるウェブサイトのアイコンを指します。このアイコンは、ウェブサイトをホーム画面に追加するときに表示され、タップすることでサイトに簡単にアクセスできるようになります。
<link rel="icon" href="favicon.ico"><!-- 32×32 -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- 180×180 -->Chrome Error
Chromeでページを読み込む際に、transitionのバグが発生する場合の解決策です。
<script>
console.log("chrome transition");
</script>HTML5で追加された要素について
HTML5では、要素や属性の追加、意味付けの変更が行われました。このコンテキストで、文書の構造をより明確に表現するための要素に焦点を当てて紹介します。
header要素（ヘッダー）
ページの上部にあるブロックを定義する要素です。
Webサイトやブログのロゴマークやタイトルやメニューが入ることが多いです。
footer要素（フッター）
ページの下部にあるブロックを定義する要素です。
ロゴマークや連絡先や著作権やWebサイト全体に関するリンクが入ることが多いです。
nav要素（ナブ）
グローバルナビゲーションやメニューやカテゴリーなどのブロックを定義する要素です。
基本的にどのナビゲーションにも使用できるため複数設定することができますが、主要なナビゲーションのみに使用されることが多いです。
main要素（メイン）
メインコンテンツが含まれる場所で記事の本文が入るブロックを定義する要素です。
main要素は各ページにつき1回しか使用できず、Webサイト共通のコンテンツ（ロゴ、ナビ、コピーライトなど）は除きます。article, sectionを入れ子としての使用ができます。
aside要素（アサイド）
本文とは独立したページの内容と関連がないブロックや補足情報のブロックを定義する要素です。
サイドバーや広告バナーや関連記事などが入ります。
article要素（アーティクル）
独立したコンテンツの部分で、単独で成り立つコンテンツのブロックを定義する要素です。
ページの説明に使用され、そのブロックだけで完結できる内容が入ります。
複数設定することができてarticleブロックには見出し要素（h1～h6）は必須ではありません。
section要素（セクション）
章やセクションごとに分けて情報を整理するブロックを定義する要素です。
コンテンツをグループ化するためのものです。ウェブページ内でテーマやトピックごとに情報をまとめるのに役立ちます。sectionブロックの先頭に必ず見出し要素（h1～h6）は必須となります。
Webサービスについて
Webサービスは、デザインとユーザーエクスペリエンスの向上に大きく寄与します。特に、Google FontsとFontAwesomeはよく利用されるため、これらを紹介いたします。
Google Fontsを使用して適切なフォントを選び、FontAwesomeを利用してアイコンを組み込むことで、ウェブページの外観と使い勝手を飛躍的に向上させることが可能です。
Google Fonts（グーグルフォント）
Google Fontsは、ウェブデザイナーや開発者が無料で利用できる様々なフォント（書体）のコレクションです。これらのフォントは、ウェブページやアプリケーションに適用することで、テキストの見た目を自在にカスタマイズできます。Google Fontsの利点は、美しいフォントを手軽に利用できること、ウェブブラウザ上ですぐに読み込むことができること、多言語対応のフォントも提供されていることなどが挙げられます。
FontAwesome（フォントオーサム）
FontAwesomeはアイコンフォントのライブラリです。アイコンフォントは、文字として扱えるアイコンを提供し、これをウェブページやアプリケーション内で容易に利用できます。通常の画像とは異なり、アイコンフォントは拡大・縮小してもクリアなまま表示されるため、レスポンシブデザインに適しています。FontAwesomeは多岐にわたるアイコンを提供し、さらにカスタマイズも可能です。
まとめ
テンプレートはデザイン済みのものが配布や販売されていますが、オリジナルデザインを作成する場合、デザインに合ったテンプレートが見つからないことがよくあります。そこで、今回のような骨組みだけの自作テンプレートを1つ用意しておくと、様々な場面で便利です。いかがでしょうか？
このテンプレートはデザインの基本構造のみが含まれており、さまざまなシーンで利用できる汎用的なものです。ぜひお役立ていただければと思います。
