【コピペOK】HTML書き出しテンプレ ※JavaScriptもカバー

2022年9月26日

よーし、今日もコーディングするぞー！

あれ？HTMLの書き出しってどんなのだっけ？合ってるか不安だなぁ。。。

コーディングをしていてそんな風に思うことはないでしょうか？

僕はコーディングの練習をやり始めた頃、いつもこんな感じでした。笑

記憶だけで進めちゃうと、「タイトルが抜けた」「ディスクリプションがない」「head内にリンク付けてない」なんてことはよくあります。

そこで本記事では、コーディングの練習をし始めた方に向けて、HTMLの書き出しテンプレートを用意しました。

ぜひコピペして活用してみてください。

JavaScript（jQueryや各種プラグイン）を使用するバージョンもあわせて記載したので良ければ参考にしてみてください。

※コードは2022年6月現在使用可能のものです。

【コピペOK】HTML書き出しテンプレ

HTML通常バージョン(JavaScriptなし)

とりあえず今はHTMLとCSSが使えればいいよー

という人向けに、こちらはHTMLの通常バージョンです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="ディスクリプションを入力">
    <link rel="icon" href="〇〇〇.png">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>タイトルを入力</title>
     </head>
  <body>
    <header>

    </header>

    <footer>

    </footer>
  </body>
</html>

ポイントとしては、主に<link>タグの部分です。

<link rel=”icon” href=”〇〇〇.png”>

これはファビコンの設定です。

ん？ファビコンって何？？

ファビコンは、ブラウザの一番上のWebサイト名の横にある画像のことですね。

例えばこのブログだと、青丸に福って書いてある画像のことです。

これがあるだけでも、Webサイトに独自性が出るので設定するようにしましょう。

なるほど！たしかブックマークした時の画像もこれが採用されるんだよね！

そうです^^

なのでぜひイイ感じの画像を採用してみてください！

そして、もう一点のポイントはこちら。

<link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css” />

うーん、なんだろこれ？よく分からないぞ

これはリセットCSSと呼ばれるものです。

本来HTMLには、独自のCSS設定があり、意図しないところで余白が適用されたりしてしまいます。

それをリセットして、一度まっさらにするのがリセットCSSです。

リセットCSSはいろいろな種類があり、ググってみて自分が使いやすそうなものを使用すればOK！

とりあえず何でもいいよという人は、今回のコードをコピペしてもらえれば大丈夫です！

HTML+JavaScript(jQuery)バージョン

続いてこちらは、jQueryを使用するバージョンです。

基本的には先ほどの内容と変わりませんが、</body>閉じタグの直前にjQueryを読み込むためのコードと、JavaScriptファイルを読み込むためのコードを記入しました。

jQueryも使うよ。という方はこちらのコードをコピペして使用してみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="ディスクリプションを入力">
    <link rel="icon" href="〇〇〇.png">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>タイトルを入力</title>
  </head>
  <body>
    <header>

    </header>

    <footer>

    </footer>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

これだけでjQueryが使えちゃうの便利だね。

HTML+JavaScript(jQuery、他プラグイン「Slick」「Inview」)バージョン

最後は、その他のプラグインとして「Slick」や「Inview」を使用する場合について記載しました。

僕がコーディングする際に、Slickでスライドショーを実装したり、Inviewでふわっと表示させたりすることが多いので、いつもテンプレとして先に書いています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="ディスクリプションを入力">
    <link rel="icon" href="〇〇〇.png">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>タイトルを入力</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  </head>
  <body>
    <header>

    </header>

    <footer>

    </footer>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="js/jquery.inview.min.js"></script>    
    <script src="script.js"></script>
  </body>
</html>

このふたつはとても便利な機能なので、ぜひ使ってみてください。

これらの使い方については、また別記事として執筆したいと思います！