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

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

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

ここからHTMLのタグだとかCSSについて解説していこうと思っていましたが・・・

@rashita2 今更ですが、第１回で紹介されたテンプレートの１つを実際に作成する過程で説明していくHow to 形式だと、とっつきやすいかも…。作るの超面倒ですが。Thu Aug 11 04:20:57 via Echofonあおのうま
uma_blue

というコメントを頂いたので、そっちの方向にシフトします。ビバ、フレキシブル！

背景の色を変えたノート

今回は、背景色を変えたノートを作っていきます。

目標とするのは次のようなノート。サンプルでは色はピンクですが、もちろん自分の好みで選択できます。

今回使うHTMLタグは＜DIV＞です。文字列なんかを追加するのに使えるブロック要素です。

ブロック要素って何か？という質問にはお答えしませんが、インライン要素とブロック要素というのがあるということは、頭の片隅にでも置いておくとよいかもしれません。同種のタグでは＜P＞というタグがあるのですが、こいつは要素の前後に勝手に改行を追加してしまうので、テンプレ作りにはあまり活用できません。

ノートの背景色を変えるには、HTMLの骨子に＜DIV＞を追加し、その背景色を変更すればOKです。

まずは、以下のようなコードを書いてみましょう。でもって拡張子を.htmlにして適当に名前を付けて保存し、それをブラウザで開きEvernoteにクリップします。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;">テスト</div>
</body>
</html>

出来上がるのは、こんな感じのノートです。全然テンプレ風ではありませんが、まずはスタート。

DIVでこっから文字列を始めますよ〜と宣言して、その中のstyleで装飾を指定しています。今回使ったのはbackgroud-colorという背景色を指定するスタイルシートです。

上に書いた”#”の部分が色の指定になっています。これはRGB指定と呼ばれるものです。他にも色の指定法はありますが、今回はこの方式で行きます。

RGBはそれぞれRed、Green、Blueの頭文字です。＃以降の文字列はRRGGBBというカンジで二つの文字でそれぞれの色を担当します。ちなみに、この文字列は16進数で、９の次がA（つまり１０を意味する）、Aの次がBで、一番大きいのがFという文字です。

なので、#FF0000というのは、純粋な赤色を、#0000FFは青色を意味します。#000000と書けば黒色、#FFFFFFは白色になります。この辺は「カラーチャート」というキーワードで、グーグル先生にお伺いを立てれば、好みの色をRGB指定に置き換えるのは難しくありません。

縦幅を拡大

上記のサンプルだと、あまりにも表示が寂しいので縦幅を拡大してみます。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;height:700px">テスト</div>
</body>
</html>

heightというのが縦幅を指定する部分です。７００px（ピクセル）を指定していしてみました。これを保存して、ブラウザで読み込めば色つきの部分が伸びたものが表示されるはずです。

ご覧のように、スタイルシートの要素と要素の間はは「;」で区切ります。また要素名とその指定の間は「:」で区切ります。プログラマーでない方は、これをよく間違える注意してください。
※ちゃんとしたHTMLエディタだったら入力補助が付いているとは思いますが。

以上で完成・・・なように見えますが、上のページをクリップしたノートに直接記入してみてください。改行を押すと、ものすごい下にまでカーソルが飛ぶと思います。完全に失敗です。

これが起きる内部的な理由の説明は割愛しますが、要するに上のやり方ではノートのテンプレとしては使えません。実際は次のようにします。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;height:700px">
<div>テスト</div>
</div>
</body>
</html>

＜DIV＞タグの中にもう一つ＜DIV＞タグを入れる。このバージョンをブラウザで表示させ、クリップしてみてください。これだと問題無く記入できるはずです。

わざわざ回りくどい説明をしたのは、自作でノートテンプレを作る場合、この特徴を踏まえておくのがとても大切だからです。＜DIV＞タグなどの中で改行された場合、どうも同じタグを複製して追加するようです。この特徴を使った工夫もありますが、それはまた別の回に譲ります。

ちなみに、ある程度HTMLの知識がある人ならば、backbround-colorを＜Body＞タグに適用すればいいんじゃないのか、という疑問を持たれるかもしれませんが、残念ながらクリップ時に＜Body＞タグは華麗にスルーされる仕様なので、その方法は不可です。逆に言うと、＜Body＞タグの代わりになる＜DIV＞タグを作るということですが、まあこのあたりの話は別にいいですね。

画面一杯にする

上の色つき用紙のテンプレートで、とりあえずは完成ですが端の方に余白が空いてしまっていると思います。これがどうにもうっとうしいということならば、それを詰めることもできます。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;margin-left:-8px;margin-top:-8px;width:102.5%;height:700px">
<div>テスト</div>
</div>
</body>
</html>

実際の数字は、画面とか解像度とかで違ってくるかもしれませんので、適当に調整してください。marginというのは余白を指定するスタイルシートで、それをマイナス方向に（余白を詰めるように）指定してあります。右に詰めると逆に左部分が空いてしまうので、幅（width)を広げることで対応してあります。