はてなブログ制作者のためのHTML講座

ブログの魅力は、HTMLを知らなくてもWebを作成できること。とはいえ、ブログの見た目をカスタマイズするとなると、やはりHTMLの知識があった方が応用が効き便利です。そこで、「はてなブログ」ユーザーに向けて簡単なHTML講座を開催します。ブログ制作に限定すれば、覚えるべきHTMLはほんの少ししかありません。よって、すぐにHTMLを理解できるようになると思います。

HTMLの基本、開始タグと終了タグ

「はてなブログ」ユーザーの多くは、「見たまま編集モード」でブログ記事を作成していると思います。この編集画面にある「HTML編集」タブをクリックすると、現在作成しているページのHTMLを参照できます。たとえば、このページの場合、以下のような感じでHTMLが表示されます。 

このHTMLを見ていくと、記事の文章に交じって<p>や</p>などの記号が記載されているのを確認できると思います。この記号のことをタグといいます。たとえば、記事の冒頭にある文章は、<p>と</p>のタグで囲まれています。同様に、「HTMLの基本、開始タグと終了タグ」の見出しは、<h3>と</h3>のタグで囲まれています。

このように、HTMLでは<英数字>と</英数字>のタグを使って記述していくのが基本です。<p>や<h3>のように、<英数字>と表記されているタグは開始タグ、</p>や</h3>のようにスラッシュを付けて</英数字>と表記されているタグは終了タグと呼びます。また、「開始タグ」～「終了タグ」の範囲を要素と呼びます。

はてなブログで使用されるHTML要素

HTMLを習得するには、<p>～</p>や<h3>～</h3>などの要素が「それぞれ何を示しているか？」を学習しなければいけません。要素は全部で100種類以上あり、全部を覚えるのはかなり大変です。でも安心してください。「はてなブログ」で使用される要素は、ほんの数種類しかありません。よって、少し勉強するだけで、ブログに必要となるHTMLを覚えられます。

それでは、「はてなブログ」で使用される最も基本的な要素について解説していきましょう。「はてなブログ」で頻繁に使用される要素は、p、h3、imgの3種類だけです。これらの要素を学習するだけで、HTMLの大部分を読み解けるようになります。

p要素（段落）

最初に解説するのは、段落を意味するp要素です。HTMLでは、<p>～</p>で囲まれた範囲を1つの段落とみなします。

「はてなブログ」の「見たまま編集」では、「Enter」キーを押して文章を改行する毎に段落が区切られ、それぞれの文章が<p>～</p>で囲まれる仕組みになっています。また、段落と段落の間には少しだけ間隔が設けられるようになっています。

h1～h6要素（見出し）

<h3>～</h3>などの要素は、その範囲が見出しであることを示す要素となります。見出しの要素は、h1、h2、h3、h4、h5、h6の6種類が用意されており、数字が小さい要素ほど「上位レベルの見出し」として扱われます。

「はてなブログ」では、「記事のタイトル」が<h1>～</h1>（最上位の見出し）となります。このため、「HTML編集」の画面にh1要素が表示されることはありません。

「HTML編集」の画面に登場するのは、h3、h4、h5の3種類です。「大見出し」を指定した段落は<h3>～</h3>、「中見出し」を指定した段落は<h4>～</h4>、「小見出し」を指定した段落は<h5>～</h5>で囲んでHTML出力されます。

なお、「標準」を指定した段落は本文として扱われるため、<p>～</p>で囲んでHTML出力されます。

img要素（画像の掲載）

img要素は、画像を掲載する要素です。まずは、img要素の具体的な出力例から見ていきましょう。

img要素では、属性を使って掲載する画像の情報を指定します。最初に登場するclass="xxx"の記述は、画像の書式（表示方法）を指定するもので、少し特殊な属性となります。よって、ここでは無視しておいてください。

次に登場するtitle="xxx"の部分は、画像の名前を示しています。「はてなブログ」では画像の整理番号が「画像の名前」として採用される仕組みになっています。この属性は必須項目ではないため、削除しても特に問題はありません。

その後に続く、src="xxx"が最も重要な部分です。src属性は、画像の位置情報を示すもので、このURLに保存されている画像が実際に掲載される画像となります。

alt="xxx"の部分には、画像の内容を示す文字を記述するのが基本です。しかし、「はてなブログ」では、画像の整理番号が指定されています。この属性はSEOにも影響を及ぼすので、必要に応じて"xxx"の部分を書き換えておくとよいでしょう。

width="xxx"の部分は、画像の表示サイズを示しています。この例の場合、幅268ピクセルで画像を表示することになります。ちなみに、画像の表示サイズを高さで指定することも可能です。この場合は、width="xxx"の代わりにheight="xxx"という属性を使用します。

img要素の末尾にある /> の記述は、終了タグの省略を意味しています。本来であれば、終了タグである</img>を記述しなければいけませんが、img要素は<img>～</img>の中に記述すべき文字がありません。このように、「開始タグ」と「終了タグ」の間に記述する文字がない要素（空要素）は、開始タグの末尾を /> とすることで、終了タグの記述を省略してもよい決まりになっています。

また、「はてなブログ」ではimg要素が<p>～</p>で囲んで出力される仕様になっています。このため、画像は1つの段落として扱われます。これについては以前の記事でも紹介しているので、あわせて参照してみてください。

「はてなブログ」は、p、h1～h6、imgといった3つの要素を覚えるだけでもHTMLの大半を理解できるようになります。次回は、リンクや太字など、文字に関連するHTMLについて解説していく予定です。ご期待ください。