やっほー！ みなさん、ブログライフをエンジョイしてますかー？

 

現在は基本無料のブログサービスが数多く提供されており、特に専門的な知識がなくとも自分だけのブログを始めることができるため、その敷居はますます下がっているように思います。

 

ただ、先日の記事にも書いたように、人によって合う・合わないはあると思いますので、ぜひ自分にぴったりのサービスを選んでいただきたいところ……！（話題の4大無料ブログ徹底比較！アメブロ、ライブドア、はてな、note – @ninoya_blog）

 

しかし一方では、それらのサービスを利用して記事を書いている中、ふと表示がおかしくなったりして、困ってしまうようなケースも少なくないのではないかと思います。プレビュー画面で見るとなぜか文字がズレていたり、思ったような形で表示されていなかったりするような場合。

 

今回は、そんなブログ初心者さんの助けになれるよう、基本的な「HTMLタグ」をざっくりとまとめました。すべてのタグを覚える必要はまったくもってありませんが、困ったときに対処できるような「ちょっとした基礎知識」として参考にしていただければと思います。コピペできるように簡易的なコードを例として挙げていますので、もしよかったらご活用ください。

 

 

基本形

<p>：段落を分ける ／ <br />：改行する

ブログサービスによっても異なりますが、文章の編集中に「改行」をした場合に自動挿入されるのが、この <p> タグ。

より正確には「段落分け」の性質を持っており、 <p> ～ </p> で囲まれた文章と次の文章との間に、一行分の空白ができます。単なる「改行」の場合には、 <br />タグを使う場合が多いようです。

 

◆ コピペ用コード

<p>＜P＞ タグを使うと、</p>
<p>このように段落分けができる。</p>

 

◆ コピペ用コード

＜BR /＞ タグを使うと、<br />
このように改行できる。

 

<img>：画像を貼る

<img src=“画像URL”> といった基本形で、その場所にリンク先の画像を表示するタグ。他にも各種「属性」を付与することで、画像の縦横サイズや、周囲の枠線の太さを指定することも可能です。

とりあえずは、 <img> が画像を挿入するタグであることを覚えておくだけでも良いでしょう。

 

<a>：リンクを貼る

「 <a href=“リンク先URL”> テキスト </a> 」などのように、特定のテキストを <a> タグで囲むことで、リンクを貼ることができます。 <a> タグの中に「target=“_blank”」の要素を加えた場合、「新しいタブ（ウィンドウ）でリンクを開く」形になります。

 

◆ コピペ用コード

本サイトのトップページは<a href=”https://ninoya.co.jp/”>こちら</a>

 

<strong>：強調する

<strong> タグは「強調」を意味し、見かけ上は文字を太字にするものです。同様の効果を得られるものとして、 <b> タグもあります。SEO対策を考えるのであれば <b> よりも <strong> が有効であるという話も広く語られていますが、人によって意見が異なるため、効果の程は不明です。

 

<align>：文字や画像を寄せる

<タグ名 align=“left”> といった形で、囲まれた部分の文字や画像の表示位置を固定します。大多数のウェブサイトは横書きの左寄せになっているかと思われますが、「align=“center”」にすれば中央に、「align=“right”」で右寄りに表示されます。

 

◆ コピペ用コード

<div align=”center”>“center”で中央に、</div>
<div align=”right”>“right”で右寄りに。</div>

 

応用系

<blockquote>：引用する

<blockquote> タグは主に、他サイトの文章や本の内容を引用する際に使います。 <blockquote> ～ </blockquote> で選択した部分が「引用文」として認識され、設定によっては枠線やダブルクォーテーションマーク（ “ ）などで囲われた状態で表示されます。

 

引用する

◆ コピペ用コード

<blockquote>引用する</blockquote>

 

<table>：表を作成する

<table> は、表を作る際に使用するタグの基本となります。 <table> ～ </table> の中で、 <tr> で横の行、 <th> で見出し、 <tr> でセルを指定し、大小さまざまな表を作ることができます。いろいろと装飾を加えようとする場合には少し複雑になってきますので、後述するサイトなどを参照してください。

 

◆ コピペ用コード

<table>
<tr>　<th></th>　<th>列-A</th>　<th>列-B</th>　</tr>
<tr>　<td>行-1</td>　<td>A-1</td>　<td>B-1</td>　</tr>
<tr>　<td>行-2</td>　<td>A-2</td>　<td>B-2</td>　</tr>
<tr>　<td>行-3</td>　<td>A-3</td>　<td>B-3</td>　</tr>
</table>

 

<ul>：箇条書きにする

<ul> タグはいわゆる「箇条書き」で表示する際に使います。 <ul> ～ </ul> の中で複数の文章を <li> ～ </li> タグで囲むことで、リストとして表紙されます。

 

◆ コピペ用コード

<ul>
<li>ぞうさん</li>
<li>きりんさん</li>
<li>しまうまさん</li>
</ul>

 

<div>：特定の範囲をグループ化する

<div> タグは、 <div> ～ <div> で囲った部分をひとまとまりのグループとして認識させるもので、主に他のタグ要素と合わせて使用します。

例えば、先ほどの <align> タグの例では、 <div align=“center”> ～ </div> という形で一部分を指定し、その範囲のみを中央に寄せています。

 

枠線で囲む

引用文とは別に、特定の文章を枠線で囲もうとする場合には、前述の <div> タグで指定して実行します。例えば、 <div style=“border-style: 線の種類 ; padding: 枠内の余白 ; border-width: 枠線の太さ ; border-color: 枠線の色”> ～ </div> といったように複数の属性を指定することで、多彩な「枠」を作ることが可能です。

 

◆ コピペ用コード

<div style=“border-style: solid ; padding: 5px ; border-width: 1px ; border-color: red”> ～ </div>

 

◆ コピペ用コード

<div style=“border-style: dotted ; padding: 10px ; border-width: 5px ; border-color: blue”> ～ </div>

 

◆ コピペ用コード

<div style=“border-style: dashed ; padding: 10px ; border-width: 10px ; border-color: yellow”> ～ </div>

 

まとめ

尺の都合上、簡易的な内容となってしまいましたが、ブログで使えそうなHTMLタグをご紹介しました。これらの知識は必要不可欠というわけではありませんが、知っていて損はないかと思います。中には、「中学で習ったけど忘れてた……」という方もいるかもしれませんね。

 

もちろんブログの内容にもよりますが、なんでもかんでも装飾をすれば良いというものでもありません。基本的には文章ありき、それをより見やすくするための改行や強調、枠線ですので、その点も考慮しつつ編集することをおすすめします。

 

――とは言え、あれこれと装飾してみるのも楽しいので、まずは勉強がてら、いろいろと試してみるのも悪くないと思います。

 

参考ページ

・HTMLクイックリファレンス

・30分間HTML入門 — ごく簡単なHTMLの説明

・<table> – テーブル(表)