SukeBlog

プログラマーSukeによるブログ

【HTML/CSS】No.2 よく使用するHTMLタグ

【HTML/CSS】No.2 よく使用するHTMLタグ
この記事は約6分で読めます

タグは全部覚えなきゃダメ?

完璧に覚える必要はありません。
どんなタグがあるかを理解するようにしましょう。
 →どんなタグがあるか少しでも覚えていれば、キーワードで調べることができる!

HTMLを書くコツ

(プログラミング全般に言えるが)「少し書いて、確認」を繰り返すと良いです。

h1~h6タグ

見出しタグ。

【例】
<h1>見出しh1</h1>
<h2>見出しh2</h2>
<h3>見出しh3</h3>
<h4>見出しh4</h4>
<h5>見出しh5</h5>
<h6>見出しh6</h6>

brタグ

改行タグ。

【例】
brタグで改行してみる。<br>
hello<br>
world<br>
<br>
brタグ無しにしてみる。<br>
hello
world
※HTMLでは、通常の改行や、連続した半角スペースは無視されます。

【例】
連続した半角スペースを     入れてみる。<br>
連続した全角スペースを     入れてみる。<br>
インデントも無視されます。

tableタグ

表を作成する。
trタグ、thタグ、tdタグとセットで理解しよう。

【例】
<table border="1">					
    <tr>				
        <th>プログラミング言語</th>			  
        <th>難易度</th>			
    </tr>				
    <tr>				 
        <td>Python</td>			
        <td>優しい</td>			
    </tr>				
    <tr>				
        <td>PHP</td>			
        <td>普通</td>			    
    </tr>				
    <tr>				
        <td>C言語</td>			
        <td>難しい</td>			   
    </tr>				
</table>					

divタグ

HTMLタグをひとまとめにする。

【例】
<h1>divタグの例</h1>
<div>test1</div>

<div>
test2<br>
test2
</div>
これだけだとわかりづらいですが、test1の下が改行されますね。

spanタグ

デザインの微調整に使用される。
 →divタグとspanタグは、cssが使えるようになるとよく使います。

【例】
spanタグを<span>使ってみる</span>テスト。
これだけだと特に変化が無いように見えます。
 →開発者ツールで見てみよう(windowsはF12、macはcommand+option+iキー)

pタグ

段落を表す。

【例】
<p>こんな感じで</p>
<p>改行されます。</p>

aタグ

リンクを作成する。アンカータグとも言う。

【例】
<a href="https://www.yahoo.co.jp/">yahoo</a>で検索してみよう。

olタグ、ulタグ、liタグ

箇条書きを作成する。
olタグは番号付き、ulタグは番号無しリストを作成する。

【例】
<ol>
<li>最初</li>
<li>その次</li>
<li>最後</li>
</ol>

<ul>
<li>最初</li>
<li>その次</li>
<li>最後</li>
</ul>

imgタグ

画像の表示に使用する。

【例】
<img src="https://suke-blog.jp/wp-content/uploads/2020/01/Image-e1527069740429.jpg" width="128" height="128">

hrタグ

水平線を引く。

【例】
test
<hr>
test1

HTMLコメント

htmlファイル内にコメントとしてメモを書いておくことができます。
コメントは、実際には画面に表示されません。

【例】
<!-- ここはコメントとして扱われます
コメント内で改行することも可能です。 -->
<p>テスト</p>