はてなダイアリーガイド「はてなダイアリーのHTML」
はてなダイアリーのHTML
ご存知の通り、はてなダイアリーは文章を登録するだけで自動的にウェブページ（HTML文書）を作ってくれます。
ここでは普段は意識せずに更新できる、はてなダイアリーが自動的に書き出してくれるHTML文書についてご説明します。ヘッダやフッタをいじるときや、スタイルシートを書く際は知っていた方が断然スムーズでしょう。
- 【上級者向け補足】すでにHTMLが分かってスタイルシート用にてっとりばやくHTML構造を知りたい方は、応用編CSSセレクタ等を参考にしてください）
- 【初心者向け補足】ガイドをここから読み始めようとすると、かなりわかりにくいかもしれません。HTMLに関しては情報通信白書 for Kids：Webサイト・ホームページはどう作るの？(HTMLとは）にアニメーションつきの説明があります。それを読んだ後、ガイドの「リンクを張る」から練習してみてください。
HTMLってなに？
私たちが利用しているウェブ（World Wide Web）というシステムができた頃、あらゆるコンピューター間で情報をやり取りする共通の規格が必要でした。その中で、やり取りに適した文書を作成するために1991年「HTML（ハイパー・テキスト・マークアップ・ランゲージ）」が生まれました。ハイパー・テキストとは、このページのようなリンクで結ばれる仕組みの文書です。
言語（ランゲージ）とはコンピューターに処理させるための「コンピューター言語」のことですが、コンピューターに命令をするプログラミング言語とは区別して「マークアップ言語」と呼ばれます。今までのタグづけ作業でお分かりだと思いますが、印をつけるための記号の使い方ということです。マークアップ（印つけ）して、ウェブページとして利用しやすい文書に整えていきます。それで、ハイパー・テキストを印つけする言語――「HTML」なのです。
W3Cという組織が作成したこのHTMLという言語は、あらゆるコンピューターで利用できるという条件を満たすため、視覚情報を含まない特長がありました。見た目ではなく“ここは引用ですよ”とか“ここは強調するところ”など、そこが文書の中でどういう意味を持った部分なのかを記していくのです。それをどう表現するかは利用者の環境（機種やブラウザ等のソフト）次第で、どんな環境でも「それなりに読みやすく」利用できるのが目標といえます。
“ここからここまでは文字色が赤”といった「見た目」に関する情報は、HTMLファイルからリンクした「スタイルシート」という文書に記述していきます。実際にはHTMLも見た目を記述できるよう拡張され、それがインターネットブームに大きく火をつけた経緯があるのですが、現在ではスタイルシートも整備され、HTMLによる見た目の記述はW3Cに推奨されていません。スタイルシートも万能ではなく対応できない環境があるなど問題もあるのですが、テーマを切り替えられたり、モジュールによって各サイトにHTMLが提供されるはてなダイアリーのようなサービスではHTMLとスタイルシートの役割の分離が必須で、その傾向は今後もウェブ上で拡大するでしょう。
はてなダイアリーでスタイルシートを除いた、HTMLだけの状態はデザインテーマサンプルの日記で言うとこの状態になります。ページの見た目はあなたの利用環境次第になるのですが、見出しや段落などはマークアップされているので「それなりに読みやすく」は利用できるのではないでしょうか。
- 【関連ページ】より詳しくはWeb for beginner ホームページ作成支援（外部サイト）より「Webと HTML」、「HTMLの歴史」等をご覧ください。
日記のソース
それでは日記のHTMLソースを順に見てみましょう。ソース（source："源"の意味）というのはコンピューターが直接読める機械語の「元」になる、人間に読みやすい状態の情報のことです。といっても読み方を知らなければわけのわからない、呪文あるいは外国語のようなものですが。
ブラウザの「ソースを表示」機能などで、自分の日記のソースを見ながら読み進めてみてください。
■ DOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
この書類（ドキュメント）がどの言語のどのバージョンで書かれているかを知らせる部分です。
■ htmlタグ
<html>
html開始タグに始まりhtml終了タグ（</html>）に終わる、それがHTML文書です（DOCTYPE宣言は別格です）。ページの最後にhtmlの終了タグがあります。
■ head要素
<head> 〜 </head>
head要素にはウェブブラウザのウィンドウ等には表示されない、この書類に関する情報が記述されます。html文書は、この表示されないヘッダ部（head要素）と、表示される本文（body要素）に大きく分けられます（→模式図にリンク）。
■ meta要素
<meta http-equiv="Content-Type" 〜
meta要素には、この書類をどう扱ったらよいかをソフトに知らせるような情報が記述されています。文字コードは「euc-jp」でスタイルシートは「CSS」形式（それぞれ他にもあるのです）、内容にJavaScriptというスクリプト言語を含むことが記述されています。
■ link要素
<link rel=〜
link要素はその文書と他の文書のリンク関係を記述します。このリンクは他のHTML文書にジャンプするためのa要素とは違い、ブラウザ等のソフトがそのリンク関係を読み取り、連携した機能を利用者に提供します。
この日記のスタイルシートは「http://d.hatena.ne.jp/theme/テーマ名/テーマ名.css」にあるからそれを適用してちょうだいよ、とか、この日記のRSSが「http://d.hatena.ne.jp/ユーザー名/rss」にあるよ、といった情報になります。詳しくはThe Web KANZAKI - link要素の使い方などをご覧ください。
■ style要素
<style type="text/css"> 〜 </style>
管理ツール詳細デザイン設定の「スタイルシート」欄に書いた内容が反映されるのはここです。上のlink要素を用いた外部参照スタイルシート（つまりテーマ）よりも、ここに書かれたスタイルシートの指定のほうが優先されます。
この要素全体がコメントアウトされているのは、スタイルシートに対応していないブラウザ等でそのまま表示されてしまわないようにするためです。
- 【補足】HTML文書でのスタイルシートの参照方法は他にもありますが（CSSの参照方法 - CSS Dencitie）、「はてなダイアリーXSS対策」により、このstyle要素による埋め込みとテーマ機能に限られています。
■ ヘッダテーブル
<table border="0" width="100%" cellspacing="0" cellpadding="0"> 〜
はてなロゴなどがあるテーブルです。テーブルとは「表」のことで、table要素はなにかの一覧表になるものです（参考ページ：The Web KANZAKI「テーブル -- ごく簡単なHTMLの説明」）。このヘッダテーブルはリンクを集めた表と言えなくもないですが、HTMLを視覚的なレイアウトに利用しているという意味で、言ってしまえば要素の誤用です。
はてなはブログサービスの中ではわりと正確なHTMLソースを生成する方なのですが、（商業用のウェブサイトでは特に）正しいHTMLを守り通すのもなかなか大変だという一例でしょうか。
- 【補足】そのせいで、スタイルシートでいじりにくい部分になっています（→はてなダイアリーガイド「CSSセレクタ - ヘッダテーブル」）。いじりにくくするためなのか（スタイルシートで非表示にするのは利用規約違反）。
■ 見出し要素（h1〜h6）
<h1>はてなダイアリー日記</h1>
文章に見出し（heading）をつける要素です。大きなまとまりの見出しから順に、h1、h2、h3……となりh6要素まで使えます。タグを書いて作ることもできますが、はてなダイアリーでは
- h1……日記タイトル
- h2……その日のタイトル
- h3……(記事の)見出し（『*』で作れる見出し）
- h4……小見出し（『**』で作れる見出し）
- h5……小々見出し（『***』で作れる見出し）
となっています。
■ div要素とclass属性
<div class="hatena-body"> <div class="main"> 〜
div要素は、特に論理的な意味を持たないブロック要素です。ここからここまではひとつのブロックといったかんじで範囲を区切るのに使います。
class属性は、ウェブページ作者がHTMLの要素よりも細かい意味づけをしていくためのものです。「class="xxxx"」という形で、任意のクラス名をつけていくことができます。いくつかの要素に同じクラス名をつければ、それらは同じクラスということになります。同じクラスである要素は例えば、そのクラスだけをスタイルシートで見た目変更することができます。そのように、class属性であちこちの要素に共通の性質を持たせられるようになります。
はてなダイアリーの日記は、部分部分に以下のようなクラス名（class属性値）が、自動的についてきます。
- 日記1日分……「day」（ソースは<div class="day">〜</div>）
- 日記本文……「body」（ソースは<div class="body">〜</div>）
- コメント部分……「comment」（ソースは<div class="comment">〜</div>）
だから毎日、同じような見た目の日記が作成されるという風にも言えます。
- 【補足】他の各部分のクラス名は、応用編「CSSセレクタ」が図説で参考になります。
■ span要素とclass属性
〜 <span class="sanchor">■</span></a> 〜
記事の見出しなどの中にspan要素があります。これも特に論理的な意味を持たない要素ですが、インライン要素です。
ひとつの段落の中で<span class="highlight">ここからここまで</span>といった感じで範囲を区切ります。これもclass属性でクラス名をつけていって、スタイルシートでその部分の見栄えを変更することができます。
- 見出しの「■」の部分……「sanchor」（ソースは<span class="sanchor">■</span>）
- コメントの「#」の部分……「canchor」（ソースは<span class="canchor">#</span>）
のようなクラス名になっています。自分で1からウェブページを書くときは、このクラス名は自分で決めていくものですが、はてなダイアリーではあらかじめ部分部分に名前がついているということです。
はてなダイアリーで自動挿入されるpタグとは（段落）
段落（paragraph）を示す「p要素」というのがあります。<p>と</p>のタグで囲まれた部分はひとつの段落を表し、その前後が改行されます。
はてなダイアリーの入力画面で改行した文章は、
このように<br>改行を<br>していくと
実はHTML文書としては
<p>このように</p>
<p>改行を</p>
<p>していくと</p>
のようになります。ウェブブラウザで日記のソースを見ると、たくさんのpタグが入っているでしょう。
各行にpタグが挿入され、どんなに短い文でも、前後が改行される段落になるわけです。
■ pタグの挿入を止める
ブロック要素の中で、p要素はその内容にブロック要素を含んではいけないタイプのものです。p要素の中身はすべてインライン要素でないといけません。
ところがはてなダイアリーは自動的にpタグを挿入してしまうので、自分でタグを書いているとこれを止めたいときが出てきます。見た目的にも、p要素挿入によってできる段落間が邪魔になることがあるかもしれません。（※タグではなく省略記法でブロック要素を作る場合は、pタグは挿入されません）
そこで回避方法として、タグの前（行頭）に「<strong>></strong>」を、終了タグの後に「<strong><</strong>」を記入するとpタグの挿入を止められます。
<strong>></strong><h6>小々々見出し</h6><strong><</strong>
や、
<strong>></strong><form method="POST" action="http://search.hatena.ne.jp/keyword">
<fieldset>
<legend>キーワード検索</legend>
<input type="text" name="word" value="" size="24"><input type="submit" name=".submit" value="検索">
</fieldset>
</form><strong><</strong>
のようにします。
- 【補足】ふだんから、1段落ごとの隙間をせまくしたいという場合ははてなダイアリーTipsスタイルシートでデザイン編【段落の前後のすき間をなくす方法】を使うほうが便利です。編集画面で3連続改行（2行空ける）すれば、brタグが挿入されます。
スタイルシートのためのまとめ
HTMLについて説明してきましたが、これでだいたいスタイルシートを書くための予備知識もできてきたのではないかと思います。おさらいしますと
というポイントを押さえていると、だいたいスタイルシートの説明に困らないんじゃないかなあと、思います。はてなダイアリーではHTMLタグを書く機会が限られるので、慣れるのがちょっとたいへんなのですが。
またHTMLのまとまった知識をここで伝え切るのは無理がありますので、勉強の際はWeb for beginner ホームページ作成支援のようなサイトをご覧ください。スタイルシートとHTMLを両方教えているサイトが良いと思います。あとはてなダイアリーはHTML4.01ですので、できれば4以降のバージョンのHTMLを説明している所が良いでしょう。
日記の中で使うタグ3に戻る← | →ヘッダやフッタに何かを入れる