【現役コーダー使用】
index.htmlのテンプレートを配布します。

  • 投稿日
  • 更新日
  • 著者 riki
  • カテゴリー CODE

こんにちは、りきです。
2020年程からweb制作を中心に学習して、ありがたい事に企業さんからお仕事を貰いつつ生活しています。

今回はタイトル通り、実案件でも使用しているindex.htmlのテンプレートを配布します。


毎回headerの中身を書いていると面倒臭いので、自分なりのテンプレートを作っておくと重宝します。


僕のをそのまま使ってもいいですし、自分なりに手を加えながら使いやすいテンプレを作ってみてください。

コードは下記になります。

<!DOCTYPE html>
<html lang="ja">
   <head>
    <meta charset="UTF-8" />
    <!-- メタタグ生成＋検証は右ページ参照（https://metatags.io/）→(https://rakko.tools/tools/9/) -->
    <!-- レスポンシブ -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <!-- 検索非表示、公開前に削除 -->
    <meta name="“robots”" content="“noindex”" />
    <!-- リセットcss -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
    <!-- ファビコン読み込み（https://favicon-generator.mintsu-dev.com/） -->
    <link rel="icon" type="image/png" href="" />
    <!-- Animate.css -->
    <link
      rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <!-- css -->
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <header>ヘッダー</header>
    <main>メイン</main>
    <footer>フッター</footer>

    <!-- jQuery公式CDN -->
    <script
      src="https://code.jquery.com/jquery-3.6.1.min.js"
      integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
      crossorigin="anonymous"
    ></script>
    <!-- JavaScript -->
    <script src="js/script.js"></script>
  </body>
</html>

注意点が少しありまして

  • cssはcssフォルダに”style.css”ファイルを作成
  • JavaScriptはjsフォルダにscript.js””ファイルを作成
  • jQuery,Animate.cssは最新のCDNを公式より確認してください（2022.10月の最新verを使用）

以上です。素晴らしいweb制作ライフを！