HTMLの基本
1 HTMLとは。
2 HTMLの基本構造 1 。
3 HTMLの基本構造 2 。
4 相対パスと絶対パス。
5 HTMLファイルの作成方法。
HTMLファイルの基本
1 ドキュメントタイプを定義する、「DOCTYPE宣言」（ドックタイプ宣言）をする。
2 最低限必要な要素。
3 ページ全体の文字色を設定する。
4 ページ全体の背景色を設定する。
5 ページ全体の背景画像を設定する。
6 コメントを入れる。
文書情報
1 タイトルを付ける。
2 文字コードを宣言する。
3 スタイルシートやスプリクトの言語を設定する。
4 キーワード・内容の紹介・制作者名を入れる。
5 基準となるＵＲＬを設定する。
6 自動的に他のページに移動させる。
7 関連する他のページを示す。
文字に関する設定
1 フォントの種類を指定する。
2 フォントサイズを絶対値で指定する。
3 フォントの基本サイズを指定する。
4 フォントサイズを相対値で指定する。
5 フォントサイズを大きくする、小さくする。
6 文字列の色を指定する
7 文字列のスタイルを指定する
8 文字列を強調表示する
9 変更履歴(後から追加したことを)を表示する
10 変更履歴(削除したことを)を表示する
11 プログラム関連のテキストを表示する
12 略語や頭文語の説明を表示する
13 文字列の表記方向を指定する
14 連絡先を表す
15 短い引用文を表す
16 長い引用文を表す
17 参照先を表す
18 説明対象の用語である事を示す
19 特別な文字を表示させる
20 文字列に振り仮名を付ける
21 文字列をスクロールさせる
レイアウト
1 改行する。
2 改行を禁止する。
3 単語の区切り。
4 空白や改行を入力したとおりに表示する。
5 見出し。
6 目的に応じて範囲を設定する。
7 段落を設定する。
8 センタリングする。
9 行揃えを指定する。
10 横罫線を入れる。
リンク
1 他のページにリンク。
2 同じページ又は他のページの特定の位置ににリンクする。
3 リンク部分の文字の色を設定する。
4 リンク先を新しいウインドウで表示する。
5 メールソフトにリンク
リストを作る
1 マーク付リストを作る
2 リストマークを変える
3 番号付きリストを作る
4 リストの番号を変える
5 リスト番号の順番を変更する。
6 用語と説明のリストを作る。
BACK→>>共通属性 3 style属性
NEXT→>>共通属性 5 lang属性
title=""
属性値‥‥テキスト
要素名属性名説明属性値
各要素共通
classクラス名を用いてスタイルを適用させるスタイルシートのクラス名
idＩＤ名を用いてスタイルを適用させるスタイルシートのＩＤ名
title補足情報テキスト
style要素に対して直接スタイルを適用させるスタイルシート(スタイル情報)
lang言語コードの指定言語コード
dir文字表記の方向の指定lft(左から右)
rtl(右から左)
title属性は、ある要素に対して補足情報を付け足す属性です。
title属性を指定した要素にカーソル（ポインタ）を合わせることで補足説明等をポップアップでヘルプとして表示します。
使用例として下記のように記述すると

<b title="HyperText Markup Language">HTML</b>とは、Webページを記述するためのマークアップ言語。<b title="World Wide Web Consortium">W3C</b>が作成している規格で、最新版はHTML 4.01。

プラウザ表示例
下記のようにb要素のtitle属性で指定したテキストがホップアップで表示されます。(太字の所にマウスカーソルを合わして下さい。)

HTMLとは、Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。

また、制作者スタイルシートを参照している link要素に title属性を組み合わせた場合、title属性は制作者スタイルシートをグループ化する特別な意味を持ちます。
link要素から取り込まれるスタイルシートは次の三種類に分類されます。

① 固定スタイルシート
② 優先スタイルシート
③ 代替スタイルシート

link要素にtitle属性を付けてスタイルシートを読み込ませると、これは②の優先スタイルシートと呼ばれるスタイルシートになります。

①の固定スタイルシートとは、常に読み込まれるスタイルシートの事です(通常の指定方法)。これによって指定されているスタイルは、 常に適用されます。固定スタイルシートはtitle属性を付けずにlink要素を記述します。
<link rel="stylesheet" href="base.css" type="text/css">のように記述します。

②の優先スタイルシートとは、固定スタイルシートと共に優先的に読み込まれるスタイルシートの事です。 優先スタイルシートはtitle属性を付けてその名前でグループ化します。
<link rel="stylesheet" href="pre.css" type="text/css" title="スタイル1">のように記述します。
例1
<link rel="stylesheet" href="base.css" type="text/css">
<link rel="stylesheet" href="pre.css" type="text/css" title="スタイル1">
この例ではまず、固定スタイルシートのbase.cssが読み込まれます。 そして、二番目のpre.cssが優先スタイルシートとして共に読み込まれます。つまり、二つのスタイルシートが読み込まれることになります。
例2
<link rel="stylesheet" href="base.css" type="text/css">
<link rel="stylesheet" href="pre.css" type="text/css" title="スタイル1">
<link rel="stylesheet" href="hri.css" type="text/css" title="スタイル2">
この例ではまず、最初の例と同様に固定スタイルシートのbase.cssと、二番目の優先スタイルシートのpre.cssが読み込まれます。 しかし、この時点で最初に読み込まれる優先スタイルシートのグループはそのtitle属性値であるスタイル1に決定されます。 次のlink要素は優先スタイルシートではありますが、別の名前(スタイル2)を付けられていますので、グループが異なります。 そのため、この例では三番目のhri.cssは読み込まれません。
但し、両方とも同じグループ名を付けたら、両方のスタイルシートが固定スタイルシートと共に読み込まれます。

③の代替スタイルシートとは、通常では読み込まれない、訪問者がブラウザの操作で切り替えた場合に、「優先スタイルシート」の代わりとしてこのスタイルシートが適用されることになります。 代替スタイルシートを読み込むにはrel要素の値を「alternate stylesheet」とし、title属性で優先スタイルシートと同じように名前を付けてグループ化します。
<link rel="alternate stylesheet" href="rei.css" type="text/css" title="スタイル2">のように記述します。
例1
<link rel="stylesheet" href="base.css" type="text/css">
<link rel="alternate stylesheet" href="rei.css" type="text/css" title="スタイル2">
この例ではまず、固定スタイルシートのbase.cssのみが読み込まれます。 代替スタイルシートは訪問者がブラウザで任意に選択するまで読み込まれません。
訪問者がWebブラウザで代替スタイルシートのスタイル2を選択した場合、 固定スタイルシートのbase.cssと代替スタイルシートのrei.cssの両方が読み込まれます。
例2
<link rel="stylesheet" href="base.css" type="text/css">
<link rel="stylesheet" href="pre.css" type="text/css" title="スタイル1">
<link rel="stylesheet" href="hri.css" type="text/css" title="スタイル2">
<link rel="alternate stylesheet" href="rei.css" type="text/css" title="スタイル2">
この例ではまず、固定スタイルシートのbase.cssと優先スタイルシートで最初に出現するグループであるスタイル1のpre.cssが読み込まれます。 最初のグループとは異なる優先スタイルシートのhri.cssと代替スタイルシートのrei.cssは読み込まれません。
訪問者がWebブラウザで代替スタイルシートのスタイル2が選択されると、 固定スタイルシートのbase.cssと、 選択された代替スタイルシートと同じグループの優先スタイルシート、hri.css、 そして代替スタイルシートのrei.cssが読み込まれます。 そしてそれまで読み込まれていたスタイル1の優先スタイルシート、pre.cssは無効になります。

【スタイルシートの切り替え方法】 切り替えは、IE 8以上、Firefox、Operaなどで対応しています。（IE 7以下では対応していません） 「表示 → スタイルシート」の操作でスタイルシートを切り替えることができます。
サンプル
表を作る
1 表の基本形
2 表の大きさを設定する
3 表タイトルを設定する
4 セルの大きさを設定
5 セルを統合する
6 セルとセルの間隔を指定
7 セルの枠と内容との間隔を指定
8 表やセルに背景色を設定
9 表やセルに背景画像を設定
10 表の外枠の太さを設定
11 表の外枠の表示形式を設定
12 表のセルの表示形式を設定
13 表の行をグループ化する
簡単相互リンクツールtoo-search

相互リンク募集や、お友達のページ紹介、自分のお気に入りサイトを登録できる無料の検索エンジンツール。

登録を募集すれば色んなサイトとのつながりもでき、アクセスアップにも効果抜群。

今すぐ登録！