1-はじめに

HP用の index.html サンプルコード
meta name 等をひっくるめたhtml サンプルコードが中々見つからなかったので、記事を作成しました。

説明も後日書きます。

githubにindex.html置いてます。
https://github.com/redstar-hr/html-template

目次

※目次作成に苦戦しているので、仕事の合間を縫って更新します。
※metadetaの詳細を書き忘れていたので、後日更新します。

項番	ページ内リンク	説明
1	1.はじめに
2	2.用意するもの
3	3.index.html	サンプルコードhtml
4	4.コード解説	以下編集中
	4.1 head	head部分　編集中
	4.2 meta deta	meta部分　編集中
	4.3 body	body部分
	4.4 footer	footer部分
5	5. さいごに	サンプルコード公開のgithub サンプルコードでの実際のHP
6	6. 作成HP紹介	作成HPの紹介

更新履歴
2024/07/18　・目次追加/記事内項目の整理
2024/05/30　・項目/詳細修正
2024/04/26　・記事公開

2-用意するもの

index.html
お好みの編集ソフト　※テキストやメモ帳でも可ですが、エディタの方が便利です。
(例：visual studio or visual studio code)

3-サンプルhtml

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<!-- Google tag (gtag.js) -->
google seo 対策
<!-- /Google tag (gtag.js) -->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Google Tag Manager -->
google seo 対策
<!-- End Google Tag Manager -->

<!-- favicon -->
<!-- /favicon -->

<!---タイトル--->
<title>私のホームページ</title>
<meta name="description" content="自営業　Redstarホームページ ITコンサルタント PC納品、サーバー納品、施設内ITインフラ整備・設定PC納品windowsアプリ（アプリケーション開発・継続的な保守）、 ホームページ制作（HTML.css.java等コーディング）、WEBプラットフォーム（予約管理システム）等、VPN、PC修理・データ復旧、等　ゲーミングPC・業務用PC・サーバーPC　納品致します">
<!---/タイトル--->

<!-- X twitter meta -->
<meta name="description" content="　">
<meta property="og:site_name" content="ホームページ">
<meta property="og:title" content="ホームページ top">
<meta property="og:type" content="article">
<meta property="og:url" content="ホームページurl添付">
<meta property="og:image" content="url共有時の表示画像url添付/image/~~~~~~.jpg">
<meta property="og:description" content="~~~~オフィシャルサイト　ホームページ">
<!--/ X twitter meta -->

<!---css--->
<link rel="stylesheet" href="css/style.css">
<!---/css--->

</head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    google tag
    <!-- End Google Tag Manager (noscript) -->
<body>
    <!-- Google Tag Manager (noscript) -->
    google tag
    <!-- End Google Tag Manager (noscript) -->
 <!-- ▼全体の囲み▼ -->
<div id="wrapper">
<!-- ▼ヘッダ▼ -->
<header>
<div class="header_img">
<img src="img/header.jpg" alt="ヘッダー題名">
<div class="header_logo">
<img src="img/logo.svg" alt="ヘッダーlogo題名">
</div>
<!-- ▼メニュー▼ -->
<div id="open">ホームページ内メニュー</div>
<div id="menu">
<nav>
<ul>
    <li><a href="index.html">Top</a>
    <li><a href="profile.html">私のプロフィール</a></li>
    <li><span>リストメニュー</span>
        <ul class="sub-menu">
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
        </ul>
    <li><span>リストメニュー</span>
        <ul class="sub-menu">
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#" target="_blank">リスト内メニュー</a>
            <li><a href="#" target="_blank">リスト内メニュー</a>              
            <li><a href="#">リスト内メニュー</a>
        </ul>
     <li><a href="#">リストメニュー</a>
     <li><a href="#">リストメニュー</a>
</ul>
</nav>
</div>
<!-- ▲メニュー▲ -->
</header>
<!-- ▲ヘッダ▲ -->
<!-- ▼メイン▼ -->
<main>
<div id="contents">

<!--Xツイートボタン-->
<button><a href="HPurl添付 &text=オフィシャルサイト　仮設ホームページ　皆見に来てね &via=X:user ID &related=＠X user ID &hashtags=#X user neme>" target="_blank">ホームページurlシェアXボタン</a></button>
<!--/Xツイートボタン-->

<h3>はじめに</h3>            

<div class="line">
<h3>
当サイトは========の臨時ホームページです。<br>
<br>
サイト内の文章　又は　^^^^^^^の二次利用はご遠慮願います。<br>
<br>
htmlソースコードはフリーです。<br>
<br>
みたいなことを書いたり書かなかったり。<br>
</h3>
</div>
<h2><a href="profile.html">私についてのプロフィール</a></h2>
    サイト内ページ：<a href="profile.html">プロフィール</a><br>

    <div class="dcline">
        <ul>                    
            <li><a href="X url" target="_blank">私のX(twitter)</a></li>
            <li>私のdiscord server　<button><a href="" target="_blank">welcome</a></button></a>
            <li><a href="#" target="_blank">私のyoutube</a>(開設中)</li>
    </div>
<h2><a href="#">私の書きたい内容</a></h2>
    サイト内ページ：<a href="#">私の書きたい内容</a><br>
    <div class="dcline">
        私の書きたい内容 link:<a href="url" target="_blank">私の書きたい内容のlink</a><br>
    </div>

    <div class="textbox">
        <a href="#" target="_blank">###</a>
        <a href="#" target="_blank"><img src="#" title="#" alt="#"></a><br>
    </div>
<h2>title</h2>
    <div class="dcline">                
        <li>title<br>
            外部リンク：<a href="#" target="_blank">title</a></li>
            <img src="#"　alt="#" title="#">
    </div>

    <h2><a href="#">title</a></h2>
        サイト内ページ：<a href="#">title</a>
    <div class="dcline">
        youtube link：<a href="#" target="_blank">sample</a><br>
        ：<a href="#" target="_blank">sample</a>
    </div>

    <div class="textbox">
        <dl>
            <dt>sample</dt>
            <dd>sample</dd>
            <dt>sample</dt>
            <dd>sample</dd>
            <dt>sample</dt>
            <dd>sample</dd>
        </dl>
    </div>

    <h2><a href="link_X.html">title</a></h2>
        サイト内ページ：<a href="#">sample</a>
    <div class="textbox">
        <div class="X-timeline">
        </div>
    </div>

    <h3>その他リンクサイト<h3>
        <div class="dcline">
            <li><a href="link_all.html">全てのリンク(工事中)</a>
            <li><a href="#" target="_blank">google drive(工事中)</a>
            <li><a href="#" target="_blank">amazon(欲しいものリスト)</a>              
            <li><a href="link_etc.html">その他(工事中)</a>
    </div>
<h3>更新履歴</h3>
    <dl>
        <dt>2024.04.19</dt>
        <dd>サイト更新</dd>
        <dt>2024.04.14</dt>
        <dd>サイト開設</dd>                
    </dl>
</div>
</main>
<!-- ▲メイン▲ -->
<!-- ▼フッタ▼ -->
<footer>
    <div class="fab_icon">
        <ul>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://twitter.com/mimimi_kawaii"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-line"></i></a></li>
            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
        </ul>
    </div>

    <div class="footer-inner">
        Copyright (c) <a href="index.html">サンプルHP</a> @since2024 All Rights Reserved.
        <div id="fl">webデザイン<a href="https://redstar-hp.netlify.app/" target="_blank">Redstar_kakino</a></div>
    
    </div>            
</footer>
<!-- ▲フッタ▲ -->
</div>
<!-- ▲全体の囲み▲ -->
    
<!-- ページトップに戻る -->
<a href="#" id="pagetop">▲top</a>

<!-- jquery -->

</body>
</html>

4-コード解説

html　ver(バージョン) 設定

<!DOCTYPE html>
<html lang="ja">

4.1-head

google seo 設定　※必要でなければ不要
お気に入りアイコン　設定　※必要でなければ不要
ホームページ　title設定

google seo 設定　（google tag 登録　・コード追加）

別途記事作成中
↓検索エンジン最適化（SEO）スターターガイド
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja

<head>
<!-- Google tag (gtag.js) -->
google seo 対策
<!-- /Google tag (gtag.js) -->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Google Tag Manager -->
google seo 対策
<!-- End Google Tag Manager -->

お気に入りアイコン　設定

・favicon　設定

画像生成は省きます
(ご自身でアイコン画像を作って下さい)

qitta 別記事　：html favicon 設定

<!-- favicon -->
<meta name="msapplication-square70x70logo" content="favicon/png/site-tile-70x70.png">
<meta name="msapplication-square150x150logo" content="favicon/png/site-tile-150x150.png">
<meta name="msapplication-wide310x150logo" content="favicon/png/site-tile-310x150.png">
<meta name="msapplication-square310x310logo" content="favicon/png/site-tile-310x310.png">
<meta name="msapplication-TileColor" content="#0078d7">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="favicon/png/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/png/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/png/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/png/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/png/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/png/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/png/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/png/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/png/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="36x36" href="favicon/png/android-chrome-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon/png/android-chrome-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="favicon/png/android-chrome-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/png/android-chrome-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon/png/android-chrome-128x128.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon/png/android-chrome-144x144.png">
<link rel="icon" type="image/png" sizes="152x152" href="favicon/png/android-chrome-152x152.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/png/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon/png/android-chrome-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/png/android-chrome-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/png/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="36x36" href="favicon/png/icon-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon/png/icon-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="favicon/png/icon-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/png/icon-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon/png/icon-128x128.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon/png/icon-144x144.png">
<link rel="icon" type="image/png" sizes="152x152" href="favicon/png/icon-152x152.png">
<link rel="icon" type="image/png" sizes="160x160" href="favicon/png/icon-160x160.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/png/icon-192x192.png">
<link rel="icon" type="image/png" sizes="196x196" href="favicon/png/icon-196x196.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon/png/icon-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/png/icon-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/png/icon-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/png/icon-16x16.png">
<link rel="icon" type="image/png" sizes="24x24" href="favicon/png/icon-24x24.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/png/icon-32x32.png">
<link rel="manifest" href="favicon/manifest.json">
<!-- /favicon -->

ホームページ　title設定

HP title

<title>私のホームページ</title>

css指定

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/X(twitter).css">

4.2-メタデータ指定

(検索プラットフォーム表示時の説明文)

<meta name="description" content="　">
<meta property="og:site_name" content="ホームページ">
<meta property="og:title" content="ホームページ top">
<meta property="og:type" content="article">
<meta property="og:url" content="ホームページurl添付">
<meta property="og:image" content="url共有時の表示画像url添付/image/~~~~~~.jpg">
<meta property="og:description" content="~~~~オフィシャルサイト　ホームページ">

/head 閉じ
```
</head>
```

4.3-body

google seo 対策　(google tag)

<body>
    <!-- Google Tag Manager (noscript) -->
    google tag
    <!-- End Google Tag Manager (noscript) -->

ホームページヘッダー部分

qitta 別記事：imgタグiframeタグ解説記事

logo等があれば尚良 (なければ文字のみ)

<!-- ▼全体の囲み▼ -->
<div id="wrapper">
<!-- ▼ヘッダ▼ -->
<header>
<div class="header_img">
<img src="img/header.jpg" alt="ヘッダー題名">
<a>ヘッダー背景画像が無いよ☺</a>
<div class="header_logo">
<img src="img/logo.svg" alt="ヘッダーlogo題名">
<a>ヘッダーロゴ画像が無いよ☺</a>
</div>

ヘッダー下のメニュー

<!-- ▼メニュー▼ -->
<div id="open">ホームページ内メニュー</div>
<div id="menu">
<nav>
<ul>
    <li><a href="index.html">Top</a>
    <li><a href="profile.html">私のプロフィール</a></li>
    <li><span>リストメニュー</span>
        <ul class="sub-menu">
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
        </ul>
    <li><span>リストメニュー</span>
        <ul class="sub-menu">
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#">リスト内メニュー</a>
            <li><a href="#" target="_blank">リスト内メニュー</a>
            <li><a href="#" target="_blank">リスト内メニュー</a>              
            <li><a href="#">リスト内メニュー</a>
        </ul>
     <li><a href="#">リストメニュー</a>
     <li><a href="#">リストメニュー</a>
</ul>
</nav>
</div>
<!-- ▲メニュー▲ -->
</header>
<!-- ▲ヘッダ▲ -->

body メイン部分

はじめの挨拶みたいなところ

Xシェアボタン

<!-- ▼メイン▼ -->
<main>
<div id="contents">

<!--Xツイートボタン-->
<button><a href="HPurl添付 &text=オフィシャルサイト　仮設ホームページ　皆見に来てね &via=X:user ID &related=＠X user ID &hashtags=#X user neme>" target="_blank">ホームページurlシェアXボタン</a></button>
<!--/Xツイートボタン-->

<h3>はじめに</h3>            

<div class="line">
<h3>
当サイトは========の臨時ホームページです。<br>
<br>
サイト内の文章　又は　^^^^^^^の二次利用はご遠慮願います。<br>
<br>
htmlソースコードはフリーです。<br>
<br>
みたいなことを書いたり書かなかったり。<br>
</h3>
</div>

次の本文(プロフィール)

<h2><a href="profile.html">私についてのプロフィール</a></h2>
    サイト内ページ：<a href="profile.html">プロフィール</a><br>

    <div class="dcline">
        <ul>                    
            <li><a href="X url" target="_blank">私のX(twitter)</a></li>
            <li>私のdiscord server　<button><a href="" target="_blank">welcome</a></button></a>
            <li><a href="#" target="_blank">私のyoutube</a>(開設中)</li>
    </div>

次の本文(書きたい内容)

<h2><a href="#">私の書きたい内容</a></h2>
    サイト内ページ：<a href="#">私の書きたい内容</a><br>
    <div class="dcline">
        私の書きたい内容 link:<a href="url" target="_blank">私の書きたい内容のlink</a><br>
    </div>

    <div class="textbox">
        <a href="#" target="_blank">###</a>
        <a href="#" target="_blank"><img src="#" title="#" alt="#"></a><br>
    </div>

次の本文(書きたい内容)

<h2>title</h2>
    <div class="dcline">                
        <li>title<br>
            外部リンク：<a href="#" target="_blank">title</a></li>
            <img src="#"　alt="#" title="#">
    </div>

    <h2><a href="#">title</a></h2>
        サイト内ページ：<a href="#">title</a>
    <div class="dcline">
        youtube link：<a href="#" target="_blank">sample</a><br>
        ：<a href="#" target="_blank">sample</a>
    </div>

    <div class="textbox">
        <dl>
            <dt>sample</dt>
            <dd>sample</dd>
            <dt>sample</dt>
            <dd>sample</dd>
            <dt>sample</dt>
            <dd>sample</dd>
        </dl>
    </div>

    <h2><a href="link_X.html">title</a></h2>
        サイト内ページ：<a href="#">sample</a>
    <div class="textbox">
        <div class="X-timeline">
        </div>
    </div>

    <h3>その他リンクサイト<h3>
        <div class="dcline">
            <li><a href="link_all.html">全てのリンク(工事中)</a>
            <li><a href="#" target="_blank">google drive(工事中)</a>
            <li><a href="#" target="_blank">amazon(欲しいものリスト)</a>              
            <li><a href="link_etc.html">その他(工事中)</a>
    </div>

更新履歴(記載するのであれば)

<h3>更新履歴</h3>
    <dl>
        <dt>2024.04.19</dt>
        <dd>サイト更新</dd>
        <dt>2024.04.14</dt>
        <dd>サイト開設</dd>                
    </dl>

コンテンツdiv閉じ

メイン閉じ

</div>
</main>
<!-- ▲メイン▲ -->

4.4-footer

sns fab icon アイコンとリンク

コピーライト等

<!-- ▼フッタ▼ -->
<footer>
    <div class="fab_icon">
        <ul>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://twitter.com/mimimi_kawaii"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-line"></i></a></li>
            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
        </ul>
    </div>

    <div class="footer-inner">
        Copyright (c) <a href="index.html"私のHP</a> @since2024 All Rights Reserved.
        <div id="fl">webデザイン<a href="https://redstar-hp.netlify.app/" target="_blank">Redstar_kakino</a></div>
    
    </div>            
</footer>
<!-- ▲フッタ▲ -->

その他　の部分

ページ上に戻る等　 jsスクリプトコード(あれば　body内に配置した時に他の項目と被らなければどこに書いてもok)

わかりやすいので下に配置してますが、footerを一番下にしたい場合、動かしてもok。
/body 閉じ

/html 閉じ

</div>
<!-- ▲全体の囲み▲ -->
    
<!-- ページトップに戻る -->
<a href="#" id="pagetop">▲top</a>

</body>
</html>

5-最後に

全て繋げるとhtmlになります。
github 公開

netlify 公開予定(別記事のstyle.cssを使用しています。)

6-作成HP紹介

作成中なのですが自社ホームページ
問い合わせ用のphpが書きかけなので、問い合わせについてはメールアドレス:redstar.hoshir@gmail.comへお願いします。
(https 化した際に再編集予定)

作成中の知人紹介様のHP

(css作成中)