初手からソースコード
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>
※これは1日目の最後に適当に載せたコードです。
今日は何〜
実際にコードを解説しながら、HTMLの簡単な構造について理解してみましょう。
前提知識
<html></html>については前回の記事をご覧くださいませ。
head部
meta
<meta charset="utf-8">
これは前回記述したとおりでしょうか、文字コードをUTF-8に設定するってだけです。
title
<title>NattyanTV</title>
こちらも前回記載させていただいた、ページのタイトル設定です。
このページにおけるタイトルを設定します。
script
<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>
でましたわね！ JavaScriptです！
説明については、次回の記事に回したいと思います。
body部
h1
<h1 class="user-name">Loading...</h1>
こちらは見出しですね。
一番大きいサイズの見出しで「Loading...」って表示しています。
class="user-name"っていうのがあると思いますが、これは「属性」と言います。
<h1 属性名="要素">みたいな感じで書くことができる、そのタグに対する追加情報みたいなものです。
そうですね、metaの時にあったものに似てますね。
今回のh1は、classをuser-nameにしていますね。
classという属性はその名の通り「クラス」属性を設定します。
クラスというのは後で使用しますので覚えておきましょう。
div
<div id="deeply-world">Welcome to 深淵!</div>
これはdiv要素で、段落を追加します。
今回のdivは、idをdeeply-worldにして、「Welcome to 深淵!」と表示しています。
id属性はその名の通り「ID」属性を設定します。
こちらも後で使用しますので覚えておきましょう。
style
<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>
ﾃﾞﾏｽﾀ-!
CSSです。ちなみにCSSは「カスケードスタイルシート」の略です。
CSSについても次回の記事で解説します。
まとめ
今回はHTMLについて簡単に説明させていただきました。
では次はJavaScript、CSSについて触れていきます。
もうすぐ終わりますよ！