HTMLでEvernoteのノート・テンプレートを作る第二回

連載ものです。過去のエントリーはこちら。

第一回では、HTMLファイルの簡単な骨組みを紹介しました。これに肉付けしていくことで、好みのノートをつくっていきます。

そのために最低限必要な知識がHTMLのタグとスタイルシートです。今回はこの二つについて。

HTMLタグ

第一回目に紹介した、次のような形の書式がHTMLタグです。＜＞で囲まれているのがタグで、＜/＞となっているのが閉じ（終了）タグ。

<html>
<head>
<title>ノートのタイトルになる部分</title>
</head>
<body>
ここに内容を追記していくのさっ（鶴屋さん風）
</body>
</html>

ノートに要素を追加していく時は、この＜＞で囲まれた文字列を追記していきます。具体的にどのような文字列があるのかはまた別の回にて紹介します。

これらはあくまで表示する要素を指定するだけです。こういう文章を追加する、表組みを入れる、といった構造のパーツを書き出すものです。

ただ、そのままでは見た目があまりにもショボいので、スタイルシートと呼ばれるものを使って、見栄えを変えていくことになります。

スタイルシート

HTML関連では、CSS（カスケーディング・スタイルシート）という呼び方がなじみがあるかもしれません。これは、HTML要素をどのように修飾（表示）するかを指示するものです。例えば、背景の色や、フォントサイズの指定といった見栄えを調整することができます。

このCSSの指定方法はいくつかあるのですが、今回のテンプレ作りでは、直接指定のみを扱います。本来、文書の構造と体裁を分離させるというのがCSSの役割ですが、Evernoteのテンプレ作りにそういう「役割」みたいなことを考えても仕方がないので、華麗にスルーしておきます。
※一連のやり方で紹介する方法でWebページを作るのはまったく効率的ではないので、必要な方は別途CSSを勉強してください。

スタイルシートの実例は、以下のような感じ。style=から始まって;”で終わっている部分までがスタイルシートです。背景色をFF00FFに変えろという指示が書かれています。この辺の詳しいことはまた別の回にて。

<div style=”background-color:#FF00FF;”>
ここに内容を追記していくのさっ（鶴屋さん風）
</div>