第3章コーダー初心者【必見】一人前になるコーディングテクニック~よく使うタグまとめ~

main2

お久しぶりです！寒すぎて布団から出られない毎日を送っていますが、元気です！
前回の投稿から約5ヵ月という衝撃の事実に驚きを隠せません。
予告で何を書こうとしていたのかも完全に忘れていました（笑）

今回はコードの中によく出てくるタグをまとめてみたいと思います。
「これってよく見るけど、いつ使うの？」
「これよく使うけど、どういう意味なの？」
という疑問を解決していきましょう！

文字を装飾する
ページをレイアウトする

文字を装飾する

まずはじめに文字の大きさ・色などを変えられるタグをご紹介します。

b
strong
i
u

主にこのような感じでしょうか？
それでは１つずつどのような効果があるのかを見ていきましょう。

bタグ

太字にしてくれます。
これ以上の説明はありません、というかできません（笑）

実際にbタグを使って文字を太くしてみました。

ご覧の通り、インライン要素のため、文章の中で利用することができます。
文章中の太くしたい文字を<b>で囲むことで、1部分だけ文字が太くなります。

strong

続いて「strong」タグ
こちらもテキストの強調を目的として使います。
strongは日本語で「強い」。そうです、文字を強くしてくれるんです！

ということで実際にstrongにしてみた

~~え、bタグと変わらないじゃん…~~強くなりました！

こちらも当然インライン要素。
強調したい文字を<strong>タグで囲むだけで使うことができます。

i,u

こちらは斜体と下線のためのタグです。

~~ぶっちゃけ見たことない…というか、今タグについて調べてて初めて知った…~~

斜体の文字と下線を引いてくれます。

そして当然のごとくインライン要素。
目的の文字を囲むだけで斜体にしてくれたり、下線を引いてくれたりします。

いかがでしたでしょうか？
文章を作る際に簡単な装飾はできそうですね。
他にも文字の色を変えたり、サイズを変えたり…というためのタグがあったのですが、これはhtml5では廃止されたそう。
htmlでそれを行う方法としてはspanで囲ってstyleで変える…というのが良いでしょうね。

さて、続いてはそれぞれの固まりを定義するタグ。
これは、色々あるのでよく使うものや便利なものからいくつかピックアップしてみましょう。

ページをレイアウトする

そして今回ピックアップしたものがこちら↓

div,span
h1〜h6
ul,ol,li

私がよくつかうものたちをピックアップさせてもらいました。

div,span

これはよく見かけますね。というかこれがないとやっていられません。
前回も登場したdivとspan。
詳しい説明は前の記事を参照してください。

h1〜h6

さて次はサイト上で最も大事な部分を紹介します。
それがhタグで囲まれた部分です。
これは「タイトル」「見出し」を意味しており、ホームページではロゴやページの名前で使われることが多いです。
また、ブログなどのタイトルもhタグで囲まれていることが多いです。
実際このブログでもタイトルはh1、青背景の見出しがh2、少し文字が大きくなっている小見出しがh3と続いています。
重要度がh1,h2,h3,h4,h5,h6とランク付けられており、ブログの記事などでは文字の大きさや装飾で容易に判断することができます。
またhタグは検索でも重要な役割を果たします。どこをh1とするか、検索順位を上げるためにも適切な使い方をすることが大切です。
ソースコードを見て、どこにhタグが使われているか見てみるのも面白いですよ！

ul,ol,li

これは箇条書きのリストや番号付きリストを作成したいときに使います。
この記事でも「目次」や「タグの紹介」にul,liタグを入れています。

「ul」または「ol」と「li」はセットで使います。
「ul」が箇条書き、「ol」が番号順で割り振ってくれ、
中身を「li」で囲みます。
実際のリストがこちら↓

【ulを使ったリスト】

リンゴ
バナナ
オレンジ

【olを使ったリスト】

リンゴ
バナナ
オレンジ

両方共自分で点や数字を入力していません。
自動で割り振ってくれるのです。
「ul」「ol」の直下には「li」タグしか入力することができません。
もし、リンクや画像を入れたいときには「li」の中に入れる必要があります。

その他のタグ

img

これは画像を挿入するためのタグです。
書き方としては

<img src="画像ファイルの場所" alt="画像の説明" width="幅" height="高さ" />

という感じです。
もちろんclassやidを付けてcssでスタイルを当てることも可能です。
imgタグはインライン要素のため、画像を立てに配置したいときにはdisplay:blockでブロック要素にする必要があります。

a

ホームページ制作をする上で欠かせないものの１つであるタグです。
これはリンクを配置するときに使います。
ページの移動はもちろん、同じページの中でのコンテンツの移動もできます。
書き方としては

<a href="リンクの場所">テキスト</a>

まとめ

いかがでしたでしょうか？
今回は私がよく使うものやよく見かけるもの・使いやすいものをピックアップしましたが、調べてみると紹介したもの以外にかなりの数がありました。

また、テキスト装飾の部分で紹介しようと思っていた< font >タグ…これはhtml5では廃止されたみたいです。
webの分野に興味を持ったとき初めて知ったタグが実はこのタグだったので、少し悲しいような寂しいような…。
今となってはテキスト装飾はcssで設定してるので、気になることはないですが（笑）

ホームページ上では今回紹介したもの以外でも様々なタグが使れており、
私自身も見ていたサイトのソースを見て、「へぇー、こんな使い方するんだ」と思うことが多々あります。
気になるサイトのhtmlの作りを覗いてみると意外と面白いですよ（笑）

それでは！