HTML/CSS学習を始めた際に、覚えるべきタグの多さに挫折しそうなりませんか？実際プログラムを組むときに、補助ツールを活用したり、その都度ググりながら組んでいくので１００%マスターする必要はありません。ただ、やっぱり効率を考えると、最低限は覚えてくべきです。
そこで今回はHTML/CSS初心者のための必須タグ一覧を紹介していきます。タグ一つずつの細かな解説というよりは、学習する際、どこに力を入れて覚えていけばよいのかの目安にしてください。それでは行きましょう！
HTML/CSS初心者のためのタグ一覧
HTMLで必須となるタグ一覧
念のため解説しておくと、HTMLが文書の構成を決める要素で、CSSが見た目（スタイル）を構成する要素となります。この記事のテキスト（文字情報）や画像はHTMLで書き込んでいます。見出しの背景色（薄い青）や文字の大きさ・太さはCSSで書き込んでいます。まずはこの点をしっかり押さえるのが、プログラミング初心者にとっては重要ですね。
h1～h5タグ（見出しタグ）
h〇というのは見出しタグとして使われます。よく使うのはh1からh4くらいまでですかね。使い方はいずれも同じですので、難しいことはありません。ただどこで使うかという要所をおさえることは大切です。
divダグ（ブロックで扱うためのタグ）
divも頻出のタグです。div自体が非常に重要な意味を持ち、divを設定したからと言って、大きくどうなるというものではありません。divはブロックのような意味合いがあり「ここからここまでに対して・・・」という形で使います。わかりやすく言えば、<div class=”header”><div class=”left”><div class=”center”><div class=”right”><div class=”footer”>という形でdivを組むと、下記図のようになり、divでくくったブロックごと編集できるといった具合です。
全体を一気に作成するのではなく、ブロックごとやっていけばいい！と思えると少しWEBページ作成が楽になると思います。WEBページを閲覧している時も、どこからどこのブロックになっているんだろう？と想像してみると良いでしょう。
pタグ（段落として使うタグ）
このpタグも頻出です。これは段落を扱うタグとして使います。この記事の文章も基本はpタグで書かれています。普通に文章打ちたいなと考えたらpタグを使うというイメージでよいでしょう。
spanタグ（段落の一部の書式を変えるタグ）
こちらもpタグ同様文章を打ちたいなと考えた際使うタグです。しかし、ちょっと違うのは、pタグは設定すると段落になるため、
<p>こんにちは！</p><p>今日もよろしく</p>
↓上記のタグを出力すると↓
こんにちは！
今日もよろしく
このように2行になります。pタグは段落として扱われるので、改行されてしまいます。しかしこのようにすると、2行にはなりません。
<p>こんにちは！<span>今日もよろしく</span></p>
こうするとspanでくくった「今日もよろしく」に対してだけ書式を適用できます。
こんにちは！今日もよろしく
spanタグは単体で使うことも当然ありますが、pタグの中にspanを入れて文字の一部の書式を変えるというときによく使います。span自体が書式を持っているわけではありませんので、上記のように赤くしたり太くしたりという書式をつけるのは、CSSでの設定となります。
imgタグ（画像を表示させるタグ）
画像を表示させるときに使うのがimgタグ。特段難しいことはありませんが、参照先の設定をしっかりやらないと、画像が表示されなくなります。プログラミング学習を始めた間もないころは、結構このミスが発生すると思います。
画像がうまく表示できないときには2つを考えましょう。1つは参照先の指示の出し方が間違っていないか。もう一つは画像のファイル名が間違っていないか。基本はこの2点でどうにかなるはずです。
aタグ（リンクタグ）
自分のページから外部のページへリンクさせたり、自分の他のページにリンクさせたりする際に使うのがaタグです。aタグは「○○をクリックしたらリンク先に飛ぶ」となるので、「○○」にあたる文字や画像を囲ってあげる形で利用します。
<a href =”https://www.manacal.co.jp/wp”>私のサイトはこちらをクリック</a>
このようにします。すると、「私のサイトはこちらをクリック」をクリックすると、指定したサイトに飛ぶようになります。リンク先アドレスだけ間違えないように注意しましょう。
CSSで必須となるタグ一覧
次はCSSで必須となるタグを紹介します。先述した通りCSSは書式設定が主な用途となります。その点を抑えたうえで確認していきましょう。
font関係タグ（文字の装飾）
fontタグは文字の形を決める「font-family」や文字の大きさを決める「font-size」をよく使います。文字の色は「font-color」と思いきや、「color」だけでOkです。このあたりのルールは慣れていくしかありませんが、WEBページを作成していれば毎回記述するタグなので問題ないでしょう。
初心者が最初にちょっと大変だなと感じるのは「font-family」の中身を覚えなきゃいけないの？ということ。プログラミングで文字の形を決定するのって結構記述がややこしい。でも大丈夫。コピペで問題なしです。このくらいの感覚で勉強していくといいでしょう。
font-family: ‘Avenir’,’Helvetica Neue’,’Helvetica’,’Arial’,’Hiragino Sans’,’ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’；
このような記述なので、コピペの方がいいですよね？(笑)
backgroundタグ（背景の設定）
backgroundも必須のタグです。backgroundもfont同様いろいろな記述があります。
- 背景色＝background-color
- 背景画像=background-image
- 背景画像のサイズ=background-size
- 背景画像の位置=background-position
大まかにこのくらいはよく使うものとしてあります。どれもそう難しくはありませんので、一つずつ記述をしていけば問題ないでしょう。プログラミングはとにかく慣れが必須です。そして大まかなルールや大まかな枠組みが理解できれば大丈夫。そこからは場数を踏んでいきスキルアップという形です。
margin/paddingタグ（間隔を設定する）
プログラミング初心者が最初に躓くのは、
「この微妙に空いてしまった間隔を詰めたい」
というときに対応できないということです。これ恐らく全プログラマーが経験したことがあると思います。その際にmargin/paddingというタグを使うのですが、これまたこの２つの使い分けがわかりにくい。いくら解説ブログをよんでもイマイチつかみきれない。大丈夫。まずは間隔を調整するには、marginとpaddingだよねと理解できればOKです。後は、ひとつずつタグを当ててみて、使い方を理解していきましょう。
繰り返しになりますが、プログラミング初心者の段階で、完全にタグの意味と使い方を理解しなければならないと思わないことです。タグは使いながら覚える。その感覚で行きましょう。
width/heigthタグ（幅や高さの設定）
widthが幅を調整するタグ。heigthが高さを調整するタグ。画像の幅を調整したり、背景の高さを調整したりと、いろいろな個所で必要になります。
ちなみに読み方は、widthはウィズス。heigthはハイト。英語なので明確なカタカナ表現はしにくいのですが、おおよそこのような感じです。
width/heigthはどちらも、px単位が基本ですが、％単位やvh単位など様々なものが登場すると思います。ただプログラミングをやり始めた方であれば、まずはpxと%だけ理解しておけばどうにかなるでしょう。ちなみにこれらの単位は、width/heigthの時だけではなく、font-sizeの時にも使いますし、行間設定の際などにも使いますので、少しずつ使える単位を増やしていくと幅が広がるでしょう。
borderタグ（枠線の設定）
最後にborderタグ。borderは枠線を設定する要素となります。こちらも様々な種類が登場します。基本的な記述方法は、
border : 2px solid #000;
このようになります。border : (太さ) (線の種類) ( 線の色)を順番に書いていきます。このあたりはwordなどで、図形操作やテキストボックス操作をイメージしていただくとわかりやすいと思います。実は、borderに限らないのですが、ワードやエクセルをしっかり使いこなせる方であれば、イメージがリンクする部分って結構あるので、パソコン慣れしている人は、プログラミング学習でもやはり有利になると思います。
>>プログラミングの入り口はHTML/CSSがおすすめな理由
HTML/CSSの中級者となり、案件獲得するには！
ここまでが、プログラミング初心者のためのHTML/CSSタグ一覧となります。当然他にもたくさんありますが、ここで紹介したものに関しては、しっかりと理解をしておいたほうが楽になるでしょう。他のタグはその都度ググりながらで問題ないでしょう。
最後に、プログラミング初心者から中級者にレベルアップし、WEBページ作成の案件獲得をするために必要となる知識を紹介します。
- 「display」レイアウトを決める
- 「flex」レイアウトを決める②
- 「position」配置を自由自在にする
- 「::before、::after」表現力を増やす疑似クラス
- 「transform」動きや変化を加える
このあたりが使いこなせるようになると、案件受注できるレベルになるといえます。逆に言うとこのあたりが出来ないと、案件獲得は難しいですし、今どきのHPを作るのも難しいとなります。
しかし、HTML/CSSプログラミングにおいては、この程度でクリアできるものなのです。タグを100個も200個も覚えるということは必要ありません。主要な20個程度をマスターしておくだけでも、そこそこのページは作れるでしょう。もう少し表現力を加えたいと思えば、その方法ググればOKです。
オリジナルページでいい感じのページが作れれば、モチベーションが上がり継続が出来るでしょう。そのためにもまずは気軽にプログラミング学習をしていくのがお勧めです。