【Web制作】最初に入力するHTMLテンプレート【雛形】

Web制作や、コーディングする時に、HTMLの書き始めの文章宣言とか記述するのちょっとめんどくさいって思ったことありませんか？

僕もめんどくさいと思うことが多かったので、テンプレート化したので、使ってください。

初心者の方向けに、内容の解説もしてます。

テンプレート集
1. 基本のテンプレート
2. ２カラム
内容の解説
テンプレ化で効率UP

テンプレート集

基本のテンプレート

いきなり行きましょう。基本のテンプレートです。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <meta name="description" content="ページの抜粋">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>メイントピック</h1>
    <p>メイントピックの内容</p>
  </body>
</html>

0から記載していきたい人は、こちらをコピペ！

２カラム

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <meta name="description" content="サイト名">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <link rel="stylesheet" href="css/style.css">
  <body>
    <!-- ヘッダー -->
    <header>
      header
    </header>

    <div class="main_content">
      <!-- メイン -->
      <div class="main">
       main
      </div>
      <!-- サイドバー -->
      <div class="sidebar">
        sidebar
      </div>
    </div>

    <!-- フッター -->
    <footer>
      <div class="copyright">
        <small>footer</small>
      </div>
    </footer>

  </body>
</html>

CSS

/* 全体のcss*/

header {
  background-color: tomato;
  height: 100px;
}

.main {
  background-color: plum;
  height: 100px;
  width: 100%;
}

.sidebar {
  background-color: aqua;
  height: 100px;
  width: 100%;
}

.main_content {
  display: flex; /* 横並び配置 */
  justify-content: center;
}

footer {
  background-color: lime;
  height: 100px;
}

よく使う2カラムのテンプレートです。

内容の解説

初心者の方向けに内容の解説もしていきます。

<!DOCTYPE html>

これはドキュメントタイプといい、どのバージョンのHTMLかを宣言するものです。これがないとHTMLと認識されないので、必ず記載。

<html lang=”ja”>

lang=language、ja=japaneseの略称。

「この文章は日本語です。」という意味です。

<meta charset=”UTF-8″>

文字化け対策の記述です。

文字化け（もじばけ）とは、コンピュータで文字を表示する際に、正しく表示されない現象のこと。例：「文字化け」が、「 æ–‡å—åŒ–ã ‘ 」や「譁ｭ怜喧縺」と表示されるなど。
https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91