自己紹介

はじめましての人は初めまして。お久しぶりの方はお久しぶりです。
今年もアドベンドカレンダーの季節がやってきて、今年は何を書こうかなと考えていましたが、まぁまずは自己紹介でもしようかなと。
というわけでホームページを作りましょう。（？？？）

そもそもホームページとは？

皆さんがみてるこれです。
ブラウザを開いて、なんか検索したりURLを開いて表示されるページのことです。
つまり今回作るのは、ブラウザで自己紹介が見れるみたいな感じのものです。

材料

ホームページはHTML(HyperText Markup Language)という言語で書かれています。
これは、「ブラウザに対してこんな感じで表示してね～」という指示書みたいなものです。
HTMLファイルをダウンロードしたブラウザ君は、「あーここは太字ね...あーここの文字は色を変えるのね～...」みたいな感じでやって、最終的に私たちに完成形を見せてくれるというわけです。¹
この世には色々な種類のブラウザがありますが、ブラウザの種類によっては表示される内容に違いが出ることがあります。
それは、ブラウザによって指示書の解釈の仕方が違うからです。
まぁよくわからん解説はここまでにしておきます。今回はそこまで重要ではありません。

作り方

まずはフォルダを作りましょう。名前は何でもいいです。
そしたらそこにindex.htmlというファイルを作ります。
index.htmlというのは、ブラウザが最初に見るファイルのことで、とりあえず魔法の呪文として覚えておけば大丈夫です。

そしたらそこに以下の内容を書き込みます。

index.html

こんにちは！

そしたらブラウザで開いてみましょう。
ファイルをご自身が利用しているブラウザで開いてみましょう。
Windowsなら右クリックで「プログラムから開く」ですよ！

そしたらこんな感じになると思います。

今はアドレスバーの左にファイルと書いてあったり、アドレスがfile:///から始まっていると思いますが、これのファイルをサーバーにアップロードして、そのサーバーのアドレスを開いても同じようになります。
つまり実質完成ですね。
...と、終わらせるにはあまりにも自己紹介もしてなければホームページも作れていないのでもう少しちゃんとやりましょう。
ですが、基礎はこれだけです。

HTMLの基礎

HTMLはHyperTextというその名の通り、テキストがあって、それを装飾するようなイメージです。
そのため、普通に文字を書いただけでも文字は表示されます。
しかしそれだけではHTMLであることを何も生かせていませんので、HTMLっぽいものを書いてみましょう。

HTMLではタグと呼ばれるものを使用することで文字を装飾したり色々な機能を付けることができます。

早速ですが というタグを使ってみましょう。

index.html

こんにちは！<br>私の名前はnattyan-tvです！

内容をこのように変更してまたファイルを開いて（もしくは更新して）みましょう。

なんと、改行されました！
というわけで、 とは改行を表すタグです。（改行を現すBReakの略でBRです。）

このようにHTMLでは<タグ名>という形で、なんかよくわからんかっこに囲まれたものをタグと呼びます。

タグ？

タグには、始まり と 終わり があります。

え？

「何あほなこというとんねん、さっきの とかいうやつに始まりとか終わりとかあるんか？」

だって？

しょっぱなから を持ってきた私も悪いのですが、 のように始まりとか終わりではなく、そのタグ単体で機能するものもあります。
これは空要素と呼ばれているらしいですが私も知らなかったので皆さんも知らなくていいです。

では、始まりと終わりがあるタグを見てみましょう。

index.html

<p>こんにちは！<br>私の名前はnattyan-tvです！</p>

今回はというタグを追加しました。
まぁまずは一回ブラウザで開いてみましょうや。

...うーん？
なんか変わった？

Copilotに聞いたらあまりにふざけた回答を返してきたので、AIはまだまだだなぁと思いました（小並感）

というわけで、このというタグは、「段落」を表すタグです。
どこがその「段落」かというと、とに囲われたこんにちは！ 私の名前はnattyan-tvです！の部分です。
ではもう一つ段落を増やしてみましょう。

index.html

<p>こんにちは！<br>私の名前はnattyan-tvです！</p>
<p>ねこちゃんだいすき！！！</p>

お、 を使っていないのになんか改行されてる！
みたいな感じで、とで囲まれた部分は段落となり、一つのまとまり～みたいな感じになります。

タグの種類

で、プログラミングと同じようにタグを覚えていかなければホームページは書けません。
いやまぁ都度調べればいいんだけどさ。

んじゃあそのタグって何種類あるの？って話なんですが、大体100種類近くあるそうです。

こちらに一応全部(?)載っていますが、まぁ多いですよね。
じゃあ「これ全部使うんですか！？」というわけでもなく、覚えておくべきなのは割とそんなに多くはありません。

というわけで覚えておくべきだったり、まぁ使うべきなタグを紹介するの...は明日にしましょう。
前作と同様、1つの記事が長くなってしまうと読みにくいし、普通にネタ切れまっしぐらなのでね。

まとめ

次回、HTMLでまぁなんか覚えておいてもいいかもねぇ～ってタグ編へつづく！

あとねこちゃんはほんとに大好きだよ！！！！

あとがきという名のサンプル

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>

実際にHTMLを解釈して画面描画しているのはブラウザというよりかはレンダラーと呼ばれるものです。ChromeであればBlink、FireFoxであればGeckoなどが使われています。 ↩

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

自己紹介

そもそもホームページとは？

材料

作り方

HTMLの基礎

タグ？

タグの種類

まとめ

あとがきという名のサンプル