| 項 目 | 用 途・設 定 内 容 |
|---|---|
HTMLの基本 |
|
フォント |
|
改行 |
|
スペース |
|
色 |
|
リンク |
|
クリッカブルマップ |
|
リスト |
|
線 |
|
文書構成 |
|
画像 |
|
背景画像（壁紙） |
|
アクション |
|
音・音楽 |
|
テーブル |
|
レイアウト |
|
視覚効果 |
|
フォーム |
|
フォーム制御 |
|
JavaScript |
|
ウィンドウ |
|
スクロール |
|
メール |
|
検索 |
|
その他のテクニック(1) |
|
その他のテクニック(2) |
|
その他のテクニック(3) |
|
雑学 |
|
たとえば <span>タグに style="color: red;" のような指定を追加して、<span style="color: red;"> とすることで、<span style="color: red;">～</span> 間の 文字の色の変更 が可能です。（この style="color: red;" のような指定のことを属性といいます。 この場合 style属性 です。）
また、ページ全体の背景色 を指定したい場合には、<body>タグに style="background-color: #fffff0;" のような style属性 を追加して、 <body style="background-color: #fffff0;"> のようにすればできます。
なお、これらに含まれる CSS の設定を、あらかじめ <head>～</head> 間にたとえば、
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
.color0 { color: black; }
.color1 { color: red; }
.color2 { color: green; }
.color3 { color: blue; }
.color4 { color: lightgreen; }
BODY { background-color: #fffff0; }
-->
</style>
|
| HTMLソース | |
|---|---|
| HTML <body> ～ </body> |
<span class="color0"> class="color0" による色の指定</span> <br><span class="color1"> class="color1" による色の指定</span> <br><span class="color2"> class="color2" による色の指定</span> <br><span class="color3"> class="color3" による色の指定</span> <br><span class="color4"> class="color4" による色の指定</span> |
| ブラウザー 表示例 |
|---|
| class="color0" による色の指定
class="color1" による色の指定 class="color2" による色の指定 class="color3" による色の指定 class="color4" による色の指定 |
上の例の場合、class="color0" ～ class="color4" のようなclass属性による色の指定では、<span>要素 以外でもほとんどすべての要素（タグ）で使用することができます。
さらに、後述の表の各部でも色指定が同様にできます。詳細については、CSS の colorプロパティ や background-colorプロパティ の解説や以下を見てください。
<span>タグに style="font-size: large;" のような属性を追加して、<span style="font-size: large;"> などとすることで、<span style="font-size: large;">～</span>間の文字サイズの変更が可能です。
| HTMLソース(メモ帳) | |
|---|---|
| HTML <body> ～ </body> |
<span style="font-size:xx-small;">大きさ xx-small の文字</span><br> <span style="font-size:x-small;">大きさ x-small の文字</span><br> <span style="font-size:small;">大きさ small の文字</span><br> <span style="font-size:medium;">大きさ medium の文字</span><br> <span style="font-size:large;">大きさ large の文字</span><br> <span style="font-size:x-large;">大きさ x-large の文字</span><br> <span style="font-size:xx-large;">大きさ xx-large の文字</span> |
| ブラウザー 表示例 |
|---|
| 大きさ xx-small の文字 大きさ x-small の文字 大きさ small の文字 大きさ medium の文字 大きさ large の文字 大きさ x-large の文字 大きさ xx-large の文字 |
また、直前の文字サイズを基準にして、大きさの変化を指定する <span style="font-size:larger;">，<span style="font-size:smaller;"> のような方法もあります。詳細については、以下を見てください。
<h2> 文字列 </h2> のように、<hn> ～ </hn>タグによってはさまれた部分は 見出し となって、 この部分の後は自動的に改行されます。また、"h"の後の数値を変えることによって、文字のサイズが変わります。
（数値は、1から6までの範囲で、数値が小さいほど大きな見出し となる）
| HTMLソース(メモ帳) | |
|---|---|
| HTML <body> ～ </body> |
<h1> 見出し１ </h1> <h2> 見出し２ </h2> <h3> 見出し３ </h3> <h4> 見出し４ </h4> <h5> 見出し５ </h5> <h6> 見出し６ </h6> |
| ブラウザー 表示例 |
|---|
見出し１見出し２見出し３見出し４見出し５見出し６ |
詳細については、以下を見てください。
<hn> ～ </hn>タグは、あくまでも「見出し」を記述するためのタグですので、これを記述できる場所には制約があります。 たとえば、<span> ～ </span> の内部に含めることはできません。（詳細は、コンテンツ・モデルを参照。）
通常の文書でもWebページでも、リスト（箇条書き） は、読みやすく、見やすくするのに有効 です。
リストの要点 については、まず、
を参照してください。
また、３種類のリスト：
と、これらを作成する際に使用する
のそれぞれの詳細（マークアップ方法、機能、用途、オプション など）については、これらの解説ページを参照してください。
以下のリンクとそのリンクを参照してください。
また、以下の解説を参照してください。
ハイパーテキストという言葉がリンク（ハイパーリンク）を含む文書をさすことからもわかるとおり、リンクは HTML において最も重要な概念です。
リンクの要点 については、まず、
を参照してください。
また、以下の各項目を参照してください。
ビジュアルでインパクトのある Webページを作成するためには、画像は欠かせません。
最新の CSS3 による指定を用いると、従来からの
に加えて、さらに、
などの新しい画像の用途も利用できます。
Webページでの画像利用の要点 については、まず、
を参照してください。
また、以下の各項目を参照してください。
HTMLファイルや画像ファイルの数が増えてくると、用途別に別々のフォルダーに分けて保存した方が管理がし易くなります。 ところが、このように別々のフォルダーに分けたファイル同士をリンクしたり、HTMLファイルとは別のフォルダーに保管した画像の表示を行う場合には、「どこのフォルダーにあるのか」ということを「パス」をつけて明示してやる必要があります。 パスの指定方法には、
ブラウザー上部のURL表示で サーバー名 直後の "/"以下の部分 を 絶対パス といいます。
このように、Webサーバー上のルートフォルダー："/" を起点として、対象とするファイルやフォルダーの位置を指定する方法 を 絶対パス といいます。
たとえば、上記の リンクの書き方 での「3Dプリンタ画像」の URL：
上のようなルートフォルダー："/" を起点とした 絶対パス に対して、「現在表示をしているファイルのあるフォルダー」を基準にしてパスを書く方法 を 相対パス といいます。
たとえば、上の例 で、トップページのファイル： index.html に ~joho フォルダー（それが置いてあるフォルダー）の下にある images フォルダー の中にある 「3Dプリンタ画像」 へのリンクを書き込む場合、
また、相対パスでは、次のような便利な指定方法があります。
../ 現在のフォルダーの１つ上のフォルダー../AAA/BBB/CCC/../../../AAA/BBB/CCC/なお、上層のフォルダーのことを 親フォルダー、下層のフォルダーのことを 子フォルダー ということもあります。
相対パスを使っておくと、ファイルをフォルダーごと移動するような場合でも、相対パスが変わらないような範囲の移動であれば、HTMLファイル内のリンクの記述は、そのまま変更しなくて済みます。 一方、絶対パスでは、ファイルを移動するごとに、そのファイルに関連したリンクの記述は、必ず変更する必要があります。 そういう意味で、できるだけ相対パスを使う方が良い といえます。
HTML5 では、見栄えや装飾に関する指定はすべて CSS で行うことになっておりますので、配置に関する指定もほとんどすべて CSS を使用します。
とくに、HTML4.01 までによく使用されてきた <center>要素、align属性、valign属性 は廃止されて使用できませんので注意してください。
配置に関する指定をパターンに分けると次のようなものがあります。
要素内のテキストの配置指定には CSS の text-alignプロパティ と vertical-alignプロパティ を使用します。
ただし、表（テーブル）のセル内の文字列の配置指定に vertical-alignプロパティ を用いる際には指定しても無効な値がありますので注意してください。
具体例については、text-alignプロパティ と vertical-alignプロパティ の解説を参照してください。
幅をもつ要素で HTML4.01 までの align属性 による指定を置き換えるためには CSS の floatプロパティ を使用します。
floatプロパティ で "left" を指定すると、この要素は 左寄せに配置され、後続の要素はその右側に回り込みます。
floatプロパティ で "right" を指定すると、この要素は 右寄せに配置され、後続の要素はその左側に回り込みます。
ただし、floatプロパティ の指定対象となる要素は明確な幅を持つことが条件とされており、<p>要素 や <div>要素 で floatプロパティを指定する際には、同時に、widthプロパティで幅を指定する必要があります。
なお、後続要素の回り込みを解除するためには、解除位置の要素で clearプロパティ を指定します。
具体例については、これらの CSS プロパティの解説を参照してください。
要素の配置指定には CSS の marginプロパティ（margin-topプロパティ、margin-rightプロパティ、margin-bottomプロパティ、margin-leftプロパティ）が使用できます。
とくに、margin-leftプロパティ と margin-rightプロパティの値をともに "auto" に設定すると、中央配置にできます。
さらに、細かなページレイアウトを設定するためには、positionプロパティ と、 topプロパティ と leftプロパティ（左上頂点の位置）、または、rightプロパティ と bottomプロパティ（右下頂点の位置） を指定することで可能です。
具体例については、これらの CSS プロパティの解説を参照してください。
| HTMLソース 1 |
|---|
左揃え<br> ２行目 <hr> <div style="width:5em; margin: 0px auto;"> 中央配置１<br> ２行目 </div> <hr> <div style="text-align:right;"> 右揃え<br> ２行目 </div> <div style="text-align:center;"> 中央配置２<br> ２行目 </div> <div style="text-align:left;"> 左揃え２<br> ２行目 </div> |
| IEの表示 1 |
|---|
|
左揃え ２行目 ↑（指定なし）
中央配置１
２行目 ↑（<div style="width:5em; margin: 0px auto;">; ～ </div>の範囲）↑
右揃え
２行目 （<div style="text-align:right;">の範囲）↑
中央配置２
２行目 ↑（<div style="text-align:center;">の範囲）↑
左揃え２
２行目 ↑（<div style="text-align:left;>の範囲） |
| HTMLソース 2 |
|---|
<table border="1" style="width:250px; margin: 0px auto;">
<caption>【テーブルの例】</caption>
<tr style="background-color:#cccccc;">
<th><br></th>
<th>列-A</th>
<th>列-B</th>
<th>列-C</th>
</tr>
<tr>
<td>行-1</td>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
</table>
<table border="1" style="width:250px; float: right;">
<caption>【テーブルの例】</caption>
<tr style="background-color:#cccccc;">
<th><br></th>
<th>列-A</th>
<th>列-B</th>
<th>列-C</th>
</tr>
<tr style="text-align: center;">
<td>行-1</td>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
</table>
|
| IEの表示 2 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
↑（style="width: 250px; margin: 0px auto;"）↑
表は中央に表示されます。 セルの中の文字は「中央揃え」にならない！
<table border="1" style="width: 250px; float: right;">
と指定すると、このように表の周囲に文字列 の「回りこみ」が指定された形になります。 <tr style="text-align: center;"> の指定をしたことにより、 セルの中の文字は「中央揃え」になっている！ （「行-1」のブルーで表示した部分） |
これらは、linear-gradient( ) 関数 を背景に適用することで一応可能なことになっています。 linear-gradient( ) 関数 は、
のように、backgroundプロパティ の値として指定します。
まず、背景 については、次の例のようにするとできます。 （ただし、現状では、IE は垂直方向のグラデーションのみ表示可能です。 Chrome，Opera，Safari （同一のレンダリングエンジン） では、水平方向のグラデーションも表示可能ですが、角度を指定したグラデーションには、未対応です。 また、FireFox は、水平方向や角度を指定したグラデーションの表示にも対応しています。 これらには、ベンダープレフィックスが必要です。）
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample1, div.sample2, div.sample3 { width:500px; height:120px; }
div.sample1 {
background: linear-gradient(yellow, green, blue);
background: -moz-linear-gradient(yellow, green, blue);
background: -webkit-linear-gradient(yellow, green, blue);
}
div.sample2 {
background: linear-gradient(left, #ff0000, rgba(255,0,0,0));
background: -moz-linear-gradient(left, #ff0000, rgba(255,0,0,0));
background: -webkit-linear-gradient(left, #ff0000, rgba(255,0,0,0));
}
div.sample3 {
background: linear-gradient(left 45deg, red, orange, yellow,
green, blue, indigo, violet);
background: -moz-linear-gradient(left 45deg, red, orange, yellow,
green, blue, indigo, violet);
background: -webkit-linear-gradient(left 45deg, red, orange, yellow,
green, blue, indigo, violet);
}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample1">線形グラデーション：サンプル１</div> <div class="sample2">線形グラデーション：サンプル２</div> <div class="sample3">線形グラデーション：サンプル３</div> |
| ブラウザー 表示例 |
|---|
|
線形グラデーション：サンプル１
線形グラデーション：サンプル２
線形グラデーション：サンプル３
|
次に、文字 については、実際には上の背景の設定を行って、文字部分にのみそれが反映される形で実現できます。 （ただし、現状では、Chrome とそれと同一のレンダリングエンジンを持つ Opera や Safari のみの対応 で、background-clipプロパティ の値 text や text-fill-color プロパティ は、Chrome の独自仕様 です。 これらには、ベンダープレフィックスが必要です。）
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
font-size : 96px;
background-image: linear-gradient(#cfcfcf, purple, maroon);
background-image : -webkit-linear-gradient(#cfcfcf, purple, maroon);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample">グラデーション</div> |
| ブラウザー 表示例 |
|---|
|
グラデーション
|