「HTMLの勉強を始めたいけどなかなか始められない」
「できれば独学でHTMLを学びたいけど、まずはどうすればいい？」
よし、では、今この瞬間から10分だけやってみましょう！
ということで第3回目です。
個人開発歴20年、大手のウェブ企業で部長を務め、学生時代には情報の教員免許も取得していた僕がわかりやすくお伝えします。
わかりにくいところがあればぜひコメント欄で教えてください！
HTMLはこれから学ぶのにコスパの良い言語です。
こちらの記事も確認してみてください。
前回のふりかえり
前回はHTMLの用語を学びながら入力文字数をカウントするコードを書いてみました。
- プログラムを「コード」と呼ぶ
- HTMLのコードはタグの集まり
- イベントをきっかけに処理が始まる
だんだん用語も使えるようになってきましたね。
そして前回やってみたのはこちらです。
やってみる
「プレビューへ反映」して表示された入力欄に文字を入力すると、文字の数が表示されるというものでした。
今回はHTMLの構造についても触れながら少しずつ深めていきたいと思います。
デザインをいじってみる
前回書いた文字をカウントするコード、
一応動作はするのですがデザインがちょっとヤボったい感じがします。
どうせならもう少しスタイリッシュな感じにできるといいですね。
そこで、デザインをいじってみようと思います。
やりたいことは下記の2点です。
- 入力欄の文字サイズを大きくして見やすくする
- 文字数のカウントを太文字にして見やすくする
さて、コードのどこをいじればいいでしょうか？
第1回をふりかえってみるとこんなコードを書いていました。
第1回で書いていたコード
<span style="color:red">こんにちは</span>
このstyle="color:red"の部分が「こんにちは」の文字色を赤に設定するための記載だったので、
同じような感じで記載すれば文字のサイズを大きくしたり、文字を太字にしたりできそうですね。
実はこのstyle=で始まる部分はCSS（シーエスエス）というプログラミング言語の1つです。
HTMLだけでもある程度の装飾は可能なのですが、細かい装飾を行うためにはCSSを利用するのが一般的です。
ということは、
CSSで文字の大きさを変える方法
がわかれば、入力欄の文字を大きくすることができそうです。
ですが、
CSSで文字サイズを大きくするには・・・
CSSで文字の太さを変えるには・・・
CSSで線の色を変えるには・・・
と1つ1つ覚えていくのは大変です。
そこで、やりたいことだけ明確にしてあとは調べるという方法を取りたいと思います。
CSSでやりたいことを調べる
CSSには公式ページがあるのでそちらを参照してもいいのですが、ちょっとごちゃごちゃしていてとっつきにくいので無難に
ググる
という方法を取りたいと思います（笑）
ググるんかい！
と思われた方もいると思いますが、プログラミングにおいてこのプロセスはとても大事です。
僕もウェブページを作るときに1回もググらずに完成したことは1度もありません。
大事なポイントとしては、
- あとはググればわかる、というところまでは勉強する
- ググれば済むことは記憶する必要ない
ということです。
今回の場合では、
style="【ここに何かを入れると文字サイズが変わるはず。そしてそれはCSSと言うらしい。】"
ということまで絞れています。
そこでこんな風にググってみます。
ポイント
CSS 文字サイズ変更方法
（検索結果である程度答えを出してくれてますが）1番上に出ているSAMURAI ENGINEERのページを開いてみると、
下の方に答えが書いてありました。
font-size: 20px
のように書けばいいようです。
おすすめなのは15px〜20pxということも書いてありますね。
pxは「ピクセル」と読みます。
pxは画面上の長さや大きさの単位で、例えばiPhone14の画面サイズは縦2532px、横1170pxと表されています。
それでは入力欄の文字サイズの変更に戻りましょう。
「やってみる」の前回のコードを直してみます。直す部分はこちらです。
直す部分
<input type="text" onkeyup="count_txt()" id="moji" style="font-size:20px">
わかりやすくするために20pxにしてみました。
上記を「ここにコード」に入力して「プレビューへ反映」してみましょう。
やってみる
文字サイズに合わせて入力欄が大きくなったと思います。
ちなみに、「id」や「style」の並び順はどんな順番でも構いません。
複数の設定値を入れたい場合はどうすればいいの？
という疑問が湧くかもしれません。
複数の設定値を入れる場合には
style="font-size:30px;color:red"
のように「;」セミコロンで区切って繋げていくことができます。
上記では文字のサイズを30pxにし、かつ、文字の色を赤に設定できます。
続けてやりたかったのは「文字数のカウントを太文字にして見やすくする」です。
同じ要領で試してみましょう。
今回いじるべき部分は下記の部分なので↑の「やってみる」で試してみましょう。
直す部分
<span id="kekka"></span>
上記以外にも例えばこんなことができます。
時間がある方は方法を確認して試してみてください。
- 背景の色を変える
- 囲っている線の太さや色を変える
- 囲っている線を角丸にする
- 文字に影をつける
ここまでのまとめ
- HTMLのデザインを整えるにはCSSを利用する
- CSS 「やりたいこと」でググれば実現方法がわかる
まとめ
「今から10分ではじめる」シリーズは朝活などの時間にサクッとやってみることができるような記事を目指していますが、
最終的にはこの記事に載っていないことも含めてどんどん前に進んでいけるよう、伴走するところとみなさんにお任せするところのメリハリをつけようと考えています。
今回はCSSに関してある程度自分で進めるところまできたのではないかと思います。
不明点等がありましたらコメント欄で教えてください👍