コードに誤りなどお気づきの点がございましたら管理人までお知らせ下さい。当ページを利用し、作成したウェブサイトなどにつきましては、当方の誤記載に関わらず一切の責任を負いかねます。＜ショウタカ＞
INDEX … インデックスページに戻ります
1F … コードご利用について・ブロックレベル要素
2F … HTMLpart・バージョンを示す
3F … 見出しを表す・強調する・ルビをふる
4F … 他のページにリンクする・リストを作る
5F … 表の基本形・テーブルのセル連結
6F … 画像を配置する・フォームを作る
7F … フレームを作る・インラインフレーム
8F … CSSpart・基本的な要素
9F … リンク部分に適用させる・文字指定
10F … 背景色指定・背景画像指定
11F … マージン指定・センタリングする
12F … 枠線の太さ、色、形式の指定
13F … ボックス幅の指定・回り込み
14F … ボックスの位置指定・重なりの指定
15F … リストやマークの形式指定
16F … 表の枠指定・カーソルの形式指定
| address | fieldset | ol |
| ul | blockquote | form |
| p | center | h1〜h6 |
| pre | div | hr |
| table | dl | noframes |
| a | basefont | code |
| iframe | object | small |
| sup | abbr | big |
| dfn | img | q |
| span | textarea | acronym |
| br | em | input |
| s | strike | tt |
| applet | button | font |
| kbd | samp | strong |
| u | b | cite |
| i | label | select |
| sub | var | ─ |
| img | input | object |
| select | textarea | ─ |
htmlのバージョンを示す
html構築の上で最低限必要な要素
何語で書かれているか示す
文字コードを示す
キーワード・内容の紹介・制作者名を入れる
スタイルシートやスクリプトの言語を示す
htmlにスクリプトを組み込む
html内にコメントを入れる
自動的にページを読み込む
見出しを表す
連絡先を表す
強調する
長い引用文を表す
参照先を表す
ブラウザにソースコードを表す
空白改行をそのまま表示（ソースコード限定）
ルビをふる
テキストスタイルの指定
他のページにリンクする
同じページの特定の位置にリンクする
他のページの特定の位置にリンクする
リンク先を別のウィンドウに表示する
リンクでメールソフトを起動する
マーク付きのリストを作る
番号付きのリストを作る
用語と説明のリストを作る
表の基本形（レイアウトには使用しない）
テーブルの中のセルを連結する
セル内での行揃えと縦方向の位置を指定する
画像を配置する
フォーム
送信ボタンを作る
リセットボタンを作る
画像で送信ボタンを作る
一行の入力フィールドを作る
複数行の入力フィールドを作る
パスワードの入力フィールドを作る
表示されないフィールドを作る
ラジオボタンを作る
チェックボックスを作る
メニューを作る
リストボックスを作る
ファイル選択の機能をつける
フォームの内容がメールで届くようにする
フレームの全体構造を指定する
フレームの表示方法を設定する
フレームを区切る枠の表示・非表示を設定する
フレームを区切る枠を完全に消す
フレームが表示されない環境用の内容を入れる
リンク先をどのフレームに表示するかを指定する
インラインフレームを配置する
ボックスの幅
cssソースの中にコメント文を入れる
cssの書かれたファイルを読み込む
style要素の内容としてhtmlに組み込む
任意の要素にstyle属性の値としてhtmlに組み込む
特定の要素に適用させる
複数の要素に適用させる
特定の要素に含まれる要素に適用させる
全ての要素に適用させる
IDやクラスを指定した要素に適用させる
リンク部分に適用させる
一行目に適用させる【ブロックレベル要素】
一文字目に適用させる【ブロックレベル要素】
文字色を指定する
フォントを指定する
フォントサイズを指定する
フォントの太さを指定する
フォントスタイルを指定する
行間を設定する
フォント関係をまとめて指定する
行揃えを指定する【ブロックレベル要素】
縦方向の位置を指定する【インライン要素とtd要素】
文字間隔・単語間隔を設定する【インライン要素】
一行目のインデントを設定する【ブロックレベル要素】
空白や改行をそのまま表示させる
改行しないで表示させる
全体を大文字または小文字で表示させる
背景色を指定する
背景画像を指定する
背景画像の並び方を指定する
背景画像の表示位置を指定する【ブロックレベル要素と置き換え要素】
背景画像を固定する
背景関係をまとめて指定する
マージンを設定する
センタリングする
枠線の太さを指定する
枠線の色を指定する
枠線の形式を指定する
枠線をまとめて指定する
幅と高さを指定する
左右への配置と回り込みを指定する
回り込みを解除する【ブロックレベル要素】
絶対的な位置に配置する
相対的な位置に配置する
絶対的な位置に固定配置する
重なる順序を指定する
ボックスを表示されないようにする
はみ出る部分の処理方法を指定する【ブロックレベル要素と置き換え要素】
リストのマークや番号の形式を変える【li要素】
リストのマークを画像にする【ulのli要素にのみ適用可】
リストのマークを内側に表示させる【li要素】
リストのマークをまとめて指定する【li要素】
表の枠線を単一の線にする【テーブル要素】
カーソルの形を指定する
本来の理想的なHTML4.01を書く場合に指定するDOCTYPE。
HTML4.01で非推奨とされている要素や属性、フレームは使用することが出来ない。
他にも色々制限があり、このDOCTYPEを指定するにはかなりの知識が必要。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
最も利用しやすい種類。HTML4.01では非推奨とされている要素や属性も使用可能。
フレームはインラインフレームのみ使用可能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
基本的にはTransitionalと同じ。違うのはインラインフレーム以外のフレームも使えること。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<!--ここに文書に関する情報を入れる-->
<title><!--ここにタイトルを入れる--></title>
</head>
<body>
<!--ブラウザに表示される内容を入れる-->
</body>
</html>
<html lang="言語コード">
ja（日本語）
<meta http-equiv="Content-Type"content="text/html; charset=Shift_JIS">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,2">
<meta http-equiv="Content-Style-Type" content="スタイルシートの種類">
<meta http-equiv="Content-Script-Type" content="スクリプトの種類">
<script type="mineタイプ"></script>
<script type="mineタイプ" src="url"></script>
<!-- -->
<meta http-equiv="refresh" content="秒数;URL=移動先url">
※数字が小さい方が重要度が高い
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<address></address>
<em></em>
<strong></strong>
<blockquote></blockquote>
<cite></cite>
<code></code>
<pre></pre>
※<rp></rp>はルビタグ未対応ブラウザのための括弧を入れる。
<ruby><rb>ルビをふる対象</rb><rp>
（</rp><rt>ルビ（ふりがな）</rt><rp>）
</rp></ruby>
太字<b></b>
斜体<i></i>
上付き文字<sup></sup>
下付き文字<sub></sub>
<a href="リンクurl"></a>
リンク元の指定<a href="#位置名"></a>
リンク先の指定<a name="位置名"></a>
リンク元の指定<a href="url#位置名"></a>
リンク先の指定<a name="位置名"></a>
<a href="url" target="機能名">
_top（フレームを解除してウインドウ全体に表示）
_parent（リンク先をリンク元のフレームの親フレームに表示）
_self（リンク先をリンク元と同じフレームに表示）
_blank（新しいウィンドウを開いてリンク先をそのウィンドウに表示）
<a href="mailto:メールアドレス"></a>
※スパムに注意
<ul>
<li>リスト項目を入れる</li>
<li>リスト項目を入れる</li>
</ul>
<ol>
<li>リスト項目を入れる</li>
<li>リスト項目を入れる</li>
</ol>
<dl>
<dt>用語</dt>
<dd>説明</dd>
<dt>用語</dt>
<dd>説明</dd>
</dl>
<table width="全体の幅" cellspacing="セルの間隔"
cellpadding="セルの枠と内容の間隔" border="外枠の太さ">
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<td rowspan="縦方向の連結数"></td>
<td colspan="横方向の連結数"></td>
<td align="行揃え位置" valign="縦位置"></td>
行揃え位置
left（左揃え:tdのデフォルト）
right（右揃え）
center（中央揃え）
justify（両端揃え）
縦位置
top（上揃え）
middle（中央揃え:デフォルト）
bottom（下揃え）
baseline（横方向の列での一行目のベースライン）
<img src="url" width="幅" height="高さ" alt="代替テキスト">
<form action="url" method="送信形式"
enctype="mineタイプ" target="ウィンドウ名"></form>
<input type="submit" value="ラベル" name="名前">
<input type="reset" value="ラベル">
<input type="image" src="url" name="名前" alt="代替テキスト">
<input type="text" name="名前" value="デフォルト文字"
size="幅" maxlength="最大文字数">
<textarea name="名前" rows="行数" cols="幅"></textarea>
<input type="password" name="名前" value="デフォルト文字"
size="幅" maxlength="最大文字数">
<input type="hidden" name="名前" value="送信値">
<input type="radio" name="名前" value="送信文字" checked>
※checked…あらかじめ選択された状態にする場合に指定
<input type="checkbox" name="名前" value="送信文字" checked>
<select name="名前">
<option>送信値と表示文字</option>
<option>送信値と表示文字</option>
</select>
<select size="行数" name="名前" multiple>
<option>送信値と表示文字</option>
<option>送信値と表示文字</option>
</select>
multiple（複数の項目を選択可能にする場合に指定）
selected（あらかじめ選択された状態にする場合に指定）
<input type="file" name="名前" accept="mineタイプ">
<form action="mailto:メールアドレス"
method="post" enctype="mineタイプ"></form>
※スパムに注意
<frameset rows="高さ"></frameset>
<frameset cols="幅"></frameset>
<frame src="url" name="フレーム名">
<frame scrolling="スクロールの制御" noresize>
<frame marginwidth="左右のマージン" marginheight="上下のマージン">
<frame frameborder="枠の表示指定">
1（ON）
0（OFF）
<frameset frame border="0" framespacing="0" border="0"></frameset>
<noframes></noframes>
※フレーム名はnameで入れる
<a href="url" target="フレーム名"></a>
<iframe src="内容のurl" name="フレーム名"></iframe>
margin＞border＞padding＞content
/* */
<link rel="stylesheet" href="url" type="text/css">
<style type="text/css"></style>
<要素名 style="スタイルシート">
要素名{}
要素名,要素名{}
要素名 要素名{}
*{}
#{}
.{}
要素名#{}
要素名.{}
要素名:link{}（まだ見ていないリンク）
要素名:visited{}（既に見たリンク）
要素名:hover{}（カーソルを重ねたとき）
要素名:active{}（クリックしたとき）
要素名:first-line{}
要素名:first-letter{}
※背景色も同時に指定するのが好ましい
color:色指定
font-family:フォント名
＜代表的なフォント名＞
serif（明朝系）
sans-serif（ゴシック系）
cursive（草書体系）
fantasy（装飾系）
monospace（等幅フォント）
※相対的な単位で指定するのが好ましい
font-size:サイズ
xx-small
x-small
small
medium
large
x-large
xx-large
font-weight:太さ
bold（太字）
normal（標準）
font-style:斜体
italic（斜体）
normal（標準）
text-decoration:
none（無し）
underline（下線）
overline（上線）
line-through（取消線）
blink（点滅：blinkが適用されるのはNetscapeのみ）
（％指定か数値のみ〈1.5など〉がよい）
line-height:行の高さ
※この順序で指定するのが好ましく、サイズとフォント名以外は省略できる。※サイズと行間の間は『/』で区切る。それ以外は半角スペースで区切る。
font:
font-style（斜体）
font-weight（太さ）
font-size（サイズ）
line-height（行間）
font-family（フォント名）
※ブロックレベル要素の中身に対して適用されるので、ボックス自体をセンタリングしたい場合には左右のマージンを〈auto〉にする。
text-align:行揃え位置
left（左）
right（右）
center（中央）
※td要素に指定した場合はセル内の上、真ん中、下に捉えられる。
vertical-align:縦方向の位置
top（上）
middle（中央）
bottom（下）
（emがよい。マイナス指定も可）※word-spacingは英数字にのみ適用される
letter-spacing:文字間隔
word-spacing:単語間隔
（emがよい。マイナス指定も可）※ブロックレベル要素内のテキストの先頭に対して適用される。
text-indent:インデント
※適用率低い
white-space:pre
※適用率低い
white-space:nowrap
text-transform:大文字・小文字の指定
uppercase（すべて大文字で表示）
lowercase（すべて小文字で表示）
capitalize（単語の先頭の文字だけ大文字で表示）
※背景の適用範囲はborderまでで、margin部分は常に透明であり色を設定することは出来ない。
background-color:色指定
background-image:url(url)
background-repeat:並び方
repeat（タイル状）
repeat-x（横方向に繰り返し）
repeat-y（縦方向に繰り返し）
no-repeat（繰り返さない）
background-position:表示位置
left（左）
right（右）
center（中央）
top（上）
bottom（下）
background-attachment:固定の有無
fixed（固定する）
scroll（固定しない）
※順不同でOK
background:背景関連のプロパティの値
color（色）
image（画像）
repeat（画像の並び方）
position（画像の表示位置）
attachment（画像の固定の有無）
※％で指定するとボックスの横幅に対する割合となる。上下のマージンについても高さではなく横幅を参照する。※値にautoを指定すると自動調整になる。
margin-top:上マージン
margin-bottom:下マージン
margin-left:左マージン
margin-right:右マージン
margin:上・右・下・左
margin-left:auto;margin-right:auto
margin:auto
margin:上マージン指定 auto
margin:上マージン指定 auto 下マージン指定
border-top-width:上枠の太さ
border-bottom-width:下枠の太さ
border-left-width:左枠の太さ
border-right-width:右枠の太さ
border-top-width:上・右・下・左枠の太さ
単位指定の他に
thin（細い枠）
medium（中くらいの枠）
thick（太い枠）
の指定方法がある
※初期値はcolorで設定されている色になる。
border-top-color:上枠の色
border-bottom-color:下枠の色
border-left-color:左枠の色
border-right-color:右枠の色
border-color:上・右・下・左枠の色
border-top-style:上枠線の形式
border-bottom-style:下枠線の形式
border-left-style:左枠線の形式
border-right-style:右枠線の形式
border-style:上・右・下・左枠線の形式
none（無し）
solid（一重線）
double（二重線）
dashed（破線）
dotted（点線）
groove（谷型）
ridge（山型）
inset（凹み型）
outset（凸型）
※styleやcolorの時のように、borderのみで上下左右別々の設定をすることは出来ない。
border-top:上枠線関連のプロパティの値
border-bottom:下枠線関連のプロパティの値
border-left:左枠線関連のプロパティの値
border-right:右枠線関連のプロパティの値
border:上下左右の枠線に同じ値を設定
※この時の幅と高さはボックスのcontentに適用される
※WinのIE4.0〜IE5.5と6.0（互換）ではwidthとheightの幅はcontent+padding+borderの幅となるので注意が必要。
width:幅
height:高さ
※MacIEでは適用されない
float:配置位置
left（左）
right（右）
none（指定しない）
clear:どちら側の要素に対して解除するか
left（左）
right（右）
both（両方）
none（解除しない）
※指定した部分は通常の配置とは別に扱われるようになる。
position:absolute;
top:上からの距離;
bottom:下からの距離;
left:左からの距離;
right:右からの距離;
position:relative;
top:上からの距離;
bottom:下からの距離;
left:左からの距離;
right:右からの距離;
※指定した部分は通常の配置とは別に扱われるようになる。
position:fixed;
top:上からの距離;
bottom:下からの距離;
left:左からの距離;
right:右からの距離;
※数字は整数で値が大きいものほど上に重なって表示される。
z-index:重なる順序
※IE適用率低い
display:none（その要素が無い状態にする）
visibility:hidden（領域は確保するが見えない状態にする）
※適用率低い
overflow:表示形式
visible（ボックスからはみ出して表示）
hidden（はみ出した部分を表示しない）
scroll（スクロールして見られるようにする）
auto（必要に応じてスクロール出来るようにする）
list-style-type:種類
none（表示しない）
disc（黒丸）
circle（白丸）
square（白四角）
lower-roman（ローマ数字小文字）
upper-roman（ローマ数字大文字）
lower-greek（ギリシャ文字小文字）
decimal（算用数字）
decimal-leading-zero（頭に0を付けた算用数字）
lower-latinとlower-alpha（アルファベットの小文字）
upper-latinとupper-alpha（アルファベットの大文字）
cjk-ideographic（漢数字）
hiragana（あいうえお）
katakana（アイウエオ）
hiragana-iroha（イロハニホヘト）
katakana-iroha（イロハニホヘト）
hebrew（ヘブライ数字）
amenian（アルメニア数字）
georgian（グルジア数字）
list-style-image:url(url)
※最初は外側（outside）表示
list-style-position:表示位置
outside（外側）
inside（内側）
※IE適用率低い※順不同でOK
list-style:
type（形式）
image（画像）
position（表示位置）
none（マーク非表示）
border-collapse:表の枠線の表示形式
collapse（外枠とセル枠を重ねて表示）
separate（外枠とセル枠を別に表示）
cursor:形状
auto（自動）
crosshair（十字）
default（標準）
pointer（指）
move（十字矢印）
text（テキスト）
wait（時計）
help（はてなマーク）
e-resize（東向き矢印）
ne-resize（北東向き矢印）
nw-resize（北西向き矢印）
n-resize（北向き矢印）
se-resize（南東向き矢印）
sw-resize（南西向き矢印）
s-resize（南向き矢印）
w-resize（西向き矢印）