html の サンプルコード

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

説明も後日書きます。<br>
<ul>
<li>githubにindex.html置いてます。<br><a>https://github.com/redstar-hr/html-template</a>
</li>
</ul>

https://github.com/redstar-hr/html-template

</p>

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

| 項番 | ページ内リンク | 説明 |
|:----:|:-------------|:-------------|
| 1 | [1.はじめに](#1-はじめに) ||
| 2 | [2.用意するもの](#2-用意するもの) ||
| 3 | [3.index.html](#3-サンプルhtml) |サンプルコードhtml|
| 4 | [4.コード解説](#4-コード解説) |以下編集中|
|  | [4.1 head](###4.1head) |head部分　編集中|
|  | [4.2 meta deta](###4.2-メタデータ指定) |meta部分　編集中|
|  | [4.3 body](###4.3body) |body部分　|
|  | [4.4 footer](###4.4footer) |footer部分　|
| 5 | [5. さいごに](#5-最後に) |サンプルコード公開のgithub<br>サンプルコードでの実際のHP|
| 6 | [6. 作成HP紹介](#6-作成HP紹介) |作成HPの紹介|

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



# 2-用意するもの

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

# 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(バージョン) 設定</h2>

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

### 4.1-head

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

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

:::note info
別途記事作成中
↓検索エンジン最適化（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 -->
```
</ul>

### お気に入りアイコン　設定
・favicon　設定<br>
画像生成は省きます
(ご自身でアイコン画像を作って下さい)<br>
qitta 別記事　：<a href="https://qiita.com/redstar-hr/items/6444399ce06282c535a4
">html favicon 設定</a>

https://qiita.com/redstar-hr/items/6444399ce06282c535a4

```
<!-- 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 -->
```
<h3>ホームページ　title設定</h3>
<ul>
<li>HP title
    
```
<title>私のホームページ</title>
```
<li>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="~~~~オフィシャルサイト　ホームページ">
```
<li>/head 閉じ


```
</head>
```
</ul>


### 4.3-body
<ul>
<li>google seo 対策　(google tag)

```
<body>
    <!-- Google Tag Manager (noscript) -->
    google tag
    <!-- End Google Tag Manager (noscript) -->
```
<li>ホームページヘッダー部分<br>

qitta 別記事：<a href="https://qiita.com/redstar-hr/items/f4f0fec6f219f229dfff">imgタグiframeタグ解説記事</a>

</ul>

https://qiita.com/redstar-hr/items/f4f0fec6f219f229dfff

<ul>
<li>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>
```
<li>ヘッダー下のメニュー

```
<!-- ▼メニュー▼ -->
<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>
<!-- ▲ヘッダ▲ -->
```
</ul>

### body メイン部分
<ul>
<li>はじめの挨拶みたいなところ
<li>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>
```
<li>次の本文(プロフィール)

```
<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>
```
<li>次の本文(書きたい内容)

```
<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>
```
<li>次の本文(書きたい内容)

```
<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>
```
<li>更新履歴(記載するのであれば)

```
<h3>更新履歴</h3>
    <dl>
        <dt>2024.04.19</dt>
        <dd>サイト更新</dd>
        <dt>2024.04.14</dt>
        <dd>サイト開設</dd>                
    </dl>
```
<li>コンテンツdiv閉じ
<li>メイン閉じ

```
</div>
</main>
<!-- ▲メイン▲ -->
```
</li>
</ul>
</li>
</ul>

### 4.4-footer
<ul>
<li>sns fab icon アイコンとリンク
<li>コピーライト等

```
<!-- ▼フッタ▼ -->
<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>
<!-- ▲フッタ▲ -->
```
<h3>その他　の部分</h3>
<ul>
<li>ページ上に戻る等　
jsスクリプトコード(あれば　body内に配置した時に他の項目と被らなければどこに書いてもok)

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

<li>/body 閉じ
<li>/html 閉じ

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

</body>
</html>
```
</li>
</ul>
</li>
</ul>

# 5-最後に

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

https://github.com/redstar-hr/html-template/tree/main

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

https://redstar-html-template.netlify.app/

# 6-作成HP紹介

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

https://redstar-hp.netlify.app/

<li>作成中の知人紹介様のHP<br>

(css作成中)</li>

https://mimimi3-reality.netlify.app/index.html