こんにちは、かつコーチです。
僕は現在、プログラミングを学習していて、その学習の中で理解したことを、
毎回テーマを絞ってリアルタイムで発信しています。
今回は、16回目で、ここまである程度HTMLについて紹介してきましたが、
少しマイナーなタグにも触れてみたいと思います。
文章の中で使われることが多いようですが、意識していないと飛んでしまうみたいですね。
実際の現場ではどう使い分けているんだろう。。。
その文章に関するタグの使い方をそれぞれみていきます。
文章に関する様々なタグ
文章はp要素で作成されますが、その中で使えるタグはたくさんあります。
今回は、その中でも以下のものをご紹介します。
- hr
- br
- i
- strong
- small
- blockquote
それぞれみていきます。
hrタグ
「hr」＝「horizontal rule」の略で、水平の罫線の意味です。
文章を書いているときに、見出しをつける程でもないときに使います。
例えば、以下のように使います。
<h1>関東</h1>
<p>関東地方は、日本の地域区分のひとつであり、本州の東部に位置している。首都・東京を擁する関東地方は日本の政治・経済の中心となっており、日本の総人口の3分の1が集中している。</p>
<hr>
<p>東京は、日本の関東平野中央部の東京湾に面する世界最大級のメトロポリスであり、日本の事実上の首都です。</p>
このように文章の合間に罫線が書かれているのが確認できます。
しかし、これをデザインとして使ってはいけません。
デザインはあくまでもCSSで行い、こちらは文章が分けられる際などに使用します。
brタグ
「br」＝「break」を略で、改行を意味します。
こちらは結構使うことが多いかもしれません。
p要素で段落を変えるのではなく、文章の中で改行したいときに使えます。
例えば、以下のように使います。
<h1>関東</h1>
<p>関東地方は、日本の地域区分のひとつであり、本州の東部に位置している。<br>首都・東京を擁する関東地方は日本の政治・経済の中心となっており、日本の総人口の3分の1が集中している。</p>
このように文章の合間が改行されているのが確認できます。
僕も初めてHTMLを学習した時、「br」タグを使っていましたが、
今はなるべくCSSなどで調整できるよう工夫しています。
iタグ
「i」タグは、慣用的なテキスト要素です。
何らかの理由で他のテキストと区別されるテキストの範囲を表します。
言葉が難しいので、簡単にいうと、慣用句、技術用語、分類学上の呼称に使われるということです。
元々は、イタリック体を表現するというところから、頭文字が取られているようですが、
昨今、HTMLでは主に、Font Awsomeを使う時などに使われます。
アイコン表示に使うことが多いです。
むしろそれ以外に見たことがないです。
書き方としては、
<p><i>HTML</i>はHyper Text Markup languageの略です</i>などとします。
Font Awsomeはこちらのサイトになりますが、主に様々なアイコン提供してくれるサービスです。
無料プランから有料までありますが、これを使うことで、テキストだらけの文書から、
視覚的に判断できるのでとても便利です。
Font Awesomeについてはまた別に特集を組みます。
strongタグ
「strong」タグは、文章で強調したいものに対して使います。
strongタグで示したテキストは、太文字になります。
尚、太文字にする為にstrongを使用してはいけません。
あくまでも強調したいものに使用します。
例を紹介します。
<p>東京は、<strong>日本の事実上の首都です</strong>。</p>
このように、strongタグで指定したところが強調されているのが確認できます。
smallタグ
「small」タグは、著作権表記や法的表記するときなどに使用します。
例を紹介します。
<h1>Katsulog</h1>
<p>Welcome to mysite</p>
<hr>
<p><small>当サイトにおける著作権は、katsulogに帰属します。
</small></p>
このように著作権表記などに使用できます。
blockquoteタグ
「blockquote」タグは、引用文を使うときに使用できます。
例を紹介します。
<h1>katsulog</h1>
<p>Welcome to mysite</p>
<p><blockquote>カフェ・オ・レは、フランスで好まれるコーヒーの飲み方。<br>"café カフェ" はコーヒーのことであり、"au オ" は前置詞 "à" +男性型単数形定冠詞 "le" の縮約型であり、"lait レ" は牛乳のことである。 </blockquote></p>
このように少しブロックのような形になっているのが確認できます。
引用文を使う際には、blockquoteタグを使いましょう。
まとめ
以上、文章に関する様々なタグについてご紹介しました。
なかなか使い慣れないかもしれませんが、これらを使いこなすことで、
文章をより綺麗に書けるようになるので、覚えていきたいところです。
プログラミング学習において参考になれば幸いです。
学習の参考になるサイト
今やプログラミングの学習はネットで学ぶことができます。
僕もここから始めています。
ネット上にはたくさんの学習サイトがありますが、おすすめとしては、
この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です！
無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、
有料プランへ変更すれば良いと思います。
有料プランはどちらも月額980円（税込）です。
まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、
こちらからやってみることをおすすめします。
初心者へおすすめの入門書籍（※2020年5月13日追記）
ある程度、動画で学んだら、もっとしっかり学びたくなるもの。
そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。
僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。
それぞれご紹介します。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
まずは、今や鉄板のプログラミングの1冊目の本です。
知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、
最後には1つのサイトを構築するまで網羅しています。
僕は後になって購入しました。
学習していて迷っている時、書籍でも勉強してみるかと思い手に取ると、
「もっと早く手にしておけば良かった。」そう思わせてくれた本です。
難しい内容がなく、3日くらいで一気に読んでしまいました。
勿論、コードを打ちながらですが、楽しくてすぐに終わりました（笑）。
その後も3周くらいして、一通り基礎を学べた本です。
プログラミング学習者で初心者の方には絶対におすすめします！
世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
2冊目のこちらは、もう少し詳細まで書かれてあり、ステップアップされたい方に向いています。
とは言っても、初心者向けですので、無理なく読めます。
知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、
動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。
こちらも最後には1つのサイトを作成するまでを学べます。
