Zenn
🔧

【Emmet】HTMLの雛形と、おすすめのカスタマイズ方法！【HTML5/テンプレート/OGP】

2024/08/03に公開
CSS
HTML
JavaScript
VS Code
Emmet
tech

Emmet で展開できる HTML の雛形についての詳しい解説と、
おすすめのカスタマイズ方法

おはこんばんにちは！

今日は、Emmet (エメット省略記法) を使って HTML の雛形を展開する方法と、そのおすすめのカスタマイズについて詳しく解説していきます。

Emmet は、HTML や CSS を書く際にコーディングを効率化するとっても便利なツールですが、最初は少し戸惑うかもしれません。

でも、心配はいりません！ わかりやすく、楽しく学んでいきましょう！
HTML や CSS のコーディングが、ぐっと楽になりますよ。

では、さっそく見ていきましょう！

デフォルトの HTML 雛形

まずは、Emmet で展開できるデフォルトのHTML雛形から見ていきましょう。
この雛形は、HTML文書の基本的な構造をすぐに作成できるので、とっても便利です。

HTML 雛形の展開方法

Emmet が導入されたエディターで、「!」を入力した後に、tabキーを入力する。

デフォルトの雛形のコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

詳しい解説

デフォルトの雛形の詳しい解説

  • <!DOCTYPE html>: これはHTML5の文書型宣言です。
    ブラウザに「これから書くのはHTML5だよ」と教えます。

  • <html lang="en">: HTML文書のルート要素です。
    lang属性は文書の言語を指定します。日本語の場合は lang="ja" にします。

  • <head>: 文書のメタデータを含む部分です。
    ここでは文字セットやビューポートの設定、タイトルを指定します。

  • <meta charset="UTF-8">: 文書の文字エンコーディングを UTF-8 に設定します。
    HTML ファイル自身の文字コードと、それを表示するブラウザの文字コードが異なると、
    文字の対応表が異なるので、文字化けが発生してしまいます。
    HTML では、 UTF-8 を使用することが推奨されています。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">:
    ビューポートの設定で、レスポンシブデザインに対応します。

  • <title>: 文書のタイトルを設定します。ブラウザタブに表示されます。

  • <body>: 文書のコンテンツが含まれる部分です。ここに実際のコンテンツを追加します。

デフォルトの雛形も非常にシンプルで使いやすいのですが、
実際のプロジェクトにおいては、少し修正が必要です。

解説の前に、まずは『結論』から

HTML5 雛形からのカスタマイズの結論！

まずは、結論から言ってしまいます！
これを使えば、基本的な構造が整った状態で作業を始められますよ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>私の素敵なウェブサイト</title>
    <meta name="description" content="私の素敵なウェブサイトで最新の情報をチェックしましょう。">
    <meta name="keywords" content="ウェブサイト, おしゃれ, 最新情報">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <link rel="canonical" href="https://example.com">
    <link rel="icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="icon.png">

    <!-- OGP -->
    <meta property="og:url" content="https://example.com">
    <meta property="og:type" content="website">
    <meta property="og:title" content="私の素敵なウェブサイト">
    <meta property="og:description" content="最新情報をチェックしましょう">
    <meta property="og:site_name" content="私のウェブサイト">
    <meta property="og:image" content="https://example.com/og-image.jpg">
    <meta property="og:locale" content="ja_JP">

    <!-- OGP Facebook -->
    <meta property="fb:app_id" content="1234567890">

    <!-- OGP X (Twitter) -->
    <meta name="x:card" content="summary_large_image">
    <meta name="x:site" content="@your_x_handle">
    <meta name="x:creator" content="@your_x_handle">
    <meta name="x:title" content="私の素敵なウェブサイト">
    <meta name="x:description" content="最新情報をチェックしましょう。">
    <meta name="x:image" content="https://example.com/x-image.jpg">

    <!-- Import 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=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Import CSS -->
    <link rel="stylesheet" href="/common/css/reset.css">
    <link rel="stylesheet" href="/common/css/style.css">

    <!-- Import JS/jQuery Library -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

    <!-- START Header Area -->
    <header></header>
    <!-- END Header Area -->

    <!-- START Main Area -->
    <main></main>
    <!-- END Main Area -->

    <!-- START Footer Area -->
    <footer></footer>
    <!-- END Footer Area -->

    <!-- Import JS -->
    <script src="/common/js/function.js"></script>

</body>
</html>
例文を消すのが億劫な方向けの、コピペ用コード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <link rel="canonical" href="">
    <link rel="icon" href="">
    <link rel="apple-touch-icon" href="">

    <!-- OGP -->
    <meta property="og:url" content="">
    <meta property="og:type" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:site_name" content="">
    <meta property="og:image" content="">
    <meta property="og:locale" content="ja_JP">

    <!-- OGP Facebook -->
    <meta property="fb:app_id" content="">

    <!-- OGP X (Twitter) -->
    <meta name="x:card" content="">
    <meta name="x:site" content="">
    <meta name="x:creator" content="">
    <meta name="x:title" content="">
    <meta name="x:description" content="">
    <meta name="x:image" content="">

    <!-- Import 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=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Import CSS -->
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">

    <!-- Import JS/jQuery Library -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

    <!-- START Header Area -->
    <header></header>
    <!-- END Header Area -->

    <!-- START Main Area -->
    <main></main>
    <!-- END Main Area -->

    <!-- START Footer Area -->
    <footer></footer>
    <!-- END Footer Area -->

    <!-- Import JS -->
    <script src=""></script>

</body>
</html>

では、どんなカスタマイズをしたのかを、全て詳しく解説していきます。
開発中の方は、ご自身のプロジェクトに合わせて一緒に修正していきましょう！

おすすめのカスタマイズ方法

必須で修正すべきポイント

  1. <title>タグ
    ページのタイトルはブラウザのタブに表示されるので、
    ページの内容を簡潔に表すタイトルを設定しましょう。例えば:
<title>私の素敵なウェブサイト</title>

  1. <meta name="description" content="">
    このタグは検索エンジンの検索結果に表示されるサイトの説明文を設定します。
    サイトの内容を簡潔に説明する文を記入することで、SEO対策がしやすくなります。例えば:
<meta name="description" content="私の素敵なウェブサイトで最新の情報をチェックしましょう。">

  1. <meta name="keywords" content="">
    このタグは検索エンジンに向けてサイトのキーワードを設定します。
    キーワードはカンマで区切って記述します。例えば:
<meta name="keywords" content="ウェブサイト, おしゃれ, 最新情報">
  1. <html lang="ja">
    デフォルトでは lang="en" となっていますが、
    日本語のサイトであれば lang="ja" に変更しましょう。例えば:
<html lang="ja">

必須で追加すべきポイント

  1. <meta name="viewport" content="width=device-width,initial-scale=1.0">
    レスポンシブデザインを適用するために必要です。
    モバイルデバイスでの表示を適切にするために設定します。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
  1. <meta name="format-detection" content="telephone=no,email=no,address=no">
    iPhoneなどで電話番号やメールアドレス、住所が自動的にリンクにならないようにします。
<meta name="format-detection" content="telephone=no,email=no,address=no">
  1. <meta name="author" content="">
    ページの作者を指定することで、より詳細な情報を提供できます。
    特に複数の著者が関与している場合には有用です。
<meta name="author" content="あなたの名前">

インポート周りで追加すべきポイント

  1. Google Fonts の読み込み

デフォルトでは、フォントが指定されていない場合があります。
自分が使いたいフォントを追加することで、デザインを一層引き立てることができます。
例えば、Noto Sans JP を使用する場合は以下のように設定します。

<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=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
  1. CSS の読み込み

スタイルシートはサイトのデザインに必要です。
自分のスタイルシートとリセットCSSをインポートします。
リセットCSSは、異なるブラウザ間でも表示の違いをなくすために使います。

<link rel="stylesheet" href="/common/css/reset.css">
<link rel="stylesheet" href="/common/css/style.css">
  1. JavaScript の読み込み

サイトにインタラクティブな要素を追加するためには、
JavaScript や jQuery のライブラリを読み込みます。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="/common/js/function.js"></script>

追加をした方が良いところと、その理由

  1. <link rel="canonical" href="">
    このタグは、検索エンジンに対して正しい URL を示すために使います。
    重複コンテンツを避けるために設定します。
<link rel="canonical" href="https://example.com">
  1. <link rel="icon" href="favicon.ico">
    ファビコンを設定することで、
    ブラウザのタブに表示されるアイコンをカスタマイズできます。
<link rel="icon" href="favicon.ico">

  1. <link rel="apple-touch-icon" href="icon.png">
    このタグは、スマホのホーム画面に追加したときのアイコンを設定します。
<link rel="apple-touch-icon" href="icon.png">

OGP（Open Graph Protocol）の追加と、その理由

OGP は、ソーシャルメディアでリンクが共有された際に、
どのようにタイトルや説明、画像が表示されるかをコントロールするためのメタタグです。
設定しておくことで、リンクがシェアされたときの見た目をカスタマイズし、
サイトの魅力を引き出すことができます。

<!-- OGP -->
<meta property="og:url" content="https://example.com(ページのURL)">
<meta property="og:type" content="website(ページの種類)">
<meta property="og:title" content="私の素敵なウェブサイト(表示させたいタイトル)">
<meta property="og:description" content="最新情報をチェックしましょう。(表示させたい説明文)">
<meta property="og:site_name" content="私のウェブサイト(ホームぺージのタイトル)">
<meta property="og:image" content="https://example.com/og-image.jpg(表示させたい画像のURL)">
<meta property="og:locale" content="ja_JP(言語)">

OGP Facebook

Facebook での表示を制御するための設定です。
アプリIDを設定することで、Facebook の解析ツールが使えるようになります。

<meta property="fb:app_id" content="1234567890(アプリのダッシュボードで確認)">

OGP X (旧Twitter)

X (旧Twitter) での表示を制御するための設定です。
カードタイプを指定して、表示形式を調整します。

<meta name="x:card" content="summary_large_image(大)(もしくはsummary(小))">
<meta name="x:site" content="@your_x_handle(公式Xがあれば)">
<meta name="x:creator" content="@your_x_handle(制作者のXがあれば)">
<meta name="x:title" content="私の素敵なウェブサイト(表示させたいタイトル)">
<meta name="x:description" content="最新情報をチェックしましょう。(表示させたい説明文)">
<meta name="x:image" content="https://example.com/x-image.jpg(表示させたい画像のURL)">

説明

  • og:url: ページのURL

  • og:type: コンテンツの種類（ここではwebsite）

  • og:title: ページタイトル

  • og:description: ページの説明文

  • og:site_name: サイト名

  • og:image: サムネイル画像のURL

  • og:locale: 言語と地域のコード

  • x:card: Xカードの種類（例: summary_large_image）

  • x:site: Xアカウントのハンドル

  • x:creator: コンテンツの作成者（Xハンドル）

  • x:title: X用タイトル

  • x:description: X用説明文

  • x:image: X用サムネイル画像のURL

これで、X（旧Twitter）にも対応したOGPメタタグが設定できます。

その他に追加を検討すべきポイント

他にも追加すると良い要素があります。
これらはプロジェクトの内容や目的に応じて適宜追加してください。

  1. Google Analytics の追加

ウェブサイトのアクセス解析を行うために、
Google Analytics のトラッキングコードを追加します。
これにより、ユーザーの行動を把握し、サイトの改善に役立てることができます。

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_TRACKING_ID');
</script>
  1. ローカライズ

多言語対応が必要な場合は、<html lang="ja">の部分を適切な言語コードに変更します。

  1. アクセシビリティ

アクセシビリティを考慮して、画像にalt属性を追加したり、
適切なaria属性を設定することも重要です。

以上が、Emmet を使った HTML の雛形とそのカスタマイズ方法についての解説です。
初めての方にもわかりやすく、楽しく学んでいただけたでしょうか？
これで HTML を書く準備はバッチリですね！
どんどん試してみて、自分だけの素敵なウェブページを作ってください！

気軽に コメント(↓) していただければとても嬉しいです！
" ❤️ " や、フォロー、バッジなどもお待ちしています！

Discussion