2018年06月14日
初心者用! これだけは押さえておきたいHTMLタグ
本稿ではHTMLの基礎を解説する。初心者の方にもこれだけは押さえておいていただきたいと思う、学習必須のHTMLタグだ。これさえ覚えておけば、例えば自分が持つサイトの修正なんかも容易にできる。
目次
<p>タグ
「Paragraph」の略で、段落を意味する。段落を指定するためのタグ。
※一般的には、改行しつつスペースも開くイメージ。
■使用例
<p>文章をここに記述します。</p>
<p>文章をここに記述します。</p>
↓
■表示例
文章をここに記述します。
文章をここに記述します。
<br>タグ
「Break」の略で、改行を意味する。段落を分けるほどではないが、視覚的に改行したほうが読みやすいと思われる場合はbrで改行しよう。
■使用例
<p>文章をここに記述します。<br>文章をここに記述します。</p>
<p>文章をここに記述します。<br>文章をここに記述します。</p>
↓
■表示例
文章をここに記述します。
文章をここに記述します。
文章をここに記述します。
文章をここに記述します。
<h3>、<h4>、<h5>タグ
「Heading」の略で、見出しを意味する。文章の見出しを表すタグ。
■使用例
<h4>見出しをここに記述します</h4>
↓
■表示例
見出しをここに記述します
<strong>、<b>タグ
strongタグは、重要な文章を指定するときに使用する。
bタグは、単に文字に装飾を加えたいだけのときに使用する。
※一般的には、どちらも太字になる。
■使用例
<strong>非常に重要な文章</strong>をここに記述します。
<b>非常に重要な文章</b>をここに記述します。
↓
■表示例
非常に重要な文章をここに記述します。
非常に重要な文章をここに記述します。
<span>タグ(スタイリング)
文字の色を変更する際に使用する。色は「red」「blue」「green」「#fff000」のように指定する。
■使用例
<span style="color:red;">非常に重要な文章</span>をここに記述します。
<span style="color:#fff000;">非常に重要な文章</span>をここに記述します。
↓
■表示例
非常に重要な文章をここに記述します。
非常に重要な文章をここに記述します。
<a>タグ
クリックするとページが移動する、ハイパーリンクを指定する際に使用する。targetを「_blank」と指定したら、クリック時に別タブで開く。
■使用例
<a href="https://www.google.co.jp/#gws_rd=ssl">Google検索</a>はこちら
<a href="https://www.google.co.jp/#gws_rd=ssl" target="_blank">Google検索</a>はこちら
↓
■表示例
Google検索はこちら
Google検索はこちら(別タブで開く)
<img>タグ
画像を表示するときに使用する。「src」とはsourceの略で転送元という意味。
■使用例
<img src="画像のURL(画像パス)" alt="画像の説明">
↓
■表示例