コピペのコピペ！HTML5の基本テンプレート-スケ郎のお話

コピペで使えるHTML5の基本テンプレートを紹介します。

HTML5のテンプレート

もっともシンプルなHTML5のテンプレートです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>
</head>
<body>
    ページの内容
</body>
</html>

以前は、IE8以前のブラウザにも対応するためにhtml5shivなどのライブラリを導入していましたが、IEもかなりシェアが落ち、さらにIE8のような古いバージョンを使用しているユーザーはほぼ居ないため、もう切り捨ててもよいでしょう。

ちなみに、2020年度の調査ではIE8のブラウザシェアは0.56%となっており、ほんの一握りの人しか現状は使用していないことが分かります。

bootstrap5のHTML5テンプレート

HTML5のテンプレートに加えて、bootstrap5のCDNを読み込んだテンプレートです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>ページの内容</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>

reactのHTML5テンプレート

人気のJavaScriptフレームワークであるReactを、CDNから導入するHTML5テンプレートです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>ページの内容</h1>
	<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  </body>
</html>

angularjsのHTML5テンプレート

<!doctype html>
<html ng-app>
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ページタイトル</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

コピペのコピペ！HTML5の基本テンプレート

HTML5のテンプレート

bootstrap5のHTML5テンプレート

reactのHTML5テンプレート

angularjsのHTML5テンプレート

1 件のコメント:

人気の投稿

このブログを検索

Profile

ラベル