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

PROGRAMMING

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

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

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

テンプレート集

基本のテンプレート

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

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から記載していきたい人は、こちらをコピペ!

2カラム

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

<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”>

ブラウザ標準のCSSのリセットをするためのコード。

<link rel=”stylesheet” href=”css/style.css”>

スタイルシートの読み込み。この場合だと、「css」というフォルダの、「style.css」というフォルダからスタイルシートを読み込む。

テンプレ化で効率UP

コードを書くことは慣れる上で大事ですが、初期設定などはテンプレ化をすることで、他のコードを書く時間に当てることができます。

自分のスタイルのテンプレを使って、無駄な部分はでテンプレ化していきましょう。

今回は以上です。

コメント