• 更新日: 2017年03月23日

初心者ブロガーが知っておくと便利なHTMLタグ20 選

初心者ブロガーが知っておくと便利なHTMLタグ20 選

ブログって誰でも簡単に始められるイメージがありますが、その操作感やレイアウトにストレスを感じている方もいらっしゃるのではないでしょうか？ そんな時に HTML タグのことを少しでも知っておくと、素早く解決することができます。 そんな訳で、今回はより楽しくブログ記事が書けるように 代表的な HTML タグと知っておくとよりブログが楽しくなるHTML タグをご紹介していきたいと思います。

目次
  1. 初心者ブロガーが知っておきたいテクニック「HTMLタグ」20選
  2. 改めてHTMLのタグとは
  3. 基本的なHTMLタグ5種(h,div,p,a,img)
  4. 文字レイアウトに関するタグ6種(style,strong,em,del,code,ruby)
  5. その他機能性のあるタグ9種(video,iframe,nav,blockquote,dl,table,ul,details,select)
  6. まとめ

初心者ブロガーが知っておきたいテクニック「HTMLタグ」20選

改めてHTMLのタグとは

html-tag-photo

Web やアプリなどをデバイスに表示にさせるためには、HTML 言語で表示内容をコンピューターに知らせてあげる必要があります。その時に、この情報はこういうモノでこういう具合に表示して下さい、というサインをコンピューターに出す際にタグが必要となります。HTML のタグが規格されているおかげで、OS や デバイス、国が違っても web 開発者が作った通りのデザインを表示することができます。HTML タグは現在 118 種類あり、<タグ名>・・・</タグ名> という形で HTML シートに記述していきます。

基本的なHTMLタグ5種(h,div,p,a,img)

ブログが読みやすくなる見出しタグの <h1> から <h6>

ブログの文章を読みやすくするためには見出し（サブタイトル）が必要です。このブログでも見出しタグは使われていて、<h2> から <h4> がブログ投稿内で使われています。 <h2> などの数字の意味は、<h1> はタイトル、<h2> はサブタイトル、<h3> はサブサブ・タイトルなどメッセージ性と関係してきます。 見出しタグの利用は読みやすくなるだけでなく、SEO 的な効果にも期待ができるので、がんばって見出しをセッティングしていきたいですね。

サンプル

<h4>h4 タグのサンプル</h4>

出力結果　↓

h4タグのサンプル

HTML 編集画面を見る上で知っておきたい <div> タグ

動画や画像などのコンテンツをブログ内で挿入した時に現れるタグです。<div> </div> 範囲内の情報を一つのブロックとしています。ブロガーが直接 <div> を記述することはほとんどないと思いますが、HTML 編集する時に <div> を理解しておかないといけませんね。

サンプル BloggerでYouTubeを挿入した時のHTML

<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/5NTWgM1ikVk/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/5NTWgM1ikVk?feature=player_embedded" width="320"></iframe></div>

レイアウトの関係で

が使われています。
で囲まれた範囲がYouTube表示に関する情報になります。

文章に段落を設けたい時は <p> タグ

<p> タグは、文章の段落を設定するタグになります。尚、改行だけ実行したい場合は<br>タグを使います。 普通タグには始めと終わりがありますが、<br> はこのコードだけで改行が実行されます。また、<br/>と記述しても<br>と同じ結果を得ますが、<br/>はXHTML 言語であり、HTML 言語とは異なります。

サンプル

<p>p タグです</p><p>ここから次の段落です</p>

出力結果

pタグです。

ここから次の段落です

リンク・タグの <a>

<a> は、リンク設定する時に使われるタグです。<a></a>で囲まれた範囲がリンク対象となって、別ウィンドでリンク先を表示する場合は、target=”_blank” と記載します。

サンプル

<ahref="https://blog.codecamp.jp"target="_blank">コードキャンプのブログ</a>

** 出力結果**コードキャンプのブログ

画像タグの <img>

<img> は、画像を差し込む時に使われるタグです。画像の挿入は、ほとんどのブログサイトで簡単に設定できますが、サイズ調整やリンク設定などで HTML の編集が必要となる場合もあります。

サンプル

<img src="//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/3701/27854e15b10dd3a6a346df1693666731c5a53cfc.3791.original.png?1488165558" alt="logo" width="200" height="92"/>

** 出力結果**
logo

文字レイアウトに関するタグ6種(style,strong,em,del,code,ruby)

表示スタイルを決める <style>

Html 5 までは <font> タグで文字の色や大きさなどを設定していましたが、今は <style> タグが主流となっています。文字の色や文字の背景色、サイズなど柔軟に対応することができます。

サンプル

<span style="background-color: grey; color: white; font-size: 25px;">HTML タグ
</span>

出力結果

HTML タグ

太文字なら <strong> もしくは <b>

文章中の文字を強調したい時には、“太文字”を使いたいことと思います。多くのブログサイトでも太文字タグは用意されていますが、ほとんどが <b> タグになります。表示的には <b> も <strong> も同じですが、SEO 的にはチョット違ってきます。見た目だけでなく、ブログ内でも強調したい文字の場合は <strong> の方が適切とされています。

サンプル

強調太文字なら strong、太文字なら b

出力結果　強調太文字なら strong、太文字なら b

斜め文字の <em> と <i>

文字を斜めに表示したい時によく I タグが利用されます。ただ単に文字を斜め表示するだけなら <i> で OK ですが、特定の文字を強調したい時は <em> の方が適当です。見た目では <i> も <em> も同じですが、SEO 的な意味からは違ってきます。

サンプル <em>強調斜め文字なら em</em>、<i>斜め文字なら i</i> 出力結果　強調斜め文字なら em、斜め文字なら i

 

取り消し線の <s> と <del>

無効な文字を表現したい時には取り消し線タグが使われます。livedoor ブログや Blogger などでも取り消し線タグはあって、簡単にブログを編集できますが多くの場合で旧スタイルの <strike> タグになっています。HTML 5 が主流の現代としては、<s> タグと <del> タグが使われます。画面に表示される内容は <s> も <del> もよく似ていますが、HTML 言語的には異なった意味を持ちます。

<s> は、昔はそうだったかもしれないけど、今は違う、というようなニュアンスの時に使用します。

例　メーカー希望小売価格　300円　→　期間限定特価　100円 コード <s>メーカー希望小売価格　300円</s>　→　期間限定特価　100円 <del> は、表示内容が間違っていた、もしくは完全に変わった時の様な取り消し時に使用します。

例　メーカー希望小売価格　300円　→　改訂希望小売価格　500円

コード <del>メーカー希望小売価格　300円</del>　→　改訂希望小売価格　500円

チョットしたことですが、せっかくなので使い分けて表現してみるとブログの格式も向上すると思います。

プログラミング・コードの表示は <code> タグ

<code> は、プログラムのソースコードをブログに書きたい時に使うタグになります。<code>でくくっておくと文字のレイアウトが変わり、見やすくもなります。似たようなタグに <samp> や <kbd>、<var> もありますが、言葉の意味は違ってきます。Samp はサンプルコード、kbd はサイト閲覧者がキーボードに入力するコード、var は変数や引数を意味します。

サンプル <code>.widget-title{text-align: center; }</code> 出力結果　.widget-title{text-align: center; }

 

読みにくい漢字や英語のふりがなは <ruby> タグ

読みにくい漢字やきらきらネームの読みを正しく伝えたい時に <ruby> が使われます。漢字のあとに（）で読みを書くケースも多く見受けられますが、<ruby> を使った方が文章がすっきりして見えます。ちなみに ruby は <rb> <rp> <rt> とセットで利用します。

キラキラネームの読み

``` 白雪 ひめ ``` ![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/7501/86044535cd4d5affabea52d1194ed8330397ef5b.7528.desktop.jpg)

英語の読み

<ruby> cup <rt>カップ</rt> </ruby> image

その他機能性のあるタグ9種(video,iframe,nav,blockquote,dl,table,ul,details,select)

動画タグの <video>

ブログで動画挿入というと YouTube 挿入機能が標準で用意されているケースが目立ちますが、YouTube 以外のソースから動画を差し込みたい時もあると思います。そんな時は <video> タグを使うと動画をブログ内で紹介することができますね。アメブロでも <video> タグは使えます。

サンプル <video controls autoplay loop><source src="http://bitcoin-with.com/codecamp/test-movie.mp4" ></video> **WordPress の場合 ［video mp4="http://bitcoin-with.com/codecamp/test-movie.mp4" autoplay="y" loop="y"] [/video］ 出力結果

他サイトのコンテンツを表示する <iframe>

Google Map や YouTube などのコンテンツをシェアしたい時に、埋め込みコード（iframe）を利用するとブログ内にコンテンツを表示できて、見ている人に分かり易く情報を発信することができます。Iframe 内のコードをいじくると、サイズやスクロールの有無など細かい点も設定することができます。

サンプル <iframe src="https://blog.codecamp.jp/" width="100%" height="300"> 出力結果（イメージ）

image

 

プチ・メニューの <nav> タグ

<nav> は、ブログ記事の中で、プチ・メニューを表示させたい時に使えるタグです。リンク文字を並べてもイイのでしょうが、自己満足的・SEO 的には <nav> タグを使いたいものです。

サンプル

出力結果

 

引用文を掲載する時は <blockquote> タグ

他のブログや web ページから文章を引用する場合には、引用タグ <blockquote> が使われます。引用タグは、ブログ投稿画面のツールバーにも `` マークで表示されていますが、思うように範囲設定できない時もあると思います。

`` = 引用タグの <blockquote> と知っておけば、範囲がうまく設定できない時も HTML 編集で </blockquote> の位置を調整できると思います。ちなみに引用タグは <blockquote> 以外にも <q> という引用タグがあります。2つの違いは、文章を抜粋する時が <blockquote> で、改行を必要としない短い文章の時は <q> を使う方法が一般的です。また、<blockquote> を使う時は、引用元のページアドレスも記載しておくとブロガーとしての格式もUPします。

サンプル <blockquote cite="https://blog.codecamp.jp/">モックアップ作成を強力サポート！Prototyperを徹底解説</blockquote> 出力結果

モックアップ作成を強力サポート！Prototyperを徹底解説

言葉の説明に使える <dl> タグ

<dl>は、言葉の定義や説明をしたい時に使えるタグになります。<dl> と <dt> <dd> をセットで使い、<dt> に説明したい言葉、<dd> に言葉の説明文を記述します。

サンプル <dl> <dt>アールグレイ</dt> <dd>柑橘系のさわやかな香りの紅茶</dd> <dt>ダージリン</dt> <dd>コクのある紅茶</dd> </dl>

出力結果（イメージ）

image

表の <table> タグ

表を作成したい時に使えるタグです。エクセルなどのシートから表データをブログにコピペすれば自動的に <table> タグが生成されます。表内の枠に線を引きたい場合は border="0" 部分の ”0” を 1 や 2 に変えます。他には <tr> や <td> タグが乱立されて、<tr> は行、<td> はセルを指し示すタグになります。表のタイトルを表示したい時は <caption>、1 行目に見出しを設定したい時は <th> タグを使います。

サンプル（エクセルから貼り付けた場合） <table style=”border-collapse: collapse; width: 108pt;” border=”0″ width=”144″ cellspacing=”0″ cellpadding=”0″><colgroup> <col style=”width: 54pt;” span=”2″ width=”72″ /> </colgroup> <tbody> <tr style=”height: 13pt;”> <td style=”height: 13pt; width: 54pt;” width=”72″ height=”18″>月曜日</td> <td style=”width: 54pt;” width=”72″>はれ</td> </tr> <tr style=”height: 13pt;”> <td style=”height: 13pt;” height=”18″>火曜日</td> <td>あめ</td> </tr> <tr style=”height: 13pt;”> <td style=”height: 13pt;” height=”18″>水曜日</td> <td>くもり</td> </tr> </tbody> </table> 出力結果

月曜日 はれ
火曜日 あめ
水曜日 くもり

箇条書きタグの <ul>

箇条書きで文章表現したい時に使えるタグです。多くのブログサイトではツールバーに ・－ マークで用意されています。箇条書きタグをクリックすれば簡単に利用できますが、箇条書きの範囲設定で困惑する時もあります。そんな時は HTML の箇条書きタグ <ul> と <li> を理解しておけば困らなくて済みます。<ul>でリスト宣言して、<li>でリスト内容を記述していきます。

サンプル <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 出力結果

  • Coffee
  • Tea
  • Milk

隠しておきたい詳細情報なら <details> タグ

スタイリッシュにブログ情報をまとめたい時に使えるタグが <details> です。アコーディオンのように文字を収納することができて、ブログの見栄えも冴えると思います。ただし、IE と FireFox には対応していないという弱点があります。

サンプル <details> <summary>詳細情報（クリックしてみてください）</summary> 詳細です<br/> コードをコピペして試してみてください<br/> IE と FireFox はブラウザ対応していません。 </details>

出力結果

詳細情報（クリックしてみてください）詳細です コードをコピペして試してみてください IE と FireFox はブラウザ対応していません。

 

選択してもらいたい何かがある時は <select> タグ

livedoor ブログ や FC 2 ブログ などで使えるタグで、選択項目を表現したい時に使えます。WordPress の場合は、プラグインなどを利用すると簡単にセレクト・ボックスを表示できます。

サンプル <form name="form1"> <select name="select1" onchange="if(document.form1.select1.value){location.href=document.form1.select1.value;}"> <option>　ブログサイト　</option> <option value="https://www.blogger.com">Blogger</option> <option value="http://livedoor.blogcms.jp/">livedoor ブログ</option> <option value="http://mypage.ameba.jp/">アメブロ</option> </select> </form>

出力結果（イメージ）

image

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

すこし長くなりましたが、いかがでしたでしょうか？ほとんどの場合は、ブログサイトのツールバーで間に合うかもしれませんが、今回ご紹介したようなHTMLタグの意味や使い方を知っておくとブログ表現の幅も広がると思います。どうしても既存のブログサービスではテンプレートや機能が統一されて、文字や文章から個性を出そうと必死になりますが、HTMLの基本タグを利用するだけで個性の引き立つブログサイトになると思います。またHTML編集の画面を見慣れておくと、プログラミングにも抵抗感がなくなってきて、ご自身のスキルアップにもつながると思います。

オシママサラ
この記事を書いた人
オシママサラ

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す