Life is Adventure!

Contact 連絡先 | Home | よく使うスタイル

よく使うHTMLタグ(初級)

∇FONT装飾∇DLとDD字下げ∇P 段落指定∇META∇検索ロボット∇自動ジャンプ∇SSIの使用例W3C Recommendation

FONT 文字の装飾

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

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

〔注〕ブラウザによって使えるフォントが異なる。互換上はMS UI Gothicを使う。
またfont固有属性(face=など)が無効の場合があるので、style="~"属性を使ったほうがよい。

大きさを絶対値(ピクセルやポイントなど)で指定するときは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の例(IE6の場合だけなので互換上使わないほうがよい)

 燃える文字

<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;} と書いておく。

META

ブラウザや検索ロボットに文書に関する情報(メタ情報)を知らせるために指定する。制作者やキーワードなどの情報を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">

その文書を作成したエディタ名を指定する。

SSI (Server Side Include)

HTML文書中にコメントとして、<!-- #実行コマンド名 パラメータ -->の形式で書くことにより、サーバー側がコメントの場所に実行コマンドの結果などを表示してくれる。lolipopサーバで使用するときの拡張子は .shtml とする。

ファイルの最終更新時刻を表示

<!--#config timefmt="%Y/%m/%d %X" --> <!--#echo var="LAST_MODIFIED" -->

Sample: 2006/06/29 00:00:41

外部HTMLファイル読み込み

<!--#include file="footer.html" -->

フッター(footer.html)の読み込み例:

Copyright ©1995-2005 Elmblog

IFRAME

<iframe src="http://elmblog.com/study/html/index.shtml" frameborder="0" scrolling="auto" width="500" height="500"></iframe>

Style Sheet

<link rel="stylesheet" href="http://agorian.com/styles-site.css" type="text/css" />
今日の言葉: 

コメントを投稿


counter