はいどうもこんにちは、双極くんです。
今回は
- コード(code)
- 改行(br)
- プリフォーマット(pre)
について学んで行きましょう！
このブログは以下のテックアカデミー「はじめてのHTML入門講座」を参考に作成しております。
コード(code)、改行(br)、プリフォーマット(pre)について学んでいく
コードcode
まずコードです。
コンピューター用語やプログラム用語といったものを示すタグとしてcodeというタグがあります。
これを使うことでコンピューター用語である、あるいはプログラム用語である、という事を示してあげることが出来ます。
改行br
そして改行です。
HTMLとしてココに改行があるという事を伝えるためにタグを書く必要があります。
それにはbrというタグを使用します。
breake line（改行）の略を利用してbrというタグになっています。
これがある所に改行が入りますので、このタグは開いて閉じる２つセットのものでは無く単独で使う事の出来るタグです。
プリフォーマットpre
最後にプリフォーマットについてですが、これは入力したとおりに表示させるタグです。
これはpreというタグですが、これは実際に見てみる事によって、どのように表示されるのか分かると思います。ですので、具体的にはのちほど見てみましょう。
実際にファイルを使ってやってみる
今回はこのようなファイルを用意してみました。
この内容については特に意味を考える必要はありません。
これを保存してブラウザで開くとこのようになっています。
コードcode
最初のパラグラフ（段落）の中では、コンピューター用語は２つ出てきます。
このようにdrive()とvehicleの２つをcodeタグで囲むことが出来ました。
※分かりづらい場合は写真を拡大してご覧ください。
このようにdrive()とvehicleが少し表示のされ方が変わったのが分かるでしょうか？
改行br
では、続いて改行についてです。
元々HTMLファイルの２つ目のパラグラフ（段落）では……、非常に読みづらくなりますの後に改行がありますが、ブラウザで表示をさせた場合には改行されていません。
このままでは、どんどん長い文章を書いて行った時に見づらくなってしまいますので、ココに改行がありますという事をbrタグで伝えてあげましょう。
では、一度２つ目のパラグラフ（日本語文）をコピーして、１つ増やしておきましょう。
そして、１つめの方にbrタグを配置します。
そして保存して更新します。
すると、このようになりました。
このように、brタグを入れていない二つ目のパラグラフ（日本語文）の方は改行されないまま続いています。
ですが、brタグを入れた一つ目のパラグラフ（日本語文）では改行がしっかりと表現されています。
このようbrタグを入れることで改行をすることが出来るというわけです。
プリフォーマットpre
それに対して、プリフォーマットpreも確認してまいりましょう。
ではbrタグを入れていない二つ目のパラグラフ（日本語文）のpタグの代わりにプリフォーマットのpreタグを入れてみます。
保存して更新します。
すると、このようになりました。
プリフォーマットpreのタグの内側は入力したとおりに表示されます。
ですので、改行タグの入っていない所も改行されていますし、インデントをした部分にはインデントが反映されています。
このように意図的に入力したとおりに表示させたい部分がある場合には、このプリフォーマットpreタグを使ってあげると非常に便利です。
特に長いプログラムを引用したりする時にプリフォーマットpreタグ、あるいはコードcodeタグを利用すると表現として非常に分かりやすくなりますので、ぜひ覚えておきましょう！
まとめ 双極くんの感想
今回は
- code（コード）タグ
- br（改行）タグ
- pre（プリフォーマット）タグ
について学びました。
※動画を見ながらここまで見てくださった方は動画を止めましょう😅
特に、このタグの中でbrタグは前回のpart８から登場していましたね。
ですので、brタグは良く使うものだろうな、と思いました。
それからpreタグについてはどのようなシーンで使うのか実際にやってみたいな、と思いました。
次回は、私もよく使っている箇条書きするHTMLであるリストについて学ぶことができます。しっかり覚えてい行きたいと思います。
学び
それを指に結び、心に書き記せ。
格言7:3
