【コピペ可】HTMLのひな形（index.html）

2022年6月11日2022年6月15日

HTMLのテンプレート

コーディングをはじめる際に利用できる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">
    <meta name="description" content="ディスクリプション">
    <title>ページタイトル</title>

    <!--ページCSSの読み込み-->
    <link rel="stylesheet" href="./resources/styles/pages/index.css">

    <!--OGP設定-->
    <meta property="og:title" content="タイトル">
    <meta property="og:description" content="ディスクリプション">
    <meta property="og:image" content="画像URL">
    <meta property="og:image:secure_url" content="画像URL">
    <meta property="og:url" content="サイトURL">
    <meta property="og:site_name" content="サイト名">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta name="twitter:title" content="タイトル">
    <meta name="twitter:description" content="ディスクリプション">
    <meta name="twitter:image" content="画像URL">
    <meta name="twitter:card" content="summary">

    <!--favicon設定-->
    <link rel="icon" href="/favicon.ico"><!-- 32×32 -->
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest">

    <!-- モバイルChromeのヘッダー色などで使われるテーマカラー   -->
    <meta name="theme-color" content="#fafafa">
</head>
<body>

</body>
</html>

各種CDN

開発時に使えるCDNを用意しておきました。本番公開時にそのまま利用しない方がよいものもありますので、さくっと開発がはじめる目的で利用してください。

jQueryのCDN

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Alpine.jsのCDN

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

Tailwind CSSのCDN

<script src="https://cdn.tailwindcss.com"></script>

SwiperのCDN

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

smooth-scrollのCDN

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

AOSのCDN

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>