HTML タグ編

HTML TIPS　　　 ■戻る　 ■Top

<HTML基本型> <FRAME型> <注釈> <特殊文字> <HEAD> <META> <TITLE> <STYLE> <BODY>

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
<P>段落</P>
</BODY>
</HTML>

FRAME 型　■戻る

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>タイトル</TITLE>
</HEAD>
<FRAMESET cols="20%,*">
<FRAME src="contents.htm" name="frame1">
<FRAME src="top.htm" name="frame2">
<NOFRAMES>
<BODY><P>フレーム未対応ブラウザ用メッセージ</P></BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

  ・<FRAMESET cols="20%,*"> の cols= は横分割。
    rows= にすると縦分割。
    フレームの幅は、% 指定、ピクセル指定、* は残り全部と言う指定ができる。

  ・それぞれのフレーム内を更に <FRAMESET>...</FRAMESET> で、
    細分化できる。

<FRAMESET frameborder="no" cols="20%,*">
                       |_ 境界線なし

<FRAME frameborder="no" src="contents.htm" name="frame1">
                    |_ 境界線なし

<FRAMESET border="10" cols="20%,*">
                  |_ 境界線の幅

<FRAMESET bordercolor="#e0e0e0" cols="20%,*">
                       |_ 境界線の色

<FRAME bordercolor="#e0e0e0" src="contents.htm" name="frame1">
                    |_ 境界線の色

<FRAME noresize src="contents.htm" name="frame1">
       |_ フレームサイズ変更禁止

注釈　■戻る

<!--
ここが注釈扱いになる
//-->

JAVA Script 以外の場所なら、次の書式でもいいです。

<!--
ここが注釈扱いになる
-->

特殊文字　■戻る

%20    : 空白
&nbsp; : 空白 &lt;   : <&gt;   : >

<HEAD> タグ　■戻る

  ・<HEAD>...</HEAD> 間には、
      <META> タグ
      <TITLE> タグ
      <STYLE> タグ
      <SCRIPT> タグ
    などが入れられる。

<META> タグ　■戻る

  ・サーチエンジン用のキーワードは、content= にキーワードをカンマで区切
    って列挙し、次のように定義する。

<META name="Keywords" content="システム開発,プログラミング,VB,SQL,CGI">

  ・S-JIS コードで記述する場合、お約束で次の <META> タグを入れると良い。
    日本語文字化け対策とサーチエンジンの日本語ページ判定になる。

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  ・自動リロードには、次のように指定する。

<META HTTP-EQUIV="Refresh" CONTENT="60">
                                    |_ 60 秒後にリロードする

<TITLE> タグ　■戻る

  ・ブラウザのタイトルとして表示される。

<TITLE>タイトル</TITLE>

<STYLE> タグ　■戻る

  ・ホバースタイルなどに使用する。
    スタイルシートタグに対応していないブラウザ用にタグ間を注釈扱いにして
    おくと良い。

<STYLE type=text/css>
<!--
  A:hover {BACKGROUND-COLOR: ; COLOR: #229022; TEXT-DECORATION: underline}
-->
</STYLE>

  ・フォントファミリーの指定は、次のようにする。

<STYLE type=text/css>
<!--
  body {font-family: arial,sans-serif;}
-->
</STYLE>

<BODY> タグ　■戻る

  ・<BODY>...</BODY> 間には、
      <DIV> タグ
      <P> タグ
      <B> タグ
      <I> タグ
      <FONT> タグ
      <HR> タグ
      <PRE> タグ
      <BLOCKQUOTE> タグ
      <UL> タグ
      <LI> タグ
      <BR> タグ
      <IMG> タグ
      <TABLE> タグ
      <FORM> タグ
      <A> タグ
      <FRAME> タグ
      <IFRAME> タグ
      <SCRIPT> タグ
    などが入れられる。

<BODY bgcolor="#ddcab0" link="#6040aa" vlink="#903090" alink="#229022" text="#404040">
               |              |               |               |              |_ テキストカラー
               |              |               |               |_ アクセスリンクカラー
               |              |               |_ 既読リンクカラー
               |              |_ 未読リンクカラー
               |_ ページ背景カラー

  ・表示マージンを 0 にするには、IE とネスケ用に、次のようにする。

<BODY TOPMARGIN=0 MARGINHEIGHT=0 LEFTMARGIN=0 MARGINWIDTH=0>

  ・背景画像を凝って、左に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-y">

  ・上に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-x">

  ・右に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-y; background-position:top right">

  ・下に一列表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-x; background-position:bottom left">

  ・繰り返さず表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  no-repeat">

  ・繰り返して表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat">

  ・スクロール固定表示するとき、次のようにする。

<BODY style="BACKGROUND:white url(image.gif)
  repeat-x"; background-attachment:fixed>

■戻る　 ■Top