HTMLのスニペットいろいろ

2021.11.12 篠原隆司

HTMLでたまに必要になるよく使うコードを置いてます。

主に自分用です。
どこでも誰でも使えるものもあれば私（の環境）しか使えないものもあります。

スニペットとは「分かっている人が楽をするためのツール」です。
分からない人がコピペするためのものではありません。
コードの意味を理解してご利用ください。

Bootstrap5 & jQuery3.6

ダウンロード（sample-20211112.zip）
下記のファイルをまとめてダウンロードできます。
解凍したら、index.html をブラウザにドラッグ&ドロップしてみてください。

html

<!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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./index.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
  </body>
</html>

css

@charset "utf-8";

javascript

(function(){
    'use strict';

    document.addEventListener('DOMContentLoaded', (event) => {

        console.log('hello!');

    });

    jQuery(function($){

        $('body').append(
            $('<p>')
            .text('javascript sample!')
        );

    });

})();