htmlのテンプレートを作ってみた

2022年5月20日 15:24

すぐに使えるhtmlのテンプレートを作ってみました。
これをコピペして編集していけば、手間が省けて少し楽になります。
よろしければご自由にお使いください(^-^)v

コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- site meta data -->
  <meta charset="utf-8">
  <title>page title</title>
  <meta name="description" content="ページ概要を入力">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.io">

  <!-- css -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <div class="wraper">
    <!-- header -->
    <header>
      <a href="#"><img src="#" alt="logo"></a>
      <h1>page header</h1>
    </header>
    <nav class="main-nav">
      <ul>
        <li>manu-01</li>
        <li>manu-02</li>
        <li>manu-03</li>
      </ul>
    </nav>
    <!-- /header -->

    <!-- main -->
    <article>
      <section>
        <h2>contents header</h2>
        <p>main contents</p>
      </section>
    </article>
    <!-- /main -->

    <!-- footer -->
    <footer>footer</footer>
    <!-- /footer -->
  </div>
</body>
</html>

コードの覚え書き

◆メタ要素◆
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ーレスポンシブページに必要な画面設定。
ーざっくり説明すると「画面サイズは見てる端末にあわせるよ！」ということ。

◆外部リンク◆
<link rel="icon" href="favicon.io">
ーファビコン（タイトルタブの左側にあるやつ）の読み込み
ー自分で作る必要がある

◆<body>内のタグたち◆
<header></header>や<nav></nav>など、きちんと適切な用途と配置で使用すると、検索ロボが優良サイトだと判断しやすい。
大事なタグたち。

この記事が気に入ったらサポートをしてみませんか？