HTMLのタグ一覧が欲しい！そのままコピペできるものが欲しいな...。
Webデザイン勉強中だけど、コーディングで挫折中...。
HTMLをわかりやすく教えて欲しい！
などなど、Webデザインの学習を進めていて、コーディングでつまずいている方もいらっしゃいますよね。
今回は、HTMLのタグ一覧をご紹介して、あなたの悩みを解消していきます！
- コピペOKのHTMLのタグ一覧
- HTMLのタグ説明と使い方
- コーディングでつまずいた時の対処方法
【HTMLのタグ一覧】コピペOK！
コピペOKのHTMLのタグ一覧です。
| タグ名称 | 役割（説明） | コード使用方法 |
| pタグ | 段落 | <p>～</p> |
| hタグ | 見出し(大、中、小) | <h2>～</h2> <h3>～</h3> <h4>～</h4> |
| brタグ | 改行 | ～</ br> |
| aタグ | リンク設定 | <a href=”～”>～</a> |
| strongタグ | 文字の強調 | <strong>～</strong> |
| divタグ | 要素のグループ化 | <div align=”center”>～</div> |
| ul/ol/liタグ | 箇条書き（黒丸、番号、箇条書き） | <ul> <li>～</li> </ul> <ol> <li>～</li> </ol> |
| titleタグ | タイトル | <title>～</title> |
| table/tr/th/tdタグ | 表作成 | <table> <tr> <th>～</th> <td>～</td> </tr> <tr> <th>～</th> <td>～</td> </tr> <tr> <th>～</th> <td>～</td> </tr> </table> |
| imgタグ | 画像挿入 | <img src="img/XXX.jpg"alt="画像が表示されない場合の表示名"> |
| コメントアウト | コメントアウト | <!-- ～ --> |
順番に解説していきます！
pタグ
コピペOKのHTMLのタグ一覧「pタグ」をご紹介します。
pタグは、段落ごとのひとまとまりとして認識され、一般的には、<p>の前後には１行分改行が入ります。
<p>この中がひとまとまり</p>
<p>別のひとまとまり</p>
hタグ
コピペOKのHTMLのタグ一覧「hタグ」をご紹介します。
hタグは見出しを表していて、１ー６までの数字は重要度を表しています。
基本的な見出しは、h2から使われることが多いのですが、Wordpressのタイトルはh1で設定されていますね。
<h1>１番重要！</h1>
<h2>２番目に重要！</h2>
<h3>３番目に重要！</h3>
<h4>４番目に重要！</h4>
<h5>５番目に重要！</h5>
<h6>６番目に重要！</h6>
brタグ
コピペOKのHTMLのタグ一覧「brタグ」をご紹介します。
brタグは「改行」するためのタグです。
基本的には、brタグを連続で使用するのは良くないので、＜p＞を使用して１行空けるのがおすすめですね。
改行入れたい最後の文章</ br>
aタグ
コピペOKのHTMLのタグ一覧「aタグ」をご紹介します。
aタグは、テキストや画像にリンクを設定することができます。
「a href=””」の形で使われることが多いですが、省略も可能ですよ。
<a href="https://XXXX.com">ひまわりWeb</a>
strongタグ
コピペOKのHTMLのタグ一覧「strongタグ」をご紹介します。
「strongタグ」は文字を強調することができるタグです。
真ん中だけ<strong>強調</strong>されるよ！
真ん中だけ強調されるよ！
divタグ
コピペOKのHTMLのタグ一覧「divタグ」をご紹介します。
「divタグ」は要素を一括りにするタグで、レイアウトやコンテンツ幅の変更が可能です。
<div align=”center”>文章が中央揃えになるよ</div>
ul/ol/liタグ
コピペOKのHTMLのタグ一覧「ul/ol/liタグ」をご紹介します。
「ulタグ」は、順番のないリスト表示が可能になります。
<ul>
<li>ショートケーキ</li>
<li>チョコレートケーキ</li>
<li>いちごタルト</li>
</ul>
・ショートケーキ
・チョコレートケーキ
・いちごタルト
一方、「olタグ」は、順番のあるリスト表示が可能になります。
<ol>
<li>メイクする</li>
<li>洋服買う</li>
<li>美容院行く</li>
</ol>
1.メイクする
2.洋服買う
3.美容院行く
titleタグ
コピペOKのHTMLのタグ一覧「titleタグ」をご紹介します。
名前の通り、タイトルを表示するためのタグになります。
<title>【HTMLのタグ一覧】</title>
table/tr/th/tdタグ
コピペOKのHTMLのタグ一覧「table/tr/th/tdタグ」をご紹介します。
全て、テーブル作成に関わるタグになります。
<table>
<tr>
<th>なりたい職業</th>
<td>Webデザイナー</td>
</tr>
<tr>
<th>身に付けたいスキル</th>
<td>HTML、photoshop</td>
</tr>
<tr>
<th>将来なりたい自分</th>
<td>自由に稼げて、余裕のあるデザイナー</td>
</tr>
</table>
実際の表示は、以下のイメージですね！
| なりたい職業 | Webデザイナー |
| 身に付けたいスキル | HTML、photoshop |
| 将来なりたい自分 | 自由に稼げて、余裕のあるデザイナー |
imgタグ
コピペOKのHTMLのタグ一覧「imgタグ」をご紹介します。
「imgタグ」は画像を挿入したい時のタグで、実際の画像の格納場所と名称が入りますよ。
<img src="img/XXXX.jpg"alt="画像が表示されない場合の表示名">
コメントアウト
コピペOKのHTMLのタグ一覧「コメントアウト」をご紹介します。
コメントアウトは、実際にブラウザ上には表示させないが、メモとして残しておく場合に使用するものです。
HTMLのタグばかりだと、何が書いてあるかわからなくなるので、必ずメモを残すのがおすすめになります。
<!--
必ずわかりやすいようにメモしましょう。
この部分はブラウザに反映されません！
-->
コーディングでつまずいた時の対処方法
コーディングでつまずいて、調べてもよくわからない時は、「スクールを活用」することがおすすめです。
というのも、悩んで挫折してしまうくらいなら、素直にプロを頼った方が良いからですね。
ちなみに、私が圧倒的におすすめするWebデザインスクールは、「シーライクス（SHElikes）」です。
「プログラミング入門」のコースもありますし、Webデザインでわからないことがあったときに直接先生に質問できる勉強会のようなものもあります。
他にもご紹介できないほど、たくさんのサポートが整っているスクールなので、良かったらこちらの記事も読んでみてくださいね
まとめ
コピペOKのHTMLのタグ一覧をご紹介しました。
最初はコピペで問題ありませんが、徐々に見なくても使いこなせると良いですね。
ちなみに今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行なっています。
シーライクスを無料で見体験できますし、カウンセリングの時間で「あなたの悩み」を質問することも可能です。
「コーディングが難しいけど、どうやって学習したらよい？」、「Webデザインが上達するためのコツを教えて！」などあなたが悩んでいることを質問する機会として、ぜひ、活用してみてくださいね！
シーライクスの無料体験レッスンに関する記事はこちら
