About   Code   Homepage   JavaScript   Memo   MT   PHP   Study   Tools   Vista   

≪2004ー2005に作成した学習手帳をMTに移行中≫
 WEB制作について学習した結果をまとめた。再利用するときに、その昨日・内容や変更の仕方を忘れていることが多いので備忘録として例題を中心に整理した。

≪訪問者の方へ≫

 ここは管理人用ですが自由に閲覧していただいて結構です。参考になることもあると思いますが、個々の例題の内容や作り方は説明していません。WEB制作に際して参考にさせてもらったサイトのリンク集があるので、そちらを参照してください。参考にさせていただいたサイトの制作者にはこの場を借りて感謝いたします。

続きを読む "学習手帳" »

ブラウザや検索ロボットに文書に関する情報(メタ情報)を知らせるために指定する。制作者やキーワードなどの情報をname属性で定義して、その値をcontent属性で指定する。必ず<HEAD>〜</HEAD>間に記述する。

文字コード

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

文書の文字コードを指定する。文字化け防止のために指定しておく方が良い。「シフトJIS」の場合は「shift_jis」、「EUC」の場合は「EUC-jp」、「JIS」の場合は「iso-2022-jp」を指定する。文書内に日本語が現れる前に指定する。

基準となる言語の指定

<meta http-equiv="Content-Style-Type" content="text/css">

文書で使うスタイルシート言語を指定する。 タグに直接style属性でスタイルシートを指定する場合などに、ここで指定した言語であると解釈される。  

<meta http-equiv="Content-Script-Type" content="text/javascript">

スクリプト言語の指定。多くの場合これらの指定をしなくてもブラウザが自動的に判断するが、誤動作を避けるために指定しておく方が良い。

検索ロボットの制御

<meta name="description" content="METAタグの説明">

文書の要約を書く。検索エンジンが読んでサーチ結果のコメント部に使うかもしれない。

<meta name="keywords" content="HTML,Blog,ブログ,ホームページ">

文書のキーワードを書く。ここで指定した値は多くの検索エンジンで利用されるので、慎重に言葉を選ぶ。検索の対象になる可能性が高まる。

<meta name="robots" content="noindex,nofollow">

検索ロボットがこの文書を登録しないように(noindex)、また文書内のリンクをたどらないように(nofollow)指定する。この指定は、この情報を参照する紳士的な検索ロボットに対してのみ有効である。

キャッシュ制御と有効期限

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

文書がブラウザにキャッシュされないようにする。※HTTP1.0の場合pragma、HTTP1.1の場合cache-controlを使う。

<meta http-equiv="expires" content="Fri, 31 Aug 2007 12:00:00 GMT">

文書のキャッシュが消去される時刻をexpiresで指定する。
※上の例ではグリニッジ標準時2007年8月31日12時00分00秒にキャッシュが消えるように指定している。

別ページへの自動ジャンプ

<meta http-equiv="refresh" content="5; url=start.html">

5秒後にstart.htmに自動的にジャンプする。 ジャンプ先urlを指定しない場合は、その文書を再読み込みする。IE3.0/NN2.0よりサポートされている。

文書の制作者・著作権者

<meta name="author" content="HTMQ">

その文書の作者(author)を指定する。

<meta name="copyright" content="(c)1998-2003 K.Hirai">

その文書の著作権者を指定する。著作権表示をしなくても、日本を含む多くの国では法律上著作権が生じる。

文書を作成したエディタ

<meta name="generater" content="notepad">

200px以上の画像ツールバーを無効にする

<meta http-equiv="imagetoolbar" content="no">

FONT 文字の装飾

書式(活字体、色、大きさなど)

<font face="江戸勘亭流P" color=#ff0000 size=4>文字のフォント、色、大きさを指定する</font>

大きさを絶対値(ピクセルやポイントなど)で指定するときはstyleを使う。
<font style="font-size : 16pt;">16ポイントの大きさ</font>

その他の例
<font style="font-face:Verdana; font-size:12pt; font-weight:bold; color:green;">

特殊文字

§ © ® £ ¢ « » ¹ ² ¼ ½ ª
&sect; &para; &copy; &reg; &pound; &cent; &#8364; &laquo; &raquo; &sup1; &sup2; &frac14; &frac12; &ordf;

filterの例

 燃える文字

<div style="width: 100%; filter: glow(color=red,strength=5);"><font face="江戸勘亭流P" color=#ffff00 style="font-size: 14pt;">燃える文字</font></div>

DLとDDを使った字下げ

どんな項目

こんな項目

<dl>
<dd><FONT color=green>■</FONT>どんな項目 </dd>
<dd><FONT color=red>■</FONT>こんな項目</dd>
</dl>

P 段落指定

段落の文字色指定

<P style="margin-left:2em">左マージンの指定 2文字</p> 

段落の文字色を指定するとき、スタイルシートに ".red{ color : red; }" と記述して本文で次のように書く。。

<P class="red">ホットな内容を赤い文字で示す段落</p>

Pタグで直接styleを指定しても良い。

<p style="color : red;">直接指定する</p>

通常の段落の一部でも<SPAN class="blue">クールな内容は青。</span>のように文字色を指定できる。

<span id="blue">を使うときは、スタイルシートに span#blue { color : blue;} と書いておく。

HEADの指定

検索エンジンの対象外にしたいとき

<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">

n秒後に別ページへ自動ジャンプ Refresh

<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>

 

 

WEB学習リンク集

はてなブックマークに追加はてなブックマークに追加
Yahoo!ブックマークに登録Yahoo!ブックマークに登録
del.icio.usに登録del.icio.usに登録
livedoorクリップに登録livedoorクリップに登録
POOKMARKに登録POOKMARKに登録
Buzzurlに登録Buzzurlに登録

配色大辞典を参照しています。

IEやFirefoxなどのブラウザーでアドレス欄およびお気に入り(ブックマーク)で表示される小さなアイコンを favicon という。Webサイトのルートフォルダーに保存して、ブラウザでアクセスしたときにそのWebのアイコンを表示させることができる。詳しい説明が http://www.rw-designer.com/favicon にある。