カテゴリー:これだけは抑えておきたいHTMLタグの記事一覧

RICK式アフィリエイト実践記

ポイントサイト・アンケートサイト・趣味を起点としたアフィリエイトの実践記です。

カテゴリー:これだけは抑えておきたいHTMLタグ

これだけは抑えておきたいHTMLタグ ~その3:表~

記事の概要

この記事では表の書き方について書いていきます。記事の構成は以下の通りです。

  • HTMLタグで表を書く理由
  • 表の書き方
  • まとめ

HTMLタグで表を書く理由

表なんて縦棒"|"と項目だけで十分と思っているかたもいらっしゃるかもしれません。しかし、実際にするとレイアウトが崩れる等なかなかうまくいかないものです。表を作る際はHTMLタグを使うことで綺麗な表を作ることが出来ます。

表の書き方

普通の表の書き方

まずは併合がない普通の表の書き方を説明します。<tr>タグで囲まれた部分が1行に表示されます。表の見出しには<th>タグを、表のデータには<td>を使います。

ソースコードの例1

<table>
<tbody>
<tr><th>あ行</th><td>あいうえお</td></tr>
<tr><th>か行</th><td>かきくけこ</td></tr>
<tr><th>さ行</th><td>さしすせそ</td></tr>
</tbody>
</table>

例1の実際の表示

あ行 あいうえお
か行 かきくけこ
さ行 さしすせそ

ソースコードの例2

<table>
<tbody>
<tr><th></th><th>あ音</th><th>い音</th><th>う音</th><th>え音</th><th>お音</th></tr>
<tr><th>あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td></tr>
<tr><th>か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
<tr><th>さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
</tbody>
</table>

例2の実際の表示

あ音 い音 う音 え音 お音
あ行
か行
さ行

横のいくつかのセルを併合した表の書き方

横のいつくかのセルを併合する際は"colspan=2"と言った感じにcolspanオプションを使います。

ソースコードの例

<table>
<tbody>
<tr><th colspan=2>名前</th><th colspan=2>英語表記</th></tr>
<tr><td colspan=2>ワンダーウォール</td><td colspan=2>Wonder Wall</td></tr>
<tr><th colspan=4>種類</th></tr>
<tr><td colspan=4>無属性クリーチャー</td></tr>
<tr><th>レア度</th><th>コスト</th><th>ST</th><th>HP</th></tr>
<tr><td>S</td><td><b>G</b>30+□</td><td>0</td><td>30</td></tr>
<tr><th colspan=2>配置制限</th><th colspan=2>アイテム制限</th></tr>
<tr><td colspan=2>なし</td><td colspan=2>武器・防具</td></tr>
<tr><th colspan=4>効果</th></tr>
<tr><td colspan=4>防御型;無効化[火・水・地・風]</td></tr>
</tbody>
</table>

実際の表示

名前 英語表記
ワンダーウォール Wonder Wall
種類
無属性クリーチャー
レア度 コスト ST HP
S G30+□ 0 30
配置制限 アイテム制限
なし 武器・防具
効果
防御型;無効化[火・水・地・風]

縦のいくつかのセルを併合した表の書き方

縦のいつくかのセルを併合する際は"rowspan=2"と言った感じにrowspanオプションを使います。

ソースコードの例

<table>
<tbody>
<tr><th>機種名</th><th>OS</th></tr>
<tr><td>Xperia</td><td rowspan="2">Android</td></tr>
<tr><td>Zenfone</td></tr>
<tr><td>iPhone</td><td>iOS</td></tr>
</tbody>
</table>

実際の表示

機種名 OS
Xperia Android
Zenfone
iPhone iOS

まとめ

今回は<table>タグの使い方について書きました。

これだけは抑えておきたいHTMLタグ ~その2:箇条書き~

記事の概要

この記事では箇条書きの書き方について書きます。記事の構成は以下の通りです。

  • 箇条書きでHTMLタグを使う理由
  • 順序なしリストの書き方
  • 順序付きリストの書き方
  • 定義リストの書き方
  • まとめ

箇条書きでHTMLタグを使う理由

箇条書きを書く際は"・"を打った後にその内容を書けばいいかもしれません。しかし、その場合だと行の先頭が噛み合わなかったり、等上手くレイアウトが整わない可能性があります。しかし、htmlタグを使えば自然とレイアウトの整った箇条書きを書くことが出来ます。

順序なしリストの書き方

順序に関係がない箇条書きを書く際は<ul>タグを使います。具体的な使い方は以下の通りです。

ソースコード

<ul>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ul>

実際の表示

  • あいうえお
  • かきくけこ
  • さしすせそ

順序付きリストの書き方

順序つきの箇条書きを書く際は<ol>タグを使います。具体的な使い方は以下の通りです。

ソースコード

<ol>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ol>

実際の表示

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

定義リストの書き方

定義リストとは名前と説明からなるリスト構造です。書く際は<dl>タグを使います。具体的な使い方は以下の通りです。

ソースコード

<dl>
    <dt>あ行</dt>
    <dd>あいうえお</dd>
    <dt>か行</dt>
    <dd>かきくけこ</dd>
    <dt>さ行</dt>
    <dd>さしすせそ</dd>
</dl>

実際の表示

あ行
あいうえお
か行
かきくけこ
さ行
さしすせそ

まとめ

今回は様々なリストの書き方について解説しました。次回は表の書き方について書きます。

これだけは抑えておきたいHTMLタグ ~その1:見出し~

記事の概要

この記事では見出しタグの使い方について書きます。記事の構成は以下の通りです。

  • 見出しをつける理由
  • 見出しの付け方
  • 見出しは目立たせてこそ
  • まとめ

見出しをつける理由

なぜ見出しをつけるのでしょうか?それは記事に書いている内容を瞬時に把握させるためです。

見出しもなくダラダラと書かれているブログの文章を読むとだんだん読む気が薄れていきませんか?また、筆者にとっては切っても切り離せないような構成で書いていたととしても、記事の内容の全てが読者にとって役に立つ内容であるとは限りません。

例えば、私は「GMOクラウドVPS + PLESK12」を使用していますが、中には「さくらサーバー」を使用している人もいれば「iClusta+」を使用している人もいます。他のサーバーを使用している人にとっては部分的に役に立つところはあっても全体が役に立つとはいえません。

また、見出しをつけて文章を細分化して構造化することで文章にメリハリがついて多少読みやすくなります。

見出しの付け方

見出しの付け方は簡単です。テンプレートによって設定は異なりますが、最近のSEO対策が施されているテンプレートでは個別記事のタイトルに<h1>タグが設定されている事が多いので、記事内で使用できる見出しタグは<h2>タグからになります。

見出しタグの付け方は非常に簡単です。いかように見出しの文章をタグで囲むだけです。

h2タグを見出しとして使用する場合
<h2>見出しのタイトル</h2>

見出しは目立たせてこそ

テンプレートにもよりますが、普通に見出しタグを入力しただけの場合、単に文字が太くなるだけといった事があります。これではGoogleにはアピール出来ますが(Googleはソースコードを読むため)、人間には見出しなのか単なる太字なのかを区別することは非常に難しいです。

そこで重要になってくるのが「ショートコード」と呼ばれる記事装飾です。これがあるのとないのとでは見出しの目立ちやすさに雲泥の差が生まれます。なのでテンプレートを選ぶ際は出来る限り記事装飾が充実しているテンプレートを選ぶことをオススメします。

私は今「Kaeten WP JOY」というテンプレートを使っていますが、このテンプレートはデザイン性やカスタマイズ性が非常に多くさらに、1つのタグに対しても記事装飾が非常に豊富に用意されているテンプレートです。現在先行販売期間中(?)とのことなので紹介は出来ませんが紹介できるようになったら紹介します。

まとめ

今回はブログを書く際に抑えておきたいタグの1つである「見出しタグ」について書きました。次回は「箇条書き」の書き方について書いていきます。

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss