通っている学校が間もなく夏休みに入るということで、より多くのクラスメイトにJavaScriptに接してほしいと考え、教材を作りました。

主にDOM操作に関するものです。

Qiita上の方々にも助けになれば良いなと思って投稿しますが、私自身も初学者なので、間違った日本語の使い方をしている部分などあると思います。
もしあればお気軽に連絡していただけると幸いです。

fizzbuzzについての解説が記載されていませんが、私のクラスの多くはどういうものか知っているため省きました！

<!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">
    <title>DOM操作入門</title>
    <!-- DOM操作の基礎、CSSの基礎を学べます。-->
    <!--css記述はじめ-->
    <style>
        body {
            background-color: rgb(223, 248, 227);
        }
        h1 {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-align: center;
        }
        span {
            font-family: fantasy;
            font-size: larger;
        }
        .fizzbuzz {
            background-color: red;
        }
        .buzz {
            background-color: orange;
        }
        .fizz {
            background-color: rgb(252, 235, 204);
        }   
    </style>
    <!--css記述終わり-->
</head>
<body>
    <h1>Fizz-Buzz</h1>
    <button onClick="displayExplanationOfCSS()">CSSの解説を表示する</button>
    <button onclick="countUp(cnt++)">+</button>
    <!--buttonタグでボタン生成。
        onclick属性（　onclick="")をつけることでボタンとして機能し、関数を呼び出せる。
        押したら関数countUpが実行される。
        押すたびにcntが１増えるように、cnt++としている。-->
    <div id="display">
    <!--divタグは特に表示は変わらないが、ブラウザ上の画面を分割するために使うイメージ。
        div = divided = 「分けられた、分割された」
        (id="")と記述することで、divタグにID（好きな文字や数字）をふることができる。
        idを振ることで、後ほどjavascriptにてidに紐づけたhtmlの操作ができる。-->
    </div>
    <div id="displayOfExplanation">
    </div>
    <script>
        let cnt = 1;
        const countUp = (cnt) => {//関数はletでもいいが、深く考えないでconstを使うのが定例。
            /* アロー関数を用いている。
                const 関数名 = (引数) => {
                    { 処理 }
                }
                function countUp(cnt) {
                    
                }
                に同じ。 */
            let display = document.getElementById("display");
            /*<div id="display">
                この部分にfiz, buzzなどを表示したい。
                親要素としてid="display"のdivタグを変数displayに代入
                document.getElementById=>divタグのIDを取得する関数。
                めちゃくちゃ使うので覚えておくこと。
            </div> */
            let span = document.createElement("span");
            // span要素を作成し、変数名spanに保持。
            //createElement=>新しい要素を作りspanという変数に代入
            let text;//変数
            // displayに表示していくテキストを設定していく。
            if(cnt%15==0){
                text = "fizzbuzz";//textにfizzbuzzを代入。後ほどspanに代入
                span.className = "fizzbuzz";//spanのclassNameをfizzbuzzに設定（<span className="fizzbuzz">という意味。以下同様
            }else if(cnt%5==0){
                text = "buzz";
                span.className = "buzz";
            }else if(cnt%3==0) {
                text = "fizz";
                span.className = "fizz";
            }else{
                text = cnt;//割り切れないときはその数字を表示。
            }
            span.innerText = text + "  ";
            // spanのinnerTextに上で設定したtextを代入。
            //innertext=>タグの文字を操作するときに使う。fizzbuzz処理のtextをspanの文字として代入
            display.appendChild(span);
            //保持していたdisplayに先ほどつくったspanを代入。
            //appendChild=>子供を作る。getelementしていたdisplayの子供を作る。
            //画面上ではappendchildをして初めて、画面のhtmlが書き換わる（追記される）
        }
        const displayExplanationOfCSS = () => {
            let display2 = document.getElementById("displayOfExplanation");
            let p = document.createElement("p");
            let explanation = 
            "CSSの解説\n\n" +
            "headタグ内のstyleタグを作り、それぞれ設定する。\n"+
            "上3つのbody, h1, spanは、HTMLのタグを表す。\n"+
            "クラス名を指定したい場合は.fizbuzzのように.をつける。idの場合は#\n\n"+
            "CSSで以下よく使うプロパティまとめ\n"+
            "background-color : 背景色。redなど色の英語名や#bgrで指定できる。b+g+c+Enterで簡単に入力できるぞ！\n"+
            "text-align : 中央ぞろえ、左揃えなど\n"+
            "font-family : フォントを選べる。特殊なフォントを使いたいならimportしよう\n"+
            "font-size : そのまま字のサイズ。これに限ったことではないが、15などと数字のみ入力すると勝手に単位はpx(ピクセル)として扱われる。\n\n細かいことは作った人に聞いてくれ！"
            p.innerText = explanation;
            display2.appendChild(p);
        }
    </script>
</body>
</html>