2006.07.20
HTML先頭につぎのDOCTYPE（ＭＴ標準の記述）があると、トップページに表示しているマウス追随の時計の内側の文字盤が消える。外側の緑色の部分だけが表示される。なぜかは知らない。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2006-07-15
・ＭＴを3.31-jaにアップグレード(一年ぶり）
・サポートは「2007年6月末に打ち切り」との通告あり
ブラウザや検索ロボットに文書に関する情報（メタ情報）を知らせるために指定する。制作者やキーワードなどの情報をname属性で定義して、その値をcontent属性で指定する。必ず<HEAD>〜</HEAD>間に記述する。
文書の文字コードを指定する。文字化け防止のために指定しておく方が良い。｢シフトJIS｣の場合は｢shift_jis｣、｢EUC｣の場合は｢EUC-jp｣、｢JIS｣の場合は｢iso-2022-jp｣を指定する。文書内に日本語が現れる前に指定する。
文書で使うスタイルシート言語を指定する。 タグに直接style属性でスタイルシートを指定する場合などに、ここで指定した言語であると解釈される。
スクリプト言語の指定。多くの場合これらの指定をしなくてもブラウザが自動的に判断するが、誤動作を避けるために指定しておく方が良い。
文書の要約を書く。検索エンジンが読んでサーチ結果のコメント部に使うかもしれない。
文書のキーワードを書く。ここで指定した値は多くの検索エンジンで利用されるので、慎重に言葉を選ぶ。検索の対象になる可能性が高まる。
検索ロボットがこの文書を登録しないように（noindex）、また文書内のリンクをたどらないように（nofollow）指定する。この指定は、この情報を参照する紳士的な検索ロボットに対してのみ有効である。
文書がブラウザにキャッシュされないようにする。※HTTP1.0の場合pragma、HTTP1.1の場合cache-controlを使う。
文書のキャッシュが消去される時刻をexpiresで指定する。
※上の例ではグリニッジ標準時2007年8月31日12時00分00秒にキャッシュが消えるように指定している。
5秒後にstart.htmに自動的にジャンプする。 ジャンプ先urlを指定しない場合は、その文書を再読み込みする。IE3.0/NN2.0よりサポートされている。
その文書の作者（author）を指定する。
その文書の著作権者を指定する。著作権表示をしなくても、日本を含む多くの国では法律上著作権が生じる。
<font face="江戸勘亭流Ｐ" color=#ff0000 size=4>文字のフォント、色、大きさを指定する</font>
大きさを絶対値（ピクセルやポイントなど）で指定するときはstyleを使う。
<font style="font-size : 16pt;">１6ポイントの大きさ</font>
その他の例
<font style="font-face:Verdana; font-size:12pt; font-weight:bold; color:green;">
| § | ¶ | © | ® | £ | ¢ | € | « | » | ¹ | ² | ¼ | ½ | ª |
| § | ¶ | © | ® | £ | ¢ | € | « | » | ¹ | ² | ¼ | ½ | ª |
<div style="width: 100%; filter: glow(color=red,strength=5);"><font face="江戸勘亭流Ｐ" color=#ffff00 style="font-size: 14pt;">燃える文字</font></div>
<dl>
<dd><FONT color=green>■</FONT>どんな項目 </dd>
<dd><FONT color=red>■</FONT>こんな項目</dd>
</dl>
<P style="margin-left:2em">左マージンの指定 ２文字</p>
段落の文字色を指定するとき、スタイルシートに ".red{ color : red; }" と記述して本文で次のように書く。。
<P class="red">ホットな内容を赤い文字で示す段落</p>
Pタグで直接styleを指定しても良い。
<p style="color : red;">直接指定する</p>
通常の段落の一部でも<SPAN class="blue">クールな内容は青。</span>のように文字色を指定できる。
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta name="robots" content="noindex,nofollow">
<meta name="googlebot" content="nosnippet">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="refresh" content="3; url=http://elmblog.com/right.php">
<script language="javascript" src="http://elmblog.com/script.js"></script>
<script language="javascript" src="script.js"></script>
<BODY onload="window.resizeTo(300,300);">
<A onclick="window.open('sample01.html','min1','toolbar=0,location=0,directories=0,status=0, menubar=0,scrollbars=0,resizable=0,width=200,height=100')">Sample</A>
<a href="#" onclick="window.open('./chat/','chat','width=400,height=300');">WebChat</a>
<A href=# onclick="window.open('sample03.html','min2','left=50,top=50')">Sample</A>
<meta http-equiv="refresh" content="3; url=http://elmblog.com/right.php">
<A id="no" href="javascript:history.back()" target="_top">[BACK] </A><A id="no" href="javascript:window.close()">[CLOSE]</A>
ブラウザー画面の一番下にあるステータス・バーを見てください。下記のJavaScriptのなかのvar m1〜var m3で指定したテキスト・メッセージが左に流れて表示されます。表示されていないときは、ブラウザーのメニューバー「表示(V)」の中の「ステータスバー(B)」をクリックしてチェックをつけてください。
流れる速さを変えたいときは、「var speed=700」の数字を変えます。数字の単位はミリ秒で、この例では700ミリ秒（0.7秒）になっています。数字が小さいほど早く流れます。
時刻に応じて異なるメッセージを表示する。つぎのスクリプトを表示したい位置に書く。
【例】 お疲れ様です。深夜0時です。
<SCRIPT type="text/JavaScript">
<!--
now = new Date();
hh = now.getHours();
switch(hh){
case 0:msg="お疲れ様です。深夜0時です。 ";break;
case 1:msg="お疲れ様です。1時です。 ";break;
case 2:msg="お疲れ様です。2時です。 ";break;
case 3:msg="お疲れ様です。3時です。 ";break;
case 4:msg="お疲れ様です。4時です。 ";break;
case 5:msg="おはようございます。5時です。 ";break;
case 6:msg="おはようございます。6時です。 ";break;
case 7:msg="おはようございます。7時です。 ";break;
case 8:msg="おはようございます。8時です。 ";break;
case 9:msg="おはようございます。9時です。 ";break;
case 10:msg="おはようございます。10時です。 ";break;
case 11:msg="こんにちは。11時です。 ";break;
case 12:msg="こんにちは。お昼です。 ";break;
case 13:msg="こんにちは。13時です。 ";break;
case 14:msg="こんにちは。14時です。 ";break;
case 15:msg="こんにちは。15時です。 ";break;
case 16:msg="こんにちは。16時です。 ";break;
case 17:msg="こんにちは。17時です。 ";break;
case 18:msg="こんばんは。18時です。 ";break;
case 19:msg="こんばんは。19時です。 ";break;
case 20:msg="こんばんは。20時です。 ";break;
case 21:msg="こんばんは。21時です。 ";break;
case 22:msg="お疲れ様です。22時です。 ";break;
case 23:msg="お疲れ様です。23時です。 ";break;
}
document.write(msg);
//-->
</SCRIPT>
| ||||||
|
| ||||||
| ||||||
|
| ||||||
| ||||||
|
| ||||||
function RunFoo()
{
document.write('<object classid="clsid:D27CDB6E..." ...>\n');
document.write('<param name="movie" value="foo.swf" />\n');
document.write('</object>\n');
}
HTMLファイルの<head>セクションにfoo.jsの呼び出しを追加する。
<script src="[path]/foo.js" type="text/javascript"></script>
元の<object>タグを、外部ファイルの関数呼び出しに置き換える。
<script type="text/javascript">RunFoo();</script>
Fieldeast社が配布しているフリーウェアFE-Color Palette ≫Download lzh(40kb) がおすすめ。ホームページを作っているとき、色使いに悩むことがある。文字や背景の色と対応するHTML色コードの一覧（Color Table）を使うと良い。しかし、作成のたびに色コードをColor Tableから選択するのも面倒くさくなってくる…。画面に表示されている気に入った色を使いたいが、Color Tableにない…。そんなときに便利なのがFE-Color Paletteである。
| Name | Code | Glyph | Description |
|---|---|---|---|
| ‘ | ‘ | left single quote | |
| ’ | ’ | right single quote | |
| ‚ | ? | single low-9 quote | |
| “ | “ | left double quote | |
| ” | ” | right double quote | |
| „ | ? | double low-9 quote | |
| † | † | dagger | |
| ‡ | ‡ | double dagger | |
| ‰ | ‰ | per mill sign | |
| ‹ | ? | single left-pointing angle quote | |
| › | ? | single right-pointing angle quote | |
| ♠ | ? | black spade suit | |
| ♣ | ? | black club suit | |
| ♥ | ? | black heart suit | |
| ← | ← | leftward arrow | |
| ↑ | ↑ | upward arrow | |
| → | → | rightward arrow | |
| ↓ | ↓ | downward arrow | |
| ™ | ? | trademark sign | |
| Name | Code | Glyph | Description |
| 	 | horizontal tab | ||
| | line feed | ||
|   | space | ||
| ! | ! | exclamation mark | |
| " | " | " | double quotation mark |
| # | # | number sign | |
| $ | $ | dollar sign | |
| % | % | percent sign | |
| & | & | & | ampersand |
| ' | ' | apostrophe | |
| ( | ( | left parenthesis | |
| ) | ) | right parenthesis | |
| * | * | asterisk | |
| + | + | plus sign | |
| , | , | comma | |
| - | - | hyphen | |
| . | . | period | |
| Name | Code | Glyph | Description |
| ⁄ | / | / | slash |
| 0- 9 |
digits 0-9 | ||
| : | : | colon | |
| ; | ; | semicolon | |
| < | < | < | less-than sign |
| = | = | equals sign | |
| > | > | > | greater-than sign |
| ? | ? | question mark | |
| @ | @ | at sign | |
| A- Z |
uppercase letters A-Z | ||
| [ | [ | left square bracket | |
| \ | \ | backslash | |
| ] | ] | right square bracket | |
| ^ | ^ | caret | |
| _ | _ | horizontal bar (underscore) | |
| ` | ` | grave accent | |
| a- z |
lowercase letters a-z | ||
| { | { | left curly brace | |
| | | | | vertical bar | |
| Name | Code | Glyph | Description |
| } | } | right curly brace | |
| ~ | ~ | tilde | |
| – | – | ? | en dash |
| — | — | ? | em dash |
| |   | nonbreaking space | |
| ¡ | ¡ | ! | inverted exclamation |
| ¢ | ¢ | ¢ | cent sign |
| £ | £ | £ | pound sterling |
| ¤ | ¤ | ? | general currency sign |
| ¥ | ¥ | \ | yen sign |
| &brkbar; | ¦ | | | broken vertical bar (¦) |
| § | § | § | section sign |
| ¨ | ¨ | ¨ | umlaut (¨) |
| © | © | c | copyright |
| ª | ª | a | feminine ordinal |
| « | « | ≪ | left angle quote |
| ¬ | ¬ | ¬ | not sign |
| ­ | ­ | - | soft hyphen |
| ® | ® | R | registered trademark |
| &hibar; | ¯ | ￣ | macron accent (¯) |
| Name | Code | Glyph | Description |
| ° | ° | ° | degree sign |
| ± | ± | ± | plus or minus |
| ² | ² | 2 | superscript two |
| ³ | ³ | 3 | superscript three |
| ´ | ´ | ´ | acute accent |
| µ | µ | μ | micro sign |
| ¶ | ¶ | ¶ | paragraph sign |
| · | · | ・ | middle dot |
| ¸ | ¸ | ， | cedilla |
| ¹ | ¹ | 1 | superscript one |
| º | º | o | masculine ordinal |
| » | » | ≫ | right angle quote |
| ¼ | ¼ | ? | one-fourth |
| ½ | ½ | ? | one-half |
| ¾ | ¾ | ? | three-fourths |
| ¿ | ¿ | ? | inverted question mark |
| À | À | A | uppercase A, grave accent |
| Á | Á | A | uppercase A, acute accent |
| Â | Â | A | uppercase A, circumflex accent |
| Name | Code | Glyph | Description |
| Ã | Ã | A | uppercase A, tilde |
| Ä | Ä | A | uppercase A, umlaut |
| Å | Å | A | uppercase A, ring |
| Æ | Æ | A | uppercase AE |
| Ç | Ç | C | uppercase C, cedilla |
| È | È | E | uppercase E, grave accent |
| É | É | E | uppercase E, acute accent |
| Ê | Ê | E | uppercase E, circumflex accent |
| Ë | Ë | E | uppercase E, umlaut |
| Ì | Ì | I | uppercase I, grave accent |
| Í | Í | I | uppercase I, acute accent |
| Î | Î | I | uppercase I, circumflex accent |
| Ï | Ï | I | uppercase I, umlaut |
| Ð | Ð | D | uppercase Eth, Icelandic |
| Ñ | Ñ | N | uppercase N, tilde |
| Ò | Ò | O | uppercase O, grave accent |
| Ó | Ó | O | uppercase O, acute accent |
| Ô | Ô | O | uppercase O, circumflex accent |
| Õ | Õ | O | uppercase O, tilde |
| Name | Code | Glyph | Description |
| Ö | Ö | O | uppercase O, umlaut |
| × | × | × | multiplication sign |
| Ø | Ø | O | uppercase O, slash |
| Ù | Ù | U | uppercase U, grave accent |
| Ú | Ú | U | uppercase U, acute accent |
| Û | Û | U | uppercase U, circumflex accent |
| Ü | Ü | U | uppercase U, umlaut |
| Ý | Ý | Y | uppercase Y, acute accent |
| Þ | Þ | T | uppercase THORN, Icelandic |
| ß | ß | s | lowercase sharps, German |
| à | à | a | lowercase a, grave accent |
| á | á | a | lowercase a, acute accent |
| â | â | a | lowercase a, circumflex accent |
| ã | ã | a | lowercase a, tilde |
| ä | ä | a | lowercase a, umlaut |
| å | å | a | lowercase a, ring |
| æ | æ | a | lowercase ae |
| ç | ç | c | lowercase c, cedilla |
| è | è | e | lowercase e, grave accent |
| Name | Code | Glyph | Description |
| é | é | e | lowercase e, acute accent |
| ê | ê | e | lowercase e, circumflex accent |
| ë | ë | e | lowercase e, umlaut |
| ì | ì | i | lowercase i, grave accent |
| í | í | i | lowercase i, acute accent |
| î | î | i | lowercase i, circumflex accent |
| ï | ï | i | lowercase i, umlaut |
| ð | ð | d | lowercase eth, Icelandic |
| ñ | ñ | n | lowercase n, tilde |
| ò | ò | o | lowercase o, grave accent |
| ó | ó | o | lowercase o, acute accent |
| ô | ô | o | lowercase o, circumflex accent |
| õ | õ | o | lowercase o, tilde |
| ö | ö | o | lowercase o, umlaut |
| ÷ | ÷ | ÷ | division sign |
| ø | ø | o | lowercase o, slash |
| ù | ù | u | lowercase u, grave accent |
| ú | ú | u | lowercase u, acute accent |
| û | û | u | lowercase u, circumflex accent |
| Name | Code | Glyph | Description |
| ü | ü | u | lowercase u, umlaut |
| ý | ý | y | lowercase y, acute accent |
| þ | þ | t | lowercase thorn, Icelandic |
| ÿ | ÿ | y | lowercase y, umlaut |
ここではWeb制作に役立つソフトウェアを紹介します。いずれも無料配布されているもので、個人が非営利目的で使用することができます。ただし著作権は放棄されていませんので使用するときは必ず原著作者のサイトで確認してください。
| ■Accelyzer # | アクセス解析用phpスクリプト…直近の訪問者、ホスト/OS統計情報やアクセス数を集計しグラフ化するツール |
| ■Cipher | 暗号化ソフトウェア Chaky、Crypt、アタッシェケースが無料配布されている。 |
| ■ColorPalette | 好きな色を作成でき、また画面上の色に対応するコードを簡単に知ることができる。 |
| ■Win高速化PC+ | Windowsをボタンひとつで高速化するツール |
| ■縮小専用 | 画像の縮小が簡単にできる。 |
| ■すなねぃる!! | 画像一覧やｽﾗｲﾄﾞを簡単に作成できる。 |
| ■MKEditor | フリーソフトのテクストエディター |
| ■サクラエディタ | オープンソースの日本語テクストエディター |
| ■英日・日英翻訳 | Ｗｅｂ上で簡単にテクスト翻訳、Ｗｅｂページおよびホームページの翻訳ができるExciteサービス。 |
| ■PHPSlideShow | 画像があるフォルダーに保存するだけでスライドショウが可能(GPL) |
| ■PicturePackage Producer |
縦横の動き（パン）やズーム効果およびBGMを加えたスライドショー(mpg形式)が簡単に作れる。ムービーの形式やBGMをテンプレートから選択できる。個々の写真の効果は指定できない。(Sony Cyber Shot DSC-T9付属ソフト) |
| ■ Photo Story 3 | 写真ごとにアニメーション効果やタイトルをつけることができる。写真の順番もドラッグ＆ドロップで変更でき、スライドショーの流れに沿ってナレーションを吹き込むことができる。 |
モバイル用ストーレッジとしてUSB接続のClipdriveを愛用している。ただひとつ不便なのはそのセキュリティロックに時間がかかることである。最初の頃はセキュリティがあるため、内部資料の持ち運びも安心なのでロックをかける手間も苦にならなかったが、毎日何回かロック／アンロックをするのがだんだん面倒になってきた。格納ファイルの一部が機密を要する内容でも全部のロックをかけるのも面倒なものである。ファイルあるいはフォルダー単位で簡単に暗号化できるソフトウェアを使うことにして、特に機密を要するものはClipdriveのセキュリティも使って二重に保護することにした。
MidiPlayerとWeb_Jukeがある。前者はJavaスクリプト、後者はPerlで書かれている。一長一短だが基本はおなじである。自動演奏だけのシンプルなJavaスクリプトもある。