Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

○○作ってみない？Advent Calendar 2023

Day 4
@nattyan_tv

自己紹介がてら「自分を紹介するホームページでも作ってみない？」4日目

Last updated at Posted at 2023-12-03

初手からソースコード

index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>NattyanTV</title>
        <script>
            window.addEventListener("load", (() => {
                const userNameElement = document.querySelector(".user-name");
                if (userNameElement !== null) {
                    userNameElement.innerHTML = "NattyanTV"
                }
                setInterval((() => {
                    document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
                }), 1000);
            }));
        </script>
    </head>
    <body>
        <h1 class="user-name">Loading...</h1>
        <div id="deeply-world">Welcome to 深淵!</div>
        <style>
            body {
                background: #d3d9db;
            }

            .user-name {
                max-width: 80%;
                width: 50rem;
                margin: 0 auto;
                font-family: serif;
            }

            #deeply-world {
                max-width: 80%;
                width: 50rem;
                margin: 0 auto;
                font-family: sans-serif;
            }
        </style>
    </body>
</html>

※これはもう何度も載せてるやつです。

CSSの書き方

セレクタ {
    プロパティ: 値;
}

まずこれが基本です。

セレクタ？

セレクタとは、「どの要素に対してCSSを適応させるか」の範囲みたいなものです。
セレクタには「HTMLタグ」、「ID」、「クラス」を指定することができます。 1

HTMLタグとはdivとかh1とかのことで、IDとは先ほど説明した属性のidのことで、クラスとは属性のclassのことです。

HTMLタグを指定するときはタグだけ、IDで指定するときは#ID名、クラスで指定するときは.クラス名とセレクタに書くことで指定することができます。

body {
    ...
}

.user-name {
    ...
}

#deeply-world {
    ...
}

先ほどの例を参考にするなら、上から順に...

  • body { ... }: bodyタグのエレメントに適応させる
  • .user-name { ... }: クラス名がuser-nameのエレメントに適応させる
  • #deeeply-world { ... }: idがdeeply-worldのエレメントに適応させる

※ エレメント = 要素
「エレメント」とは「要素」のことです。
「<div>Hello, World!</div>」これが1つのdivエレメントです。
「<body> <div>Hello</div> <div>World</div> </body>」これも1つのbodyエレメントです。

すなわち、開始タグと終了タグで囲まれた部分が1つのエレメントです。

プロパティ？

max-widthやwidth、marginやfont-familyといったCSSの設定のことです。
さっき書いてあったCSSだと以下の通りです。

  • background: 背景色
    背景色を自由に変える効果を持つ
  • max-width: エレメントの最大幅
    そのエレメントの最大の幅を決めることができる
  • width: エレメントの幅
    そのエレメントの幅を決めることができる
  • margin: エレメントのマージン（余白） 2
    エレメントの周りの余白を決めることができる
  • font-family: エレメントのフォント
    どのフォントを使うかを選べる

というような感じです。

その内容というのを次の「値」で設定します。

値？

#d3d9dbや80%、50rem、0 auto、serifやsans-serifといったCSSの設定の値のことです。

さっきのプロパティと組み合わせることで、そのプロパティの内容を決めることができます。

  • background: #d3d9db;: 背景色を#d3d9dbに設定する
  • max-width: 80%;: 最大幅を80%に設定する
  • width: 50rem;: 幅を50remに設定する
  • margin: 0 auto;: マージンを上下0、左右を自動で設定する
  • font-family: serif;: フォントをセリフ体に設定する

というような感じです。

さてまぁ%とかremとか出てきましたね。
これらは「単位」と言います。

単位？

%やremといったCSSの設定の単位のことです。
例えばwidth: 50remは、「幅を50remにする」という意味ですが、remとはなんでしょう。

...と、説明するのは大変なので、参考となる記事を貼らせていただきます。

JavaScriptの書き方

window.addEventListener("load", (() => {
    const userNameElement = document.querySelector(".user-name");
    if (userNameElement !== null) {
        userNameElement.innerHTML = "NattyanTV"
    }
    setInterval((() => {
        document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
    }), 1000);
}));

先ほどのscript部で紹介したJavaScriptのコードです。
このコードについて解説していきましょう。

プログラムの基本

まぁこの記事を見てる人がプログラミングを理解してないはずはないので、簡単に説明します。

anyFunction();
anyFunctionWithArg("Hello, World!");

JavaScriptでは、関数を呼び出すときは関数名(引数)という形で呼び出します。

つまり最初のコードである

window.addEventListener("load", (() => {
    ...
}));

では、window.addEventListenerという関数を呼び出しています。
第一引数に"load"、第二引数に(() => { ... })を渡しています。

「それはわかるんだけど(() => { ... })って何？」

これは関数です。
() => { ... }というのは、関数を定義するときの書き方です。3

const callFunction = (arg) => {
    arg();
};

const anyFunction = () => {
    console.log("Hello, World!");
};

callFunction(anyFunction);

は以下と同じ意味になります。

const callFunction = (arg) => {
    arg();
};

callFunction(() => {
    console.log("Hello, World!");
});

つまり、第二引数は関数をまるまる渡しているということです。
あんまり関数を渡すというのは見たことない人もいるかもしれませんが、そういうこともできる言語です。

window.addEventListener 

window.addEventListener("load", (() => {
    ...
}));

これは、ウィンドウに対して「イベント」を設定できる関数です。
ウィンドウというのは、今あなたが見ているこのブラウザの画面のことです。
イベントとは、例えば「クリックされた」とか「スクロールされた」とか「ページが読み込まれた」とかそういうことです。

第一引数には「イベント名」、第二引数には「イベントが発生したときに実行する関数」を渡します。

今回は、"load"というイベント名を渡しています。
これは「ページが読み込まれたとき」に実行する関数を渡しています。

document.querySelector

では次にそのイベント発生時関数の中身を見ていきましょう。

const userNameElement = document.querySelector(".user-name");
if (userNameElement !== null) {
    userNameElement.innerHTML = "NattyanTV"
}
setInterval((() => {
    document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
}), 1000);

最初はconst userNameElement = document.querySelector(".user-name");ですね。

...constの説明もする？

const？

constは「定数」を宣言するときに使います。
JavaScriptにおいて変数を定義する方法は、constとletの2つがあります。4

基本的には下記の方の記事が参考になると思うのでそちらを参考にしてください。

じゃあdocument.querySelectorは？

const userNameElement = document.querySelector(".user-name");

これは、document.querySelectorという関数を呼び出しており、第一引数に".user-name"を渡しています。

document.querySelectorは、ドキュメント（HTML）の中から、セレクタに一致するエレメントを取得する関数です。
お、「セレクタ？　どっかで聞いた覚えが...」となった人は少し上に戻ってください。

セレクタを使って、エレメントを取得し、userNameElementに代入します。

if (userNameElement !== null) { ... } 

if (userNameElement !== null) {
    userNameElement.innerHTML = "NattyanTV"
}

これは、userNameElementの中身をNattyanTVに変更する処理です。
それがuserNameElement.innerHTML = "NattyanTV"です。

しかし、userNameElementはdocument.querySelectorで取得したエレメントで、もしかしたらそのエレメントが存在しないかもしれません。
そこで、if (userNameElement !== null) { ... }という処理をしています。

userNameElementがnullでない場合、つまりuserNameElementが存在する場合は、userNameElement.innerHTML = "NattyanTV"を実行します。

もし存在しないエレメントに対してこんな処理をおこなおうものなら...

setInterval 

setInterval((() => {
    document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
}), 1000);

これは、setIntervalという関数を呼び出しています。
第一引数には、(() => { ... })を渡しています。
第二関数には1000を渡しています。

どのような関数なのかというと、第一引数の関数を第二引数の時間ごとに実行する関数です。いわゆるインターバルですね。

今回であれば、1000ミリ秒(1秒)ごとに、document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");を実行します。

document.getElementById 

document.getElementById("deeply-world")...

さっきのdocument.querySelectorと似たような感じで、ドキュメント（HTML）の中から、IDに一致するエレメントを取得する関数です。
この関数では普通にidを渡すだけでいいので、#はいりません。

insertAdjacentHTML 

document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");

これはエレメントに対して、HTMLを挿入する関数です。
第一引数には、挿入する位置を指定します。
第二引数には、挿入するHTMLを指定します。

今回は、"beforeend"という位置に、"!"というHTMLを挿入しています。
"beforeend"というのは、そのエレメントの最後に挿入するという意味です。

こちらの記事が参考になるかもしれません。

じゃあこのページを実際に開いてみると...？

スクリーンショット 2023-11-27 211953.png
最初はこうなって...

スクリーンショット 2023-11-27 212029.png
次第にはこうなっていきます。

まとめ

4日間にわたって、HTML、CSS、JavaScriptの基本的な書き方を紹介してきました。
これであなたもホームページを作れますね。

というわけで、「自分を紹介するホームページでも作ってみない？」

  1. HTMLタグ、ID、クラスでの指定が基本っていう感じであって、別にそれ以外でも指定はできます。 ↩

  2. マージンとは、エレメントの周りの余白のことです。ちなみに余白にはmarginとpaddingがあります。 ↩

  3. アロー関数と呼ばれるものです。詳しくはこちらを参考にしてください。 ↩

  4. 他にもvarというのがありますが、これはあまり好まれません。varを使っていいのは小学生までだよね～。 ↩

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?