LoginSignup
1
1
@redstar-hr(Redstar HR)

html の サンプルコード

Last updated at Posted at 2024-04-25

1-はじめに

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

説明も後日書きます。

目次

※目次作成に苦戦しているので、仕事の合間を縫って更新します。
※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作成中)

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1