| <!DOCTYPE~> | ドキュメントタイプを記述する |
|---|---|
| <html~>~</html> | 言語を指定し、HTML文書を記述する |
| <head>~</head> | ヘッダを記述する。この中で下に記す<meta~>タグや<title>タグなどにより文書情報を記述する |
| <meta~> | ヘッダの中の文字コードなどの情報を指定する |
| <title>~</title> | ヘッダの中でページのタイトルを記述する、ブックマーク(お気に入り)に登録した際の名前にも使用される。実際にページを公開する場合には、わかりやすいタイトルをつける。 |
| <body>~</body> | ページの本文を記述する。 |
| <p>~</p> | 段落を指定する |
|---|
| <h1>〜</h1> | 1番目のレベル(最上位)の見出し |
|---|---|
| <h2>〜</h2> | 2番目のレベルの見出し |
| <h3>〜</h3> | 3番目のレベルの見出し |
| <h4>〜</h4> | 4番目のレベルの見出し |
| <h5>〜</h5> | 5番目のレベルの見出し |
| <h6>〜</h6> | 6番目のレベル(最下位)の見出し |
| <br> | 改行を行う |
|---|
| <hr> | テーマや話題の区切りを表す。 |
|---|
| <em>~</em> | テキストを強調する。 |
|---|---|
| <strong>~</strong> | 強い強調性を泡ラス。入れ子構造(タグで挟まれた部分にされにタグを挿入)により、重要性をより高めることができる。 |
| <cite>~</cite> | 作品のタイトルを表す。 |
|---|---|
| <var>=</var> | 変数やプログラムの変数を表す。 |
| <code>~</code> | プログラムのソースコードを表す。 |
| <sup>~</sup> | 上付き文字にする。 |
|---|---|
| <sub>~</sub> | 下付き文字にする。 |
| 記述 | 表示 | 記述 | 表示 |
| < | < | ± | ± |
|---|---|---|---|
| > | > | × | × |
| " | " | ÷ | ÷ |
| & | & | ¥ | ¥ |
| <ul>~</ul> | 箇条書きにする。 |
|---|---|
| <li>~</li> | <ul>~</il>の中で項目を記述する。項目の数だけ繰り返す。 |
| <dl>~</dl> | 定義ごとその説明を表示する。 |
|---|---|
| <dt>~</dt> | <dl>~</dl>の中で定義語を記述する。定義語の数だけ繰り返す。 |
| <dd>~</dd> | <dl>~</dl>の中で定義語の説明を記述する。説明の数だけ繰り返す。 |
| <pre>~</pre> | 空白や改行をそのまま表示する |
|---|
| <!-- ~ --> | コメントを記述する。または、表示させたくない部分を一時的に隠す。 |
|---|
| <a href="①">~</a> | ①ではリンク先のURLを指定する、絶対パス／相対パスのいずれでも良い。 |
|---|
| <a href="①#②>~</a> | URL①の中で②という名前のアンカー設定した部分にリンクする。同一ファイル内では①の記述は不要である。 |
|---|---|
| <a id="②">~</a> | この場所に②で指定した名前のアンカーを設定する。 |
| <img scr="①" alt="②"> | URL①で指定した画像を貼り付ける。②には画像を表示できないときに代わりに表示される代替テキストを記述する。 |
|---|
| <img scr="①" width="②" height="③" alt="④"> | URL①で指定した画像を貼り付ける。②は画像の横方向、③は縦方向のサイズで、いずれもピクセルで指定する。④には画像を表示できないときに代わりに表示される代替テキストを記述する。 |
|---|
| <table>~</table> | 表を作成する。 |
|---|---|
| <tr>~<tr> | <table>~<table>の中で剛を記述する。行の数だけ繰り返す。 |
| <td>~<td> | <tr>~<tr>の中で列を記述する。列の数だけ繰り返す。 |
| <th>~<th> | <td>~<td>と同様であるが、見出し項目(太字で中央に配置)とする |
| <caption>~</caption> | 表題を記述する。<table>~<table>の内側で使用する。 |
|---|
・・・・・・
<head>
・・・・・・
<style>
table{border:1px solid black; border-spacing:0px}
th,td{border:1px solid black}
</style>
</head>
・・・・・・
| <td style="text-align:①">~</td> | セル(マス目)の中の横方向の位置を①で指定する。「left」は左に、「center」は中央に、「right」は右にそれぞれ配置する。 |
|---|---|
| <th style="text-align:①">~</th> | 見出し項目となる以外は上と同様である。 |
| <td colspan="①">~</td> | 横方向に①で指定した個数分連結したセルを作成する。 |
|---|---|
| <th colspan="①">~</td> | 見出し項目となる以外は上と同様である。 |
| <td rowspan="①">~</td> | 縦方向に①で指定した個数分連結したセルを作成する。 |
| <th rowspan="①">~</th> | 見出し項目となる以外は上と同様である。 |
・・・・・・
<head>
・・・・・・
<style>
セレクタ{プロパティ:値}
</style>
</head>
・・・・・・
・・・・・・
<head>
・・・・・・
<link rel="stylesheet" href="CSSファイル名"
type="text/css">
</head>
・・・・・・
セレクタ{プロパティ:値}
セレクタ{
プロパティ:値;
プロパティ:値;
・・・・・・
}
・・・・・・
・・・・・・
<要素 style="プロパティ:値">
・・・・・・
| text-align:① | 段落の表示位置を①で指定する。「left」は左揃え、「center」は中央揃え、「right」は右揃え、「justify」は均等配置とする。 |
|---|
| color:① | 前景色を①で指定する。 |
|---|---|
| background-color:① | 背景色を①で指定する。 |
| #RRGGBB | "に続けてRGB各色の値を16進数二桁(00~FF)で指定する。 |
|---|---|
| #RGB | "に続けてRGBの各色の値を16進数一桁(0~F)で指定する。 |
| rgb(R,G,B) | RGB各色の値を10進数(0~255)で指定する。 |
| rgb(R%,G%,B%) | RGB各色の割合(%)を10進数(0~100)で指定する。 |
| font-size:① | 文字のサイズを①で指定する。サイズは最も小さいものから大きいものへ、順にxx-small,x-small,small,medium,large,x-large,xx-largeとなる。また、相対的にsmaller,largerや、%でも指定できる。 |
|---|
| border:①②③ | 枠の太さ、スタイル、色をまとめて指定する。①では枠の太さをthin,medium,thick,または単位をつけた数値(10px,1emなど※)で指定する。②では枠のスタイルをnone、hidden、dotted、dashed、solid、double、groove、ridge、inset、outsetの中から指定する。③では枠の色を指定する |
|---|---|
| border-top:①②③ border-bottom:①②③ border-left:①②③ border-right:①②③ |
上下左右の枠それぞれを個別に、太さｍスタイル、色をまとめて指定する。①、②、③の指定方法は上と同様である。 |
| <div>~</div> | 複数の要素などを囲んでグループ化し、属性を付加する。タグの前後で改行される。 |
|---|---|
| <span>~</span> | 単語や文書などを挟み、属性を付加する。 |