HTMLサンプル集のコンテンツ一覧

基本的なHTMLタグのサンプル集

シンプルなHTMLドキュメントのサンプル

最低限のHTMLタグだけで構成された、とてもシンプルなHTMLドキュメントのサンプルです。body要素の内部のテキストが、ブラウザにどのように表示されるかをデモンストレーションします。

シンプルな段落のサンプル

p(段落)要素の内部のテキストが、ブラウザにどのように表示されるかをデモンストレーションします。

段落の既定表示サンプル

p(段落)要素の既定表示のいくつかをデモンストレーションします。

改行のサンプル

HTMLドキュメントでの改行の使い方をデモンストレーションします。

HTMLの体裁に関する問題のサンプル

HTMLの体裁に関する問題をデモンストレーションします。

見出しのサンプル

HTMLドキュメント中の見出しを表示するタグをデモンストレーションします。

中央揃えの見出しサンプル

見出しを中央揃えにすることをデモンストレーションします。

水平線(区切り線)のサンプル

水平線(区切り線)を挿入する方法をデモンストレーションします。

コメントの挿入サンプル

HTMLのソースコードに隠れたコメントを挿入する方法をデモンストレーションします。

背景色のサンプル

HTMLページに背景色を設定することをデモンストレーションします。

背景画像のサンプル

HTMLページに背景画像を加える方法をデモンストレーションします。
テキストフォーマットのサンプル集

テキストフォーマットのサンプル

どのようにHTMLドキュメント中のテキストの書式を整えるかをデモンストレーションします。

整形済みテキストのサンプル

<pre>タグ内で、改行およびスペースをどのようにコントロールすることができるかをデモンストレーションします。

コンピュータ用コードタグのサンプル

コンピュータ用コードタグの表示の違いをデモンストレーションします。

連絡先の表示サンプル

HTMLドキュメントの中で連絡先を記述する方法をデモンストレーションします。

略語と頭文字のサンプル

略語または頭文字を扱う方法をデモンストレーションします。

引用文の表示サンプル

長い引用文や短い引用文を扱う方法をデモンストレーションします。

挿入、削除文字のサンプル

ドキュメントに挿入されたテキスト、または削除されたテキストを示す方法をデモンストレーションします。
リンクに関するタグのサンプル集

ハイパーリンクのサンプル

HTMLドキュメントの中でリンクを作成する方法をデモンストレーションします。

画像を使ったハイパーリンクのサンプル

リンクとして画像を使用する方法をデモンストレーションします。

リンク先を新しいウィンドウで開くサンプル

新しいウィンドウを開けることにより別のページにリンクする方法をデモンストレーションします。

ページ上の別の場所へリンクするサンプル

ドキュメントの別の部分へジャンプするリンクを使用する方法をデモンストレーションします。

フレームから抜け出すリンクサンプル

ホームページがフレームによって固定されている場合、リンクによってフレームから抜け出る方法をデモンストレーションします。

メールソフトを起動させるリンクのサンプル

メールソフト(メールソフトがインストールされている必要があります)を起動させる方法をデモンストレーションします。

メールソフトを起動させるリンクのサンプル2

このサンプルでは、より複雑なメールソフトの起動をデモンストレーションします。
フレームに関するタグのサンプル集

垂直方向のフレームセットサンプル

3つの異なるドキュメントで垂直方向のフレームセットを作る方法をデモンストレーションします。

水平方向のフレームセットサンプル

3つの異なるドキュメントで水平方向のフレームセットを作る方法をデモンストレーションします。

<noframes>タグの使い方サンプル

このサンプルでは、<noframes>タグを使用する方法をデモンストレーションします。

複雑なフレームセットのサンプル

3つのドキュメントでフレームセットを作る方法、および水平方向のフレームと垂直方向のフレームにそれらを混合する方法をデモンストレーションします。

noresize属性のサンプル

このサンプルでは、noresize属性の使い方をデモンストレーションします。

ナビゲーションフレームのサンプル

ナビゲーションフレームを作る方法をデモンストレーションします。

インラインフレームのサンプル

インラインフレーム(HTMLページの内部のフレーム)を作成する方法をデモンストレーションします。

フレーム内の指定されたセクションを表示するサンプル

ページが表示されたときにフレームの指定されたセクションを表示する方法をデモンストレーションします。

フレームナビゲーションで指定されたセクションを表示するサンプル

このサンプルでは、2つのフレームを使いデモンストレーションします。ナビゲーションフレーム中のリンクのうちの1つは、ターゲットファイル中の指定されたセクションにリンクします。
テーブルに関するタグのサンプル集

テーブル(表)のサンプル

HTMLドキュメントの中でテーブル(表)を作成する方法をデモンストレーションします。

テーブル(表)の境界線サンプル

テーブル(表)の境界線の違いをデモンストレーションします。

境界線を持たないテーブル(表)のサンプル

境界線を持たないテーブルをデモンストレーションします。

テーブル(表)の見出しサンプル

テーブルの見出しを表示する方法をデモンストレーションします。

空白セルのサンプル

内容を持っていないセルを扱うために「&nbsp;」を使用する方法をデモンストレーションします。

テーブル(表)のキャプション(説明文)サンプル

キャプション(説明文)を備えたテーブルをデモンストレーションします。

セルの結合サンプル

行や列のセルを結合する方法をデモンストレーションします。

table要素の中で他の要素を使うサンプル

table要素の内部で他の要素を表示する方法をデモンストレーションします。

セルの余白設定サンプル

セルの内容と境界線の間の余白を設定するために、cellpaddingを使用する方法をデモンストレーションします。

セルとセルの距離設定サンプル

セルとセルの間の距離を設定するために、cellspacingを使用する方法をデモンストレーションします。

テーブル(表)の背景色や背景画像を設定するサンプル

テーブル(表)に背景色や背景画像を使用する方法をデモンストレーションします。

セルの背景色や背景画像を設定するサンプル

1つ以上のセルへ背景を加える方法をデモンストレーションします。

セルの内容の整列サンプル

セルの内容を整列させるalign属性を使用する方法をデモンストレーションします。

frame属性のサンプル

テーブルの周りの境界線をコントロールするためにframe属性を使用する方法をデモンストレーションします。

テーブルを使った簡単なレイアウトのサンプル

HTMLページの一部を、新聞欄のようなカラムに分割する方法をデモンストレーションします。
リストに関するタグのサンプル集

番号なしリストのサンプル

番号なしリストの作成方法をデモンストレーションします。

番号付きリストのサンプル

番号付きリストの作成方法をデモンストレーションします。

タイプ別番号付きリストのサンプル

異なるタイプの番号付きリストをデモンストレーションします。

タイプ別番号なしリストのサンプル

異なるタイプの番号なしリストをデモンストレーションします。

入れ子リストのサンプル

どのようにリストを入れ子にすることができるかをデモンストレーションします。

複雑な入れ子リストのサンプル

より複雑な入れ子のリストをデモンストレーションします。

定義リストのサンプル

定義リストの作成方法をデモンストレーションします。
フォームに関するタグのサンプル集

テキストフィールドのサンプル

HTMLページにテキストフィールドを作成する方法をデモンストレーションします。ユーザーはテキストフィールドにテキストを入力することができます。

パスワードフィールドのサンプル

HTMLページにパスワードフィールドを作成する方法をデモンストレーションします。

チェックボックスのサンプル

HTMLページにチェックボックスを作成する方法をデモンストレーションします。ユーザーはチェックボックスを選択するかしないかを選ぶことができます。

ラジオボタンのサンプル

HTMLページにラジオボタンを作成する方法をデモンストレーションします。

シンプルなドロップダウンメニューのサンプル

HTMLページにシンプルなドロップダウンメニューを作成する方法をデモンストレーションします。ドロップダウンメニューは選択可能なリストです。

選択済みドロップダウンメニューのサンプル

あらかじめ選択された値を備えたシンプルなドロップダウンメニューを作成する方法をデモンストレーションします。ドロップダウンメニューは選択可能なリストです。

テキストエリアのサンプル

テキストエリア(複数行のテキスト入力エリア)を作る方法をデモンストレーションします。ユーザーはテキストエリアでテキストを入力することができます。テキストエリアでは、無制限に多くの文字を書くことができます。

ボタンのサンプル

ボタンを作成する方法をデモンストレーションします。ボタンにおいては、自分で好きな文字を定義することができます。

フォームのグループ化サンプル

フォームデータをグループ化する方法をデモンストレーションします。

入力フィールドとsubmit(送信)ボタンを備えたフォームサンプル

HTMLページにフォームを加える方法をデモンストレーションします。フォームには、2つの入力フィールドおよびsubmit(送信)ボタンを含んでいます。

チェックボックスとsubmit(送信)ボタンを備えたフォームサンプル

2つのチェックボックスおよびsubmit(送信)ボタンを含んでいるフォームをデモンストレーションします。

ラジオボタンとsubmit(送信)ボタンを備えたフォームサンプル

2つのラジオボタンおよびsubmit(送信)ボタンを含んでいるフォームをデモンストレーションします。
画像に関するタグのサンプル集

画像の挿入サンプル

ホームページの中に画像を表示する方法をデモンストレーションします。

文章内での画像の位置の設定サンプル

文章内の画像を整列させる方法をデモンストレーションします。

画像の回り込み表示のサンプル

段落の左側か右側に画像を回り込ませて表示させる方法をデモンストレーションします。

画像のサイズ設定のサンプル

異なるサイズに画像を適合させる方法をデモンストレーションします。

画像の代替テキストのサンプル

画像用の代替テキストを表示する方法をデモンストレーションします。

イメージマップのサンプル

クリック可能な領域と共に、画像を使ったイメージマップを作成する方法をデモンストレーションします。
背景に関する属性のサンプル集

背景とテキスト色のサンプル

ユーザーが読みやすい背景とテキスト色との関係をデモンストレーションします。

背景とテキスト色のサンプル2

ユーザーが読みにくい背景とテキスト色との関係をデモンストレーションします。

背景画像とテキスト色のサンプル

ユーザーが読みやすい背景画像とテキスト色との関係をデモンストレーションします。

背景画像とテキスト色のサンプル2

ユーザーが読みにくい背景画像とテキスト色との関係をデモンストレーションします。
フォントに関するタグのサンプル集

<font>タグのサンプル

<font>タグの使用方法をデモンストレーションします。

フォント設定のサンプル

スタイルシートでテキストのフォントを設定する方法をデモンストレーションします。

フォントサイズ設定のサンプル

スタイルシートでテキストのフォントサイズを設定する方法をデモンストレーションします。

フォントカラー設定のサンプル

スタイルシートでテキストのフォントカラーを設定する方法をデモンストレーションします。

フォント一括設定のサンプル

スタイルシートでテキストのフォント、フォントサイズおよびフォントカラーを一括設定する方法をデモンストレーションします。
スタイルに関するサンプル集

スタイルを備えたHTMLのサンプル

<head>セクション内に記述されたスタイル情報を備えたHTMLドキュメントをデモンストレーションします。

下線の無いリンクのサンプル

style属性を使用して下線の無いリンクを作る方法をデモンストレーションします。

外部スタイルシートのサンプル

外部スタイルシートにリンクするために<link>タグを使用する方法をデモンストレーションします。
ヘッダーに関するサンプル集

HTMLドキュメントタイトルのサンプル

head要素内部のタイトル情報はブラウザには表示されないことをデモンストレーションします。

リンクターゲット一括設定のサンプル

すべてのリンクを新しいウィンドウで開くように設定するために<base>タグを使用する方法をデモンストレーションします。
meta要素に関するサンプル集

HTMLドキュメント概要・説明のサンプル

meta要素内部にHTMLドキュメントの概要・説明を記述する方法をデモンストレーションします。

HTMLドキュメントキーワードのサンプル

meta要素内部にHTMLドキュメントに含まれるキーワードを記述する方法をデモンストレーションします。

自動ページ切り替えのサンプル

ホームページのURLが変わったときなどによく利用されるリダイレクト機能をデモンストレーションします。
スクリプトに関するサンプル集

スクリプト挿入のサンプル

HTMLドキュメントにスクリプトを挿入する方法をデモンストレーションします。

<noscript>タグのサンプル

スクリプトをサポートしないブラウザへの対処方法をデモンストレーションします。

HTMLチュートリアル利用上の注意

当サイト( HTMLチュートリアル )では、HTMLのトレーニングのみに情報を提供しています。当サイトの使用からいかなる問題が生じても、私たちはその責任を一切負わないものとします。以上のことをご理解の上で、当サイトをご活用ください。