Bootstrap 4 の「UIちょこっとお試し」用テンプレート

by

HTMLを書いていて、ときどき「あのUIはこんな風にしたらつくれるかな」と考えるときがある。

そんなときはVisual StudioやDreamweaverといった大仰な開発環境でわざわざプロジェクトをつくるまでせずにちょこっとだけコードを書いて試してみたい、なんてことも多い。

そんなときに使えそうなHTMLファイルのテンプレートを自分用につくってみた。

HTMLファイルテンプレート

<!DOCTYPE html>
<html>

<head>
    <title>タイトル</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <style>
        /*ここに必要なCSSスタイルを書く。*/
        .main-container {
            font-size: 40px;
            color: #338833;
        }
    </style>
</head>

<body>

    <!--ここに必要なHTMLを書く。-->
    <div class="main-container">
        てすてす
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <script>
        // ページ表示前に実行するJavaScriptコードをここに書く。

        $(() => {
            // ページ表示直後に実行するJavaScriptコードをここに書く。

            // 例えば、文字「てすてす」がクリックされた場合の処理。
            $('.main-container').on('click', (e) => {
                alert('！！！');
            });
        });
    </script>
</body>

</html>
Post Views: 2,313

コメントする