CamaradeCamarade
2015/03/02

ブログでよく使われる基本のHTMLタグ8選

この記事は約4分で読めます。

ブログでよく使われる基本のHTMLタグ8選

初級カスタマイズ

ブログを始めたい方や、会社から突然web担当に任命されてしまった方、
ホームページがどのように作られているか分からない!
そんな気持ちを抱いている方はまず、「HTML」の基本を押さえておきましょう。

HTMLタグって?

webページはこの「HTML」という言語で構成されています。
HTMLは
<p>こんにちわ</p>といった <カッコ>○○</カッコ>の半角英数字の命令文でできています。
基本は英語なので、数字が苦手な方でも安心して下さい!
この<カッコ>の命令文(タグといいます)がブラウザに指令を出していると考えて下さい。

ブログではタグを使わなくても「太字」など設定することができますが、思わぬ所でレイアウトが崩れたりする事があります。
そんな時にタグを知っていると思うようにカスタマイズする事ができます。
ブログでは「HTML編集」など、入力するモードを切り替えるとタグを使う事ができます。

今回は初心者のあなたにまず押さえておくべきタグをご紹介します。

1.<p>

英語のparagraph(段落)の事です。

 

■使用例

<p>ここで一つの段落です</p>

<p>次の文章がここに入ります。</p>


ここで一つの段落です


次の文章がここに入ります。


2.<br />

breakのbr。改行タグです。

■使用例

改行をしてくれます。<br />

ここで改行。<br />


改行をしてくれます。

ここで改行。

3.<b>

太字になります。

■使用例

<b>大事な文章や強調したい</b>ところはコレで!


大事な文章や強調したいところはコレで!

4.<u>

文字にアンダーライン。

■使用例

<u>強調したいときに</u>使うと便利ですよね。


強調したいときに使うと便利ですよね。

5.<ul>,<ol>,<li>

リストタグ。

箇条書きにしたい場合に用います。<ul>は順番は表示されませんが、<ol>は番号がふられます。

■使用例

<ul>

<li>りんご</li>

<li>みかん</li>

<li>なし<li>

</ul>

 

<ol>

<li>りんご</li>

<li>みかん</li>

<li>なし</li>

</ol>


  • りんご
  • みかん
  • なし


  1. りんご
  2. みかん
  3. なし

6.<table>,<tr>,<th>,<td>

表にする時のタグ。

■使用例

<table>

<tr>

<th>あいうえお</th><td>かきくけこ</td>

</tr>

<tr>

<th>abcde</th><td>fghijk</td>

</tr>

</table>

あいうえおかきくけこ
abcdefghijk

7.<a>

リンクを指定する。
<a href=”(リンク先)” target=”_blank”>

■使用例

<a href=”http://hp-renew.jp/” target=”_blank”>

HPリニューアルアドバイザー

</a>


HPリニューアルアドバイザー

8.<img>

画像を表示させる。
<img src=”(場所+画像ファイル名)” width=”横幅” height=”高さ” alt=”画像代替文字”>

の様に記述。

■使用例

<img src=”http://hp-renew.jp/wp-content/uploads/2015/02/about_img8.jpg” width=”645″ height=”252″ alt=”HPリニューアルアドバイザー”>

HPリニューアルアドバイザー

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。