《 other-tips 》
[SHORTCUT TO Notepad.exe]
ショートカットメニューの"送る"に"Notepad.exeへのショートカット"を加えるには、"SendToフォルダ" C¥(98(NECの"キューハチ"の方)の場合はA¥)Windows¥SendTo)内 (Windows2000の場合はC¥(98(NECの"キューハチ"の方)の場合はA¥)WINNT¥Documents and Settings¥xxx¥SendTo (xxx:ログインしたユーザー名) 内、WindowsXPの場合はC¥WINDOWS¥Documents and Settings¥xxx¥SendTo (xxx:ログインしたユーザー名) 内)に"Notepad.exeへのショートカット"を入れればいいのですが、一番簡単な方法は、
- "マイ コンピュータ"→"(C:)"(98(NECの"キューハチ"の方)の場合は"(A:)")→"Windowsフォルダ"(Windows2000の場合は"WINNTフォルダ")の順にダブルクリックし、
- "Notepad.exe"("Windowsフォルダ"内または"WINNTフォルダ"内にある)のアイコンをドラッグして"SendToフォルダ"上でドロップする
(WindowsME、Windows2000及びWindowsXPでは、"SendToフォルダ"は通常隠しフォルダになっているので、"ツール→フォルダオプション→表示"の詳細設定で、"隠しファイルおよび隠しフォルダを表示しない"のチェックをはずして下さい)
です。
(HTMLファイルの容量が大きすぎて"メモ帳"で編集できなくなった時に備えて、"Wordpad.exeへのショートカット"も一緒に加えておくと便利です。
("Wordpad.exe"は、C¥(98(NECの"キューハチ"の方)の場合はA¥)Program Files¥Accessories 内にあります。
(Windows2000の場合はC¥(98(NECの"キューハチ"の方)の場合はA¥)WINNT¥system32 内、WindowsXPの場合はC¥WINDOWS¥system32 内に"write.exe"の名前であります))
[OTHER OPENING WAY]
- "メモ帳"を起動し、"ファイル→開く"から目的のHTMLファイルを探す("デフォルト"では"ファイルの種類"が"テキスト文書"になっていると思いますが、"すべてのファイル"に直して下さい)
- ファイルを保存する時、"テキストファイル"(拡張子"txt"のファイル)でも保存しておき(ファイル名を"○○○.html.txt"としておくと便利)、次回からtxtファイルの方を書き直して"ファイル→上書き保存"をクリックした後、"ファイル→名前を付けて保存"でHTMLファイルに上書きしていく(BSキーで".txt"を消せばOK)
[ASCII CODE]
別名"特殊文字"ともいい、タグで使われる記号と同じ文字をブラウザー上に表示させる
ex)" → "
(私が最も好んで使っているコード(・・・使いすぎ?))
& → &
< → <
> → >
[SOURCE]
〔ソースの見方(ノンフレームページ)〕
"表示→ページのソース(ネットスケープ)orソース表示(IE)"をクリック
〔ソースの見方(フレームページ)〕
フレームの何も書いてない部分をクリック→右クリックしてショートカットメニューを出し、
"フレームのソースを表示"(ネットスケープ)or"ソースの表示(IE)"をクリック
〔HTMLファイルの保存方法(ノンフレームページ)〕
"ファイル→名前を付けて保存"をクリック
〔HTMLファイルの保存方法(フレームページ)〕
("フレーム指定ファイル"の保存方法(IEのみ有効))
ページ全体が表示された段階で"ファイル→名前を付けて保存"をクリック(すでにフレームのいずれかをクリック(して選択)していたら、"更新"ボタンを押してページを再読み込みして上記の操作を繰り返す)
(ネットスケープの場合は、キャッシュファイルを保存する方法もありますが、かなり面倒)
(フレーム中のHTMLファイルの保存方法)
フレームの何も書いてない部分をクリックし、"ファイル→フレームを名前を付けて保存"をクリック
(ネットスケープでは、"ファイル→名前を付けて保存"でも同じ結果になります。
また、IEの場合、バージョンによっては前者の方法が使えないので、フレームの何も書いてない部分をクリックし、
"ファイル→ソースの表示→'ファイル-名前を付けて保存'"
で保存して下さい)
(IE5の場合、"ファイル→名前を付けて保存-ファイルの種類:Webページ、完全"で保存すると、その時表示されているすべてのHTMLファイルが一度に保存できます。(ディレクトリ構造が実際のHPとは異なることもあります)
[IMAGE FILE]
HPでイメージファイルを使用するためには、当然、(デジタルの)イメージデータが必要です。
イメージデータを入手する方法としては、
- フォトCD
- デジカメ
- スキャナ
- ビデオ(の一コマ)
- 著作権フリーの素材集CD-ROM
- 著作権フリーの素材を無料でダウンロードできるサイト
- 自作のイメージ(もちろんパソコン上で描いたもの)
がありますが、費用、画質、手間などを考えると、まずフォトCDか著作権フリーの素材、余裕があればデジカメやスキャナも考慮、ということになるでしょう(---絵心のある人は、自分で描くのが一番手っ取り早いですが)。
[PHOTO CD]
"デジタルでないふつうのカメラ"で撮った写真のフィルムをデジタル化してCDに入れたもの。画質が良く、リーズナブルですが、カメラ店にCDを少なくとも約一週間(データを入れてもらう度)預けなければならないことが難点。
[DIGITAL CAMERA]
(特に)"日記"をUPしている人などにとっては必需品。削除ができ、"リアルタイム"なのが利点ですが、画質が低いタイプのものは、(モニタで見る分にはほとんど問題ありませんが)印刷には向きません。
[LOGO]
ロゴ(88*31ピクセルくらいのものは、リンクアイコン、バナーとも呼ばれる)はふつうgifにしますが、バックと文字の両方にグラデーションをかける時はjpegの方がきれいでファイルサイズも小さい(品質100%でも3.5Kぐらい(88*31ピクセルの場合))ので、両方のファイル形式で保存・比較してみてどちらを使うか決めて下さい。
(動画アイコンの場合は、gifを使うしかありませんが)
[THUMBNAIL]
主に"ギャラリー"のページなどで、クリックすると大画像にリンクするようにしてある(大画像を縮小した)小画像の"見本"。希望者にだけ大画像を見せ、ブラウズまでの待ち時間を縮めるために考え出されたテクニック。
(<A HREF="大画像のファイル名"><IMG SRC="サムネイルのファイル名"></A>)
(プログレッシブjpeg)
ネットスケープでは、ふつう、イメージは上から表示されていきますが、このオプションでjpegファイルを保存すると、最初にモザイクがかったようなイメージがブラウズされた後、次第に鮮明になってくるので、見に来てくれている人のイライラを軽減することができます。
(NN6とIEでは、データが全部読み込まれるまで全く画像が表示されないようです)
(インタレースgif)
プログレッシブjpegの"gif版"です(こちらは、NN, IE共有効)
(透過gif)
このオプションで保存すると、ブラウザ上で背景が透けて見えます。(例えば、タイトルロゴとか、四角形以外のリンクボタンなどによく使われます)
[透過GIF]

(通常のGIFファイル)

(透過GIFファイル)
["推奨ブラウザ"]
---"ネットスケープ3.0以上で見てね"とか、"IE3.0以上推奨"と書くべきかどうか、ということですが、これはケース・バイ・ケースだと思います。
特定のブラウザでしか見れないページの場合は絶対書くべきですが(もっとも、そういうページをUPすること自体、おすすめできませんが・・・)、難しいのは、"推奨ブラウザでないと、レイアウトが数段落ちる(と自分では思う)"など、いわゆる"グレーゾーン"の時です。
---基本的には、書きたければ書けばいいと思いますが、表現を一歩間違えると、"他のブラウザの人は見なくていいヨ"なんて受け取り方をされかねないので、気をつけましょう(無難なのは、"できれば~で見てほしいと思います"ぐらいでしょうか)。
〔"TAGS FOR NETSCAPE"〕*
<BLINK>~</BLINK> (NN3~NN6、NN7有効(NN6.1~NN7PR1無効))
文字が点滅します。
<SPACER TYPE="horizontal" SIZE="*"> (NN3, NC4のみ有効)
(*: ピクセル数)
水平(横)方向にスペースを作るタグ。
<SPACER TYPE="vertical" SIZE="*"> (NN3, NC4のみ有効)
(*: ピクセル数)
垂直(縦)方向にスペースを作るタグ。
<SPACER TYPE="block" WIDTH="*" HEIGHT="*"> (Netscape3.0~Netscape7PR1有効)
(*: ピクセル数)
四角形の(水平(横)方向・垂直(縦)方向同時に)スペースを作るタグ。
[TAGS FOR IE] (IE2.0以上有効)
(*:2022年現在、MARQUEEタグは、IEを含むほとんどのブラウザーで未だ有効のようです)
〔BGM〕
<BGSOUND SRC="file name">
(このタグは<BODY>に続けて(直下に)記述して下さい)
(利用できるファイル形式(file nameの拡張子): wav, au, midi(mid))
ページのブラウズ時にサウンドを鳴らします。(デフォルト: 1回)
(PCの環境・IEの設定によっては鳴らないこともあります)
("オプション")
<BGSOUND SRC="file name" LOOP=*> (*:整数)
サウンドの鳴る回数を指定します。
(ブラウザーによってはここをクリックした時に短いサウンドが5回鳴ったはずですが、このタグを使用しています。
(<BGSOUND SRC="1.wav" LOOP="5">))
<BGSOUND SRC="file name" LOOP=INFINITE>
BGMとしてサウンドが鳴り続けます。
〔MARQUEE〕
(下にサンプルがあります)
<MARQUEE>~</MARQUEE>
文字を横にスクロールさせることができます。(デフォルト: 右→左)
(他のタグと同時に使えますが、必ず一番内側に書いて下さい)
("オプション")
<MARQUEE DIRECTION=RIGHT>~</MARQUEE>
文字のスクロールの方向を逆(左→右)にします。
<MARQUEE BEHAVIOR=SLIDE>~</MARQUEE>
右から現れた文字が左端に達すると止まります。
<MARQUEE BEHAVIOR=ALTERNATE>~</MARQUEE>
文字が端から端へ行ったり来たりします。
<MARQUEE LOOP=*>~</MARQUEE> (*: 整数)
文字がスクロールする回数を指定します。(指定回数表示した後、文字は消えます)
<MARQUEE BGCOLOR="#******">~</MARQUEE> または <MARQUEE BGCOLOR="color name">~</MARQUEE>
(*: 0~9またはa~f "color name": 任意の色)
マーキーの部分の背景色を変えます。
<MARQUEE WIDTH="*">~</MARQUEE> または <MARQUEE WIDTH="n%">~</MARQUEE>
(*: ピクセル数 n: 整数)
マーキーの部分の幅を指定します。(デフォルト: 左側)
<MARQUEE SCROLLDELAY="n">~</MARQUEE>
(n: 整数)
マーキーが連続的にスクロールする速さを指定します。(デフォルト: 約88)
(数値が小さいほど速くスクロールします)
<MARQUEE SCROLLAMOUNT="*">~</MARQUEE>
(*: ピクセル数)
マーキーが一定時間毎に移動する速さと幅を指定します。
(数値が小さいほど速くスクロールし、あまりに速い場合は点滅して見えます)
ex) サンプル2
(sample 1)
<MARQUEE BGCOLOR="#ffffff">Welcome</MARQUEE>
<MARQUEE BGCOLOR="#ffff00" DIRECTION=RIGHT>to</MARQUEE>
<MARQUEE BGCOLOR="#ff0000" BEHAVIOR=ALTERNATE>my</MARQUEE>
<MARQUEE BGCOLOR="#00aaa1">HP!</MARQUEE>
↓
(ネットスケープでは、
Welcome to my HP!
と表示されるだけです)
(sample2)
<FONT SIZE="6"><MARQUEE WIDTH="33%" BGCOLOR="#ffffff">WELCOME!</MARQUEE></FONT>
<center><FONT COLOR="blue"><MARQUEE WIDTH="55%" HEIGHT="17px" BGCOLOR="#9999ff">WELCOME!</MARQUEE></FONT></center>
<DIV ALIGN="RIGHT"><FONT COLOR="#6c6c6c"><MARQUEE WIDTH="70%" BGCOLOR="#010101">WELCOME!</MARQUEE></FONT></DIV>
↓
(サンプルを見るとお分かりになると思いますが、高さは、フォントの大きさに応じてブラウザの方で決めてくれます(高さ(="HEIGHT")を指定した場合、文字の方が小さいと文字は上部をスクロールしていき、大きいと(指定にかかわらず)ブラウザの方で高さを自動的に調整します(フォントサイズの大きさを変えながら真ん中のブルーの"マーキー"を見て下さい))。また、"<MARQUEE BGCOLOR>"に"#000000"または"black"と指定しても背景色が変わらないようなので、背景を黒にしたい人は、サンプルのように"#010101"と記述して下さい)
((応用---MARQUEEを使用したIEでのBLINK(点滅)))
<MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="*" WIDTH="*">~</MARQUEE>
(*: ピクセル数 ~: 任意のテキスト)
"SCROLLAMOUNT"と"WIDTH"の数値をテキストの長さに合わせて決め(同じ数値にする)、"SCROLLDELAY"の値を"300"にすることによって、ネットスケープの"BLINK"とほぼ同じ速さで点滅させることができます。
["marqueeサンプル"]
こちらをクリックしてみて下さい。
美しい(?)マーキー("スクロール文字")が出ます。
(ムービーファイル(いわゆる"動画")は非常にファイル容量が大きいので(幅11センチ、高さ8センチくらいのもので1MB超すものもざら)、現状ではHPに使うのはちょっとキビシイものがあるのですが、一応タグだけ紹介したいと思います("検索"でAVIファイルを探して"ローカルテスト"してみて下さい))
<IMG DYNSRC="file name"> (拡張子: avi (または mov))
(データをダウンロードした時点で)ブラウザのウインドウ内でムービーを再生します。
(ファイルの作成状況などによっては再生しないこともあります)
<IMG DYNSRC="file name" SRC="file name2"> ("file name2": 画像ファイル(jpeg, gif, png))
データのダウンロードまでの間をつなぐため、また、PCやブラウザによってはムービーの再生機能をサポートしていないので(IEでブラウズしても、QuickTimeなどがインストールされていないPCでは再生できません)、代わりに静止画(いわゆるイメージ)を表示するタグ。
<IMG DYNSRC="file name" CONTROLS> (IEのバージョンによっては無効のこともあります)
(ビデオ映像の再生が終わった後、映像部分をクリック(または、映像部分をマウス右ボタンクリック→ショートカットメニューから"再生"を選択してクリック)、すると、再び再生を開始しますが、見ている人の中にはそれが分からない人もいるので、このオプションは書いた方がいいと思います)
再生をコントロールするための"レバー"を表示します。
(<A HREF="file name"> (拡張子: avi (または mov))
でもQuickTimeなどの自動起動でムービー再生が可能ですが、一部のブラウザでは拡張子"mov"のファイルの場合、リンクをクリックするとフリーズしてしまうことがあります)
(マルチメディア対応のパソコンであれば、ビデオキャプチャーボード(TV画像やビデオテープ、アナログ式のビデオカメラで撮影した動画を画像をパソコン内に取り込むための装置)があらかじめ内蔵されているようですが、もしこの機能が入っていない時は、キャプチャーカードと対応ソフトを購入して下さい)
¦ tags ¦
[TAG]
HTMLファイルをブラウザで表示した時に、どのようにブラウズするかを指示する"記号"。目的のテキストやイメージを挟んだ状態で使う"ペアタグ"と、"その場のみ有効"で単独で使う"エンプティタグ"がある。
(詳しくは"tags"参照)
[FILE NAME]
ファイル名は、半角英数字で付けて下さい。---全角文字を使ったファイル名の場合、ブラウザによっては表示されないこともあります。
(WindowsやMacはファイル名が大文字でも小文字でも同じファイルとみなしますが、WWWサーバ側("HPのUP先"---詳しくは"upload"を見て下さい)のコンピューターは大文字と小文字を区別するので(例えば、タグの方が<IMG SRC="ROOM.jpg">でファイル名が"room.jpg"だと、違うファイルとみなし、ブラウズされません)、ファイル名には極力気をつけて下さい(プロバイダから指示のない限り、小文字で統一することをおすすめします)。また、スペースの入ったファイル名("my room.jpg"など)も認識しないので、スペースを入れないようにして下さい(---サーバ側で使っているUNIXというOSは、優秀すぎて融通がきかないみたいです))
(Note:
ファイル名(というよりURL)で使ってはいけない文字
[ ] { } < > | \ ^ ` name指定以外の# 16進数表記以外の%
(その他、 ( ) もいろいろ問題が起きることがあるので、避けて下さい。---なお、~ (チルダ)もかつて使ってはいけない文字だったのですが、最近OKになったようです。(その名残で、時折、~ (チルダ)のかわりに"%7E"と書かれたURLを見かけたりすることもあります。---もちろん、こちらの書き方も有効です))
<BODY BACKGROUND="file name.gif">または<BODY BACKGROUND="file name.jpg">
背景パターンを表示します。"file name"には、背景パターンに使いたいイメージのファイル名を入れて下さい。
(詳しくは"tags"参照)
<BODY BGCOLOR="#******">または<BODY BGCOLOR="color name">
(*:0~9またはa~f "color name": 任意の色) ( ex)"silver")
背景色を変えます。
("BACKGROUND"と"BGCOLOR"の両方が指定されている場合、"BACKGROUND"が優先で表示されますが、イメージがブラウズされるまでの間、また、サーバーの不調, etc.でイメージがブラウズされなかったりすると、見ている人がグレーまたは白の背景しか見れなくなるので、"BGCOLOR"も必ず指定しておきましょう)
(特に、テキスト(文字)の色が白や黄色などの時、"<BODY BGCOLOR>指定"(もちろん、テキストがちゃんと読めるような背景色で)がないと"悲惨"です))
<BODY TEXT="#******">または<BODY TEXT="color name">
(*:0~9またはa~f "color name": 任意の色)
ページ全体の基本文字色を決めます。
<BODY LINK="#******">または<BODY LINK="color name">
(*:0~9またはa~f "color name": 任意の色)
リンク先(他のファイルまたはURL)へジャンプするためのボタンの色を決めます。
<BODY VLINK="#******">または<BODY VLINK="color name">
(*:0~9またはa~f "color name": 任意の色)
リンクボタンをクリックした後、指定した色に変化します。
(カラー指定)
HPに"<COLOR>タグ"で色を付けるには、16進法の数値 & アルファベット(0~9およびa~f)で色を指定する方法と、直接color name("blue"とか"green"など)を指定する方法があります。
(詳しくは"tags"参照)
<IMG SRC="file name">
イメージファイルを表示するタグ。
(詳しくは"tags"参照)
<IMG SRC="file name" WIDTH="*" HEIGHT="*">
(*: ピクセル数)
(オリジナルのイメージの大きさに関係なく)指定された大きさ(WIDTH=幅、HEIGHT=高さ)でブラウザに表示されます。
(詳しくは"tags"参照)
<BR>
行変えのタグ。
<P>
段落変えを行うタグ(本来は<P>~</P>(~:任意のテキスト)ですが、</P>は省略可)で、自動的に一行スペースが入ります。
(<BR>は書いた数だけ行間が空きますが、<P>はいくつ書いても一行しか空きません)
<HR>
罫線(横線)を表示するタグ。このタグの前後は、自動的に改行されます。
(詳しくは"tags"参照)
<H*>~</H*>
(*: 1~6)
見出しを作るタグ。文字は太字となり、自動的に改行されます。大きさは6段階で、数字が小さいほど大きく表示されます。
(NetscapeとIEでは大きさが異なります)
<FONT SIZE="*">~</FONT>
(*: 1~7)
フォントサイズを(部分的に)変更します。大きさは7段階で、数字が大きいほど大きく表示されます。
(詳しくは"tags"参照)
<center>~</center>
テキストやイメージを中央揃えで表示するタグ。
(このタグの前後は、自動的に改行されます)
<PRE>~</PRE>
記述したテキスト通りに表示します。(このタグの前後は、それぞれ一行ずつ空きます)
(詳しくは"tags"参照)
〔"LINK TAG"〕
[DIRECTORY]
ファイルが異なるディレクトリにある場合、<IMG SRC="file name">のような書き方では表示されません。
(ブラウザが、同じディレクトリ内にファイルがあると仮定して探し、(当然)見つけ出せないため)
---異なるディレクトリのファイルにリンクする場合、フルパスで指定する方法と、相対パスで指定する方法がありますが、"フルパス指定='URL'(http://www.xxx.ne.jp/ などと書くもの---階層が深かったりする場合、同一HP内でもこちらの方が便利なことも・・・)"なので、ここでは相対パスについて解説します。
(一階層下にリンクする時:
<A HREF="directory name/file name">~</A>
(一階層上にリンクする時:
<A HREF="../file name">~</A>
ex) (青字はフォルダ)
hp ----- index.html
|
|-- info.html
|
|-- link -- link.html
|
--- image -- logo.gif
- index.html → info.html
<A HREF="info.html">next</A>
(通常のリンク)
- index.html → link.html
<A HREF="link/link.html">link</A>
"index.html"から見て"link.html"は一階層下("link"フォルダの下)にあるので、このように書きます。
- link.html → index.html
<A HREF="../index.html">back</A>
2.とは逆に、"link.html"から見て"index.html"は一階層上("link"フォルダの上)にあるので、このように書きます。
(ちなみに、階層が2つ上の場合は、<A HREF="../../file name">~</A>のように書きます。
(3つ以上の場合も同様に"../"を増やしていけばOKですが、フルパスで書いた方が早いですね・・・))
- link.html → logo.gif
<IMG SRC="../image/logo.gif">
いったん一階層上がり、それから一階層下がる形になるので、このように書きます。
<A HREF="mailto:e-mail address">~</A>
あらかじめ指定したメールアドレスの入ったメールウインドウが開かれます。
(詳しくは"tags"参照)
[sample 2]
((ソース))
ブラウザーによってはセルの中身を空にすると凹んでしまうため、セルと同色のピリオドを入れています。
("<FONT COLOR>"は省略しています)
↓
<TABLE BORDER="3" BORDERCOLOR="#ccccd1"
BORDERCOLORDARK="#888891"><TR><TH></TH>
<TH WIDTH="90">寒色系</TH><TH WIDTH="70">暖色系</TH></TR>
<TR><TH HEIGHT="20">私の好きな色</TH><TD BGCOLOR="#00aaa1">.</TD>
<TD BGCOLOR="#fffffa">.</TD></TR>
<TR><TH>きらいな色</TH><TD BGCOLOR="#000099">.</TD>
<TD BGCOLOR="#ff00aa">.</TD></TR></TABLE>
[sample 3]
[My taste of colors] | 寒色系 | 暖色系 |
---|
私の好きな色 | . | . | . | . |
---|
きらいな色 | . | . | . | . |
---|
((ソース))
("<FONT COLOR>"は省略しています)
↓
<TABLE BORDER="3" BORDERCOLOR="#ccccd1" BORDERCOLORDARK="#888891">
<CAPTION ALIGN="top">[My taste of colors]</CAPTION>
<TR><TH></TH><TH WIDTH="90" COLSPAN="2">寒色系</TH>
<TH WIDTH="70" COLSPAN="2">暖色系</TH></TR>
<TR><TH>私の好きな色</TH><TD BGCOLOR="#3366ff">.</TD>
<TD BGCOLOR="#52b8a4">.</TD>
<TD BGCOLOR="#fffffa">.</TD><TD BGCOLOR="#ff0068">.</TD></TR>
<TR><TH>きらいな色</TH><TD BGCOLOR="#000099">.</TD>
<TD BGCOLOR="#228b22">.</TD><TD BGCOLOR="#f0e68c">.</TD>
<TD BGCOLOR="#ff00aa">.</TD></TR></TABLE>