初心者でも知っておきたいhtmlタグ
WEB製作の仕事に就くだけでなく、業種や会社によって、htmlタグを覚えておくと便利な事があります。文字を太字にして強調させたり、色を変えて他の文字と区別させたり。もう少しステップアップすると表の作成などもできるようになります。
WEB関連とは全く関係ない仕事だとしても、最近では会社のBlogや、ワードプレスを使ったサイト構築を行っている場合に、htmlタグ一覧を覚えていると大変役に立つのです。
ネットビジネスには必須スキルの『htmlタグ』とは？
『html(えいちてぃーえむえる)』とは、『Hyper Text Markup Language（ハイパーテキストマークアップランゲージ)』の略称です。とっても長い名前ですね。でも安心してください！こんな長い名前を覚えていなくても、仕事をする上では、全く問題ありません！
簡単に説明すると、インターネットのWEBサイトを構築するための記述言語です。『html』の後ろについている『タグ』は、その『html』を制御する文章です。これに関しては、順を追ってご紹介していきます。
初心者でも分かる！htmlタグ一覧なら「とほほ」へGO！
htmlタグを勉強しようと思っても、初心者の方の場合、何から覚えたらいいのか分かりませんよね。そんな時に絶対役に立ってくれるのが『とほほのWWW入門』です。
この『とほほのWWW入門』では、htmlタグの一覧のみならず、web製作に関する初心者向けの情報が満載。web製作に少しでもかかわる方には、ぜひ一度、見ておいてほしいサイトです。
保存版！抑えておきたいhtmlタグ一覧
それではここからは実際に、使用頻度の高いhtmlタグを抜粋してご紹介していきましょう。先ほどご紹介したサイトや、htmlタグを勉強できる本などを見ていただくとお分かりのように、web製作に使えるhtmlタグというのは、なかなかの種類が存在します。ですが、必ずしもすべてのhtmlタグが必要…というわけではないのです。
使用頻度の高いhtmlタグの一覧
・表
・画像
・色
・リンク
・フォント
・改行
・背景
初心者の方は、まずこの7つのhtmlタグをマスターしましょう。それでも7つもあるの？と驚かれるかもしれませんね。でもこの7つのhtmlタグの中ですら、使用頻度の高いものと低いものがあるのです。そのあたりも含めて、詳しく説明していきましょう。
htmlタグのルール
一部を除き、htmlタグは2個セット
htmlタグというのは、原則、『開始タグ』と『終了タグ』の2個セットです。改行をするための『br』というタグはこれに当てはまりませんが、大半のhtmlタグが、2個セットにする決まりになっています。
例)
○○○
終了タグには必ずタグの前に『/(スラッシュ)』が入ります。
この『開始タグ』と『終了タグ』の間に、文章や画像などを差し込むことで、そのhtmlタグがきちんと表示される仕組みになっています。開始タグのみだけにしてしまうと、そのタグは延々と反映され続けてしまいます。
一部分の文字のフォントを変更しようとして、終了タグを入れ忘れていいることに気づかないでいると、ページの最後まで違うフォントになってしまった…なんてこともよくある話です。
htmlタグは大文字でも小文字でもOK！
色々な記述を見ていると同じタグでも、大文字表記だったり小文字表記だったりしますよね。これに関しては、どちらも正解。htmlタグは大文字でも小文字でも、同じように表示されますので、書きやすいほうを使用するといいでしょう。昔に比べると、今は小文字にされる方が多いようですね。
必ず半角英数を使用する！
ここが一番気をつけてほしい所なのですが、htmlタグは必ず『半角英数』のみしか使用してはいけません。
○→html
×→ｈｔｍｌ
タグを閉じ込めておく『< >』の中に、タグ以外の半角スペースが入ってしまわないよう注意してください。余計なものが入ってしまうと、htmlタグは正しく反映されなくなってしまいます。
×→< html>
×→< html>
○→
ただし『XHTML』というタグの記述の場合は、終了タグを持たない『br』という改行タグの場合のみ『
』と半角スペースが挿入されます。htmlで良い場合は、スペースを入れずに『
』と入力してください。
htmlタグの基本！『改行』をマスターせよ！
普段文章を作成する際、何気なく『enter』キーを叩いている『改行』。先ほどご紹介した基本7項目のhtmlタグ一覧の中でも最も使用頻度が高いhtmlタグです。
改行には2種類ある
改行を表現するhtmlタグには『br』と『p』、2種類のhtmlタグを使用する場合があります。通常、htmlタグで改行と言われると、前者である『br』を使用します。しかし、時折、段落ごとに改行を促される場合もあり、その時は後者である『p』を用いることになります。
二つのhtmlタグの違いを目で見て確かめる
ただ単に改行するのと、段落で改行するのとの見え方がどのように違うのか。実例を見てみましょう！
・
を使用する場合
今日はいい天気なので、みんなでお散歩に行きましょう。
ちびっこ広場の噴水の近くで、休憩をします。
みんなで手を繋いで2列に並んで歩きましょう。
・
を利用する場合
今日はいい天気なので、みんなでお散歩に行きましょう。
ちびっこ広場の噴水の近くで、休憩をします。
みんなで手を繋いで2列に並んで歩きましょう。
指定がない場合の改行は『br』でOK！
タグは色々な属性を追加することが出来る便利なタグです。文字や画像を画面中央に寄せたり、左にしたり…などの表示位置の指定によく使われますが、それ以外にも様々な使い方があります。それに対し
は『改行』のみを行うタグとなります。ちなみに
は『break(改行)』の略です。
htmlタグ一覧の中の2番手『リンク』と『画像』の挿入
画像とリンクの挿入も、使用頻度の高いタグなので、ぜひ覚えておきましょう。
・画像を挿入する場合
・リンクを貼る場合
URLを案内する文章を入れる
画像挿入の『img』は終了タグがない
htmlタグ一覧の中で画像の挿入のタグも改行タグ『br』と同じく終了タグがありません。単体で処理を実行するhtmlタグです。改行タグと違うところは、に続けて指定を入れると、ファイルの名前を入力したり、画像のサイズを任意の物に変更したりなどが可能な点です。
『img』タグに関する覚えておきたい属性一覧
・ファイル名を指定する※1
・画像のサイズを任意のサイズに指定する※2
※1
ファイル名を指定するのは、視覚に障害をお持ちの方のために、パソコンがどのような画像であるかを読み上げてくれる時などに、有効です。
※2
この場合、横(width)100×縦(height)100サイズの画像を表示します。サイズの単位は『ピクセル』または『パーセンテージ』で指定が可能です。
『a』タグに関する覚えておきたい属性一覧
リンクタグ『a』の属性には、クリックするとそのままの画面でリンク先を開くのか、新しいタブを開くのかなど、リンクの行き先を指定するものが一番よく使われます。
・そのままの画面でリンクを開く
リンク先の名前など
・同じページ内でリンクを貼る場合※3
ページの先頭へ
※3
同一ページ、同一ファイル内で移動させる場合は、移動させたい先に指定をしておく必要があります。
文字だって自由自在！『フォント』に関する覚えておきたいタグ一覧
文字の修正もhtmlタグから指定をすることが可能です。強調させたい文字などは、そこだけフォントを変更してみたり、文字の色を変える、太字にしてみる…などが可能です。
文字装飾するためのhtmlタグの基本一覧
○○○で指定していきます。
・フォントサイズを変更したい場合
大きさ3の文字として表示されます
今見ているサイズより2段階大きく表示されます
上のと下のとの違いは、そのサイトを見ている人の環境によって変更させるかさせないかが大きな違いです。
・フォントの色を赤くしたい
文字が赤くなります
・違うフォントにしたい※4
指定したフォントで表示されます
※4
どんなフォントでも指定することは可能ですが、その画面を見る人がそのフォントを持っていなければ、そのフォントでは表示されません。文字化けなどの可能性もありますので、やりすぎないよう注意しましょう。
これらはすべて組み合わせることも可能です。
例)
3段階小さな青い文字で表示
使用頻度は少し少ない？背景を指定するタグ一覧
初心者の方にぜひ覚えてもらいたいhtmlタグ一覧の中で、恐らく一番使用頻度が低いと思われるのがこの『背景』に関するタグです。なぜ使用頻度が他の物より少ないかというと、１つのhtmlファイルの中で、大抵の場合冒頭で指定をしてしまったら、そのあとは出てこないからです。
背景(壁紙)を指定するなら『body』へ
使用例)
『body』タグは、そのファイルを構成するhtmlタグが、ここからここまでですと指定するためにあります。何も指定しない場合は、
……と表記します。背景画像に関する属性一覧
・背景画像を固定する
見ている人が画面をスクロールしても、背景画像だけそのまま動かないように固定することが出来ます。
htmlで使用できる背景に関するタグはこれ1つのみです。過去には同じ画像を縦や横、同じ一定方向に繰り返して並べたり、1枚だけ画像を表示されるなども指定が可能でしたが、現在はそれらのhtmlタグは廃止され、CCS(スタイルシート)と呼ばれる方法でのみ、指定することが可能となっています。
初心者の最難関！『表』を形成するタグ一覧！
これが表を形成する一番外側の部分を指定するhtmlタグです。
この中に
【tr】……Table Rowの略。横方向1行分の指定をする。
【th】……Table Headerの略。表の見出しとなる部分を指定する。
【td】……Table Dataの略。表のセルを作成する。
最難関だからこそ、逃げ道がある
表を作成するためのタグや属性一覧を見ていただいても、きっとさっぱり意味が分からない事でしょう。実際に、『表の横幅600ピクセル、2列2行』という表を構成するタグを書いてみましょう。
| 1列目・1行目 | 1列目・2行目 |
| 2列目-1行目 | 2列目-2行目 |
救世主を使いこなしてトレーニング！
慣れてしまえば、さほど難しくはないのですが、やはり初心者には表作成は少々敷居が高いもの。そこで、慣れるまでは作りたい表の形式を指定するだけで、htmlタグを作成してくれるサイトが存在するのです。これを使って、ひたすらトレーニングです！
まとめ
htmlタグは、最初の第一歩さえ踏み込んでしまえば、どんどん楽しくなる世界です。最初の敷居が高いのが難点ですが、今回ご紹介した中に登場した便利なサイトを駆使すれば、基本的なタグぐらいするっと覚えられるはず！頑張ってくださいね！
