「HTMLの勉強を始めたいけどなかなか始められない」
「できれば独学でHTMLを学びたいけど、まずはどうすればいい？」
よし、では、今この瞬間から10分だけやってみましょう！
ということで第2回目です。
個人開発歴20年、大手のウェブ企業で部長を務め、学生時代には情報の教員免許も取得していた僕がわかりやすくお伝えします。
わかりにくいところがあればぜひコメント欄で教えてください！
HTMLはこれから学ぶのにコスパの良い言語です。
こちらの記事も確認してみてください。
前回のふりかえり
前回はとにかくやってみるということでHTMLを実際に書いてみて動きを確認してみました。
ボタンを押すと文字の色が変わる、という簡単なプログラムです。
前回を思い出すために「プレビューへ反映」ボタンを押してみたください。
今回も「やってみる」を使い、実際にプログラムを書きながら進んでいこうと思います。
やってみる
- 赤い文字で「こんにちは」
- 「青にする」ボタンが表示される
- ボタンを押すと「こんにちは」が青くなる
以上が確認できたかと思います。
HTMLの決まりごと
今回はHTMLの決まりごとについて少し触れたいと思います。
プログラム？コード？
はじめに言葉の定義をしておこうと思います。
前回までは「プログラムを書きましょう」という言い方をしてきました。
でも、プログラミングを行うときはよく
「今日中にコード完成させるぜ！」
「君のコード、綺麗だね！」
といった感じで「コード」という言葉を使います。「ソースコード」とも言います。
人間が書くのがコード、コンピュータが理解するのがプログラムという分け方もあるので、人が書くのは「コード」と呼ぶ方が一般的です。
ということでここから僕たちが書いていくものは「コード」と呼ぶことにします。
ここまでのまとめ
- これから書くものは「コード」
HTMLのコードは「タグ」の集まり
そして、HTMLにおけるコードは「タグ」の集まりです。
洋服を買った時についたり、空港で荷物を預けるとついてくるタグ、つまり荷札のことです。
荷札はものに印をつけるために取り付けますよね。
HTMLでは<>で囲まれたものをタグと呼びます。
前回のコードを見てみると（早速コードと言い始めましたw）、
<span style="color:red">こんにちは</span>
こんなコードが登場しました。
このコードの中で
<span style="color:red"></span>
この部分がタグです。
「こんにちは」という文字に対して「文字を赤くする」というタグをつけていたんですね。
タグは他にも出てきました。
<button onclick="to_blue()">青にする</button>
これは「青にする」という文字を<button></button>というタグで囲っています。
<button></button>のタグは「ボタンタグ」と呼ばれ、囲んだものをボタンにすることができます。
「じゃあ<span></span>って何？」
<span></span>は「スパンタグ」と呼ばれ、囲んだものに指定の設定をするものです。
指定の設定とは、前回の場合は「文字を赤くする」でした。
<button></button>にはそれ自体に囲むとボタンにするという効果がありますが、<span></span>にはそれ自体には何の効果もありません。
そういえば前回、
<span>こんにちは</span>
とやってみたけどプレビューは何も変わらなかった、というのをやりました。
これは<span></span>自体には何も効果がないためそのような結果になった、というわけでした。
ということは、HTMLを勉強するにはタグの種類をたくさん暗記しなければいけないの？
と不安になるかもしれません。
これに対する答えは、
数種類は覚えておく必要がある。
その他は覚えておいた方が便利だけど、必ずしも暗記は不要。
ということになります。
これはプログラミング全般に言えることですが、ググれば何でも出てくるので、何でもかんでも記憶する必要はないです。
ここまでのまとめ
- HTMLはタグの集まり
- タグは数種類覚えればOK
タグを使ってみる
ここまで長々と説明ばかりだったのでここからは実際にやってみましょう。
よく使うタグにinputタグというものがあります。
名前の通り、値の入力を促す時に使うタグです。
では、inputタグを入力してみましょう。
<input type="text"></input>
やってみる
「プレビューへ反映」ボタンを押すと、文字を入力できる箱が出てきたと思います。
type = "text"
という部分はどんな種類の入力を受け付けるかを指定しています。
ここで指定した「text」とは文字であれば何でもいいよ、という指定です。
プログラミング用語ではこれを「文字列」と言います。
text = テキスト = 文字列 = いろんな文字の集まり
ここからは「文字列」という言葉も使っていこうと思います。
さて、文字列の入力欄ができただけだとつまらないので、入力した文字の数を数える処理を追加してみましょう。
入力するコードは下記の通りです。
<input type="text" onkeyup="count_txt()" id="moji">
<span id="kekka"></span>
<script>
function count_txt(){
document.getElementById("kekka").innerText = document.getElementById("moji").value.length;
}
</script>
上記のコードを「ここにコード」に入力して「プレビューへ反映」を押してみましょう。
やってみる
文字を入力するボックスが1つ表示されたと思いますので、このボックスに何か文字を入力してみましょう。
下の動画のように、文字を入力するたびにボックスの横の数字が変化したはずです。
コードの説明
それではコードの説明をしたいと思います。
今回のコードも前回同様、3つのパートに別れていました。
- 「moji」というIDの文字入力ボックスがonkeyupしたらcount_txt()を実行
- 「kekka」というIDの要素を配置
- count_txt()の処理とは、「moji」に入力された値の数を、「kekka」に反映する
実はこのコードは実際のWebサービス作りでもよく使います。
例えば、
入力は10文字以内です
といった入力を促す時、10文字を超えたら「もっと短くしてください」というメッセージを表示するような場合です。
参考までに、この処理をする場合のコードをこの記事の1番最後に記載しますので興味がある方はご覧ください。
さて、まずは1つ目の部分から見ていきましょう。
<input type="text" onkeyup="count_txt()" id="moji">
「input」というタグによって「text」の入力欄を配置しているところまでは良いと思います。
また、id="moji" という部分はこの入力欄を「moji」というIDで指定する、という記載です。ここも良いかと思います。
問題は、
onkeyup="count_txt()"
この部分ですね。
前回、ボタンで処理を行うコードを書いたときは、
<button onclick="to_blue()">青くするボタン<button>
というように、「onclick」という記載をしていました。
今回は「onkeyup」という記載です。
「on◯◯◯」
というのは、処理を行うきっかけを定義するものです。
プログラミング用語では「イベント」という言い方をします。
今回登場した「onkeyupイベント」です。
onkeyupイベントは、キーボードのキーが持ち上がった時に発生します。
「moji」に文字列が入力されるたびに入力された文字列の長さを確認したいため、
入力で使うキーボードが持ち上がった直後に処理を実行しようとしています。
そして実際に実行する処理は「countup_txt()」を指定しています。
じゃあcoutup_txt()ってどんな処理？
という部分がコードの3つ目の部分です。
<script>
function count_txt(){
document.getElementById("kekka").innerText = document.getElementById("moji").value.length;
}
</script>
少し分解してみてみましょう。
まず、「script（スクリプト）タグ」とそれに続く部分は
「count_txt()」という処理とは？
という宣言の部分です。
続いて、下図の緑色の部分は「kekka」というIDを持つ部分に何かを入れます、と宣言しています。
「kekka」は2の部分で宣言されていますね。
何を入れるかというと、下図の水色の部分
「moji」というIDが付いた入力欄に入力された文字列の長さ、です。
まとめ
今回はHTMLタグについてもお伝えしながらコードを書いてみました。
説明を省略している部分がまだまだあるので、少しずつやってみながら補足していこうと思います。
毎回10分でも、バッチリ理解できるように進めていくので気になったところがあればコメント欄で教えてください。
おまけ
今回の例で出てきたリアルタイム文字カウントですが、11文字以上になると文字色が赤くなり、注意が出るコードを下記に記載します。
今後、このくらいのコードはすぐに書けるようになりますよ！
やってみる