逆引き辞典!HTMLタグとCSSソースコードの基本のすべてとまとめ

この記事は約69分で読めます。

現役エンジニアがおすすめするプログラミングスクール!

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回 日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。


無料相談はこちら!


Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社(株式会社LIG)が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。


無料相談はこちら!


テックキャンプ デザイナー転職(旧:【TECH::EXPERT】デザインスクール)

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。


無料相談はこちら!


SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。


無料相談はこちら!

ポートフォリオ制作実績
目次
  1. HTMLの基本タグ
    1. <!DOCTYPE>タグ: ドキュメントタイプの宣言方法とソースコード
    2. <HTML> タグ:HTML文書の宣言のためのソースコード
    3. <HEAD><META>タグ:ヘッダーの情報を記すためのソースコード
    4. <TITLE>タグ:題名やタイトルを付帯するためのソースコード
    5. <BODY> タグ:文章など本文を表示させるためのソースコード
    6. <H1>~<H6>タグ:見出しのタイトルを付帯するためのソースコード
    7. <P>タグ:段落(パラグラフ)を示すためのソースコード
  2. 文字や文章を編集するためのHTMLタグとソースコード
    1. <FONT>タグ:文字・フォントを編集するためのソースコード
    2. <BASEFONT> タグ:文字の基準サイズや色、フォントを編集するためのソースコード
    3. <B>タグ:文字を太くするためのソースコード
    4. <I>タグ:文字を斜めにするためのソースコード(斜体文字・イタリック)
    5. <U>タグ:文字に下線を引くためのソースコード(アンダーライン)
    6. <EM><STRONG><BIG>タグ:文字のサイズ・大きさを大きく表示するためのソースコード
    7. <SMALL>タグ:文字のサイズ・大きさを小さく表示するためのソースコード
    8. <S><STRIKE>タグ:文字に打ち消し線を表示するためのソースコード
    9. <TT>タグ:文字を幅を等しくするためのソースコード(等幅・インデント)
    10. <SUB>タグ:下付き文字を表示するためのソースコード(下に数字をつける)
    11. <SUP>タグ:上付き文字を表示するためのソースコード(上に数字をつける)
    12. <RUBY><RP><RT>タグ:文字に読み仮名・ルビをふるためのソースコード
    13. <MARQUEE>タグ:文字を自由にいろんな方向に移動させるためのソースコード
    14. <BLINK>タグ:文字を点滅・点灯させるためのソースコード
    15. <BDO>タグ:文字の方向を変更・設定・編集するためのソースコード(右から左に読む)
    16. <BR><NOBR><WBR>タグ: 文字や文章を改行するためのソースコード
    17. <DFN>タグ:ある言葉や用語を定義して説明するためのソースコード
    18. <DEL>タグ:打ち消し線をつけて削除するためのソースコード
    19. <INS>タグ:後から追加するためのソースコード
    20. <ADDRESS>タグ:住所や電話番号、メールなどの連絡先やお問い合わせを記すためのソースコード
    21. <BLOCKQUOTE><Q><CITE>タグ:引用文・参照・転載・参考文献であることを記すためのソースコード
    22. <CODE>タグ:インデントや改行を反映・適用させずソースコードを表示するためのソースコード
    23. <VAR>タグ:引数と変数を表示するためのソースコード
    24. <SAMP>:プログラムによる出力結果のサンプルであることを示すためのソースコード
    25. <KBD>:キーボード入力される文字であることを示すためのソースコード
    26. <ABBR><ACRONYM>タグ:略語(頭字語以外)であることを表すためのソースコード
  3. ハイパーリンクに関するソースコード
    1. <A>タグ:文字や画像などに対してハイパーリンクをつけるためのソースコード
    2. <MAP>タグ:ある画像1つに対して複数のハイパーリンクを貼り付けるためのソースコード
    3. <AREA>タグ:クライアントサイドイメージマップの範囲や領域を指定するためのソースコード
    4. <BASE>タグ: 相対パスの基準となるURIを設定するためのソースコード
    5. <LINK>タグ:関連する文書ファイルを設定するためのソースコード
  4. 画像や動画、音声ファイルなどのデータに関するソースコード
    1. <IMG>タグ:画像を表示するためのソースコード
    2. <EMBED>タグ:動画や音声ファイルなどのプラグインを必要とするデータを埋め込むためのソースコード
    3. <OBJECT>タグ:画像や動画、音声ファイルなどのデータを埋め込むためのソースコード
    4. <APPLET>タグ:Javaアプレットを挿入するためのソースコード
    5. <BGSOUND>タグ:効果音やBGMなどの音や音楽を鳴らすためのソースコード
  5. 表・レイアウト・フレームを編集するためのHTMLタグとソースコード
    1. <TABLE><TR><TH><TD>タグ:表を設定・編集するためのソースコード
    2. <THEAD><TBODY><TFOOT>タグ:表のヘッダー、ボディ、フッターを設定・変更・編集するためのソースコード
    3. <CAPTION><COL><COLGRONP>タグ:表に見出しやタイトルをつける
    4. <CENTER>タグ:文字、テキスト、画像などを中央に揃えるためのソースコード
    5. <SPACER>タグ:水平方向や垂直位置にスペースや空白を挿入するためのソースコード
    6. <MULTICOL>タグ:組段して段を均等にきれいに整理するためのソースコード
    7. <HR>タグ:横罫線を引くためのソースコード
    8. <FRAMESET><FRAME><NOFRAMES>タグ:ウィンドウをフレームに分割して分けるためのソースコード
    9. <IFRAME>タグ:インラインフレームを作るためのソースコード
    10. <ILAYER><NOLAYER>タグ:相対位置にレイヤーを表示させるためのソースコード
  6. 入力フォーム・リスト・ボタンを編集するためのHTMLタグとソースコード
    1. <FORM>タグ:入力・送信フォームを作成するためのソースコード
    2. <INPUT>タグ:フォームを作成するためのボタンや文字入力欄などの部品を作成するソースコード
    3. <INPUT type="submit">タグ:フォームの送信ボタンやリセットボタンなどを設定・変更・編集・作成するためのソースコード
    4. <INPUT type="image">タグ:フォームの画像ボタンを設定・変更・編集・作成するためのソースコード
    5. <INPUT type="button">タグ:フォームのボタンを設定・変更・編集・作成するためのソースコード
    6. <BUTTON>タグ:ボタンを設定・変更・編集・作成するためのソースコード
    7. <INPUT type="text">タグ:1行のテキストフィールドやテキストボックスを設定・変更・編集・作成するためのソースコード
    8. <INPUT type="password">タグ:パスワードを入力するための欄を設定・変更・編集・作成するためのソースコード
    9. <INPUT type="checkbox">タグ:チェックボックスを設定・変更・編集・作成するためのソースコード
    10. <INPUT type="radio">タグ:ラジオボタンを設定・変更・編集・作成するためのソースコード
    11. <INPUT type="hidden">タグ:データを非表示にして送信するためのソースコード
    12. <INPUT type="file">タグ:サーバーにファイルを送信するためのソースコード
    13. <SELECT>タグ:セレクトボックスを作成するためのソースコード
    14. <OPTGROUP>タグ:セレクトボックスの選択肢をグループ化して結合・連結するためのソースコード
    15. <OPTION>タグ:セレクトボックスの選択肢を指定するためのソースコード
    16. <TEXTAREA>タグ:複数行の入力フィールドを作成するためのソースコード
    17. <LEGEND>タグ:フォームの入力項目グループにタイトルを付けるためのソースコード
    18. <FIELDSET>タグ:フォームの入力項目をグループ化(結合)して一括管理してまとめるためのソースコード
    19. <LABEL>タグ:ボックスやボタンなどに名前や目印(ラベル)をつけるためのソースコード
    20. <ISINDEX>タグ:検索用語やキーワードの入力欄(テキストボックス)を作るためのソースコード
    21. <OL>タグ:数字や番号、アルファベットなどの順序ありのリスト(箇条書き)を作るためのソースコード
    22. <UL>タグ:数字や番号、アルファベットなどの順番なしのリスト(箇条書き)を作るためのソースコード
    23. <LI>タグ:リスト(箇条書き)の項目を作るためのソースコード
    24. <DL>タグ:定義リストであることを示すためのソースコード
    25. <DIR>タグ:リストを表示するためのソースコード
    26. <MENU> タグ:メニューのリスト(箇条書き)を表示するためのソースコード
  7. その他の重要なHTMLタグとソースコード
    1. <SCRIPT><NOSCRIPT>タグ:HTML文書にJavaScriptを埋め込む(挿入する)ためのソースコード
    2. <STYLE>タグ:スタイルシートを反映・適用させてCSSを作るためのソースコード
    3. <DIV>タグ:一つ・ひとかたまりのまとまった範囲を定義するためのソースコード(ブロック要素の場合)
    4. <SPAN>タグ:一つ・ひとかたまりのまとまった範囲を定義するためのソースコード(インライン要素の場合)
    5. <!-- --> <COMMENT>タグ:HTMLをコメントして無効化するためのソースコード
    6. <PRE>タグ:ソースコードを整形済みのテキストとしてきれいに表示させるためのソースコード
    7. <PLAINTEXT>:ソースコードをそのまま表示するためのソースコード
    8. <XMP>タグ:タグ・スペース・改行などを等しい幅のフォントでそのまま表示するためのソースコード
    9. <LISTING>タグ:ソースコードをそのまま表示するためのソースコード
HTMLとは、ハイパーテキスト・マークアップ・ランゲージ(HyperText Markup Language)の略称です。

Webサイトを構築するために作られた言語のことをいい、ハイパーとは文字通りハイパーリンクのことです。

ハイパーリンクとは、WordやExcelなどでも登場しますが、Webサイト上の下線(アンダーバー)のついている文字を押下すると別のサイトへジャンプすることをいいます。

つまりHTMLでできることとは、Webサイトから他のサイトへの被リンクをつけたり、画像、動画、音声、SNSなどのファイル情報を読み込むことです。

マークアップは目印という意味をもち、本文のいたるところに特定の役割や用途を割り振ることができます。

見出しをつけたい、文字を装飾したい、表をつけたい、箇条書きにしたいなど、用途に応じてマークアップ(目印)を設定します。

HTMLファイルを保存する際は、テキストエディタやメモ帳、Atom、Bracketsなどに書き、ファイル名の末尾(拡張子名)を「.html」にします。

Bracketsの場合は実行結果がすぐに反映されるので、自分が今どんな作業をしているか、作りながら試してみることができます。初学者や初心者のソースコードの学習にはおすすめです。

HTMLとCSSとJavaScriptのライブプレビューできるアプリBrackets(ブラケッツ)をインストールする方法
HTMLとCSSとJavaScriptのライブプレビューできるアプリBrackets(ブラケッツ)をインストールする方法を紹介します。 インストール中にたまに怪しい通知が出ることがありますが、無視しましょう。間違って違うソフトウェアや...

 

とくにHTMLは簡単なので、Webサイトを作成するなどWeb系のプログラミングを勉強する上では、一番最初に学習するべき言語です。

IT企業を志望している就活生の学生や未経験で初めてプログラミングをする方など、ポートフォリオやテスト開発で作成する際にもぜひ活用してみましょう。

 

スポンサーリンク

HTMLの基本タグ

<!DOCTYPE>タグ: ドキュメントタイプの宣言方法とソースコード

HTMLにおける文書型の定義にDTD(Document Type Definition)があります。
DTDを宣言するためのタグとのことを<!DOCTYPE>タグといいます。
<!DOCTYPE>タグは通常、<HTML>タグの上に記載することがルールとして決まっています。

HTML4.01のDTD

・Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
・Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
・Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<HTML> タグ:HTML文書の宣言のためのソースコード

<html>
<head>
<title>UpdownTech</title>
</head>
<body>
UpdownTech
</body>
</html>
<HTML>~</HTML>タグ内は、ある文書がHTMLの文書だということを示し、文頭や文末に置きます。
<HEAD>~</HEAD>タグ内は、HTMLの題(タイトル)などヘッダーの情報をプログラミングします。
さらに、<BODY>~</BODY>タグ内は、Google ChromeやInternet Explorerなどの画面(ブラウザ)に反映させるための文章などをプログラミングしていきます。
HTMLでプログラミングを行う際は、これら<HTML>、<HEAD>、<BODY> といった3つの基本タグを使用していきます。

<HEAD><META>タグ:ヘッダーの情報を記すためのソースコード

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="author" content="UpdownTech">
<meta name="keywords" content="UpdownTech,テクノロジー,IT,ソースコード,プログラミング">
<meta name="description" content="逆引き">
<meta name="robots" content="all">
<title>題</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
本文
</body>
</html>
<HEAD>タグ内には、著者、検索語、題、連携させる別ファイルのCSSなどを書いておきます。なお、こちらに記述したものは実際に画面上(ブラウザ上)には表示されることは通常の場合、ほぼありえません。
<META>タグは、HTMLに関連する情報であるメタ情報を<HEAD>~</HEAD>内に記載します。
あくまで<META>タグなどの「情報を記載するための場所」ということで理解しておきましょう。

文字コードの区分け

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">

著者の指定

<meta name="author" content="UpdownTech">

キーワードや検索語の選定

<meta name="description" content="UpdownTech,テクノロジー,IT,ソースコード,プログラミング">
<meta name="keywords" content="HTML,CSS,JavaScript,PHP,Java">

クローラーへ通知

<!-- noindex = クローラーへの登録回避、nofollow = リンクを辿らなくする -->
<meta name="robots" content="noindex,nofollow">

キャッシュ有効期間や消去のための時間の設定

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Sat, 31 Aug 2002 17:35:42 GMT">

その他の重要な<META>タグ

<!-- このHTMLをプログラミングしたエディタ名 -->
<meta name="generator" content="notepad">


<!-- 別リンクなどへ10秒後にupdowntech.comに自動的に飛ぶ(画像などのリンクも可能) -->
<meta http-equiv="refresh" content="10; url=updowntech.com">


<!-- CSSやJavaScriptとの連携 -->

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<TITLE>タグ:題名やタイトルを付帯するためのソースコード

<html>
<head>
<title>題目</title>
</head>
<body>
本文テキスト
</body>
</html>
<TITLE>タグは、HTMLの題(タイトル)です。<HEAD></HEAD>で囲まれた範囲の中に書かなければなりません。
表示される場所は指定ブラウザのツールバーです。

<BODY> タグ:文章など本文を表示させるためのソースコード

<BODY>~</BODY>タグ内は、ブラウザに反映される本文をプログラミングしていきます。

<H1>~<H6>タグ:見出しのタイトルを付帯するためのソースコード

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<h3>タイトル3</h3>
<h4>タイトル4</h4>
<h5>タイトル5</h5>
<h6>タイトル6</h6>
<H1>~<H6>はHeadingのことを表し、見出し(タイトル)を指しています。 <H1>が一番大きく表示されるタイトルで、<H6>が一番大きく表示されるタイトルになっています(普通は<H6>まで使うことができます)。
見出しやタイトルをおしゃれできれいに装飾したい場合は、style.cssを使ってプログラミングすると良いでしょう。

<P>タグ:段落(パラグラフ)を示すためのソースコード

<p>
あいうえお
</p>
<p style="line-height: 200%">
かきくけこ
</p>
<P>タグはParagraphの略で、<P>~</P>内の部分が段落になります。通常の画面表示において、<P>~</P>の周りに改行が行われますが、改行が目的ならば普通は<BR>タグでプログラミングします。
以下の要素をソースコードに加えることで、文字の配置や位置を変更・編集・設定することができます。

<P>タグの活用方法

・align=”center” ・・・ 中央揃えを指定
・align=”justy” ・・・ 両端揃えを指定
・align=”left” ・・・ 左揃えを指定
・align=”right” ・・・ 右揃えを指定
スポンサーリンク

文字や文章を編集するためのHTMLタグとソースコード

<FONT>タグ:文字・フォントを編集するためのソースコード

<font size="2" color="#333">黒色</font><br>
<font size="4" color="pink">ピンク色</font><br>
<font size="6">文字の大きさ6</font><br>
<font size="+3">普通の文字の大きさより+3大きい</font><br>
<font size="+5">普通の文字の大きさより+5大きい</font><br>
<face="MS ゴシック">ゴシック体の種類の文字</font><br>
<face="MS 明朝,平成明朝">明朝体の種類の文字</font>
<FONT>タグは、文字(フォント)の設定を変更・編集・指定します。文字の大きさや色、種類などを変更できますが、基本的にはCSSを使ってプログラミングしたほうが無難です。
style.cssの記述の場合、
・文字の色 ・・・ <span style=”color: #333333″>~</span>
・大きさ ・・・ <span style=”font-size: small”>~</span>
・種類 ・・・ <span style=”font-family: “MS 明朝”,serif”>~</span>
とプログラミングします。

<BASEFONT> タグ:文字の基準サイズや色、フォントを編集するためのソースコード

<basefont size="1" face="MS ゴシック,MS 明朝">
通常の大きさは1<br />
<font size="+5">大きい</font><br />
<font size="-5">小さい</font><br /></basefont>
<BASEFONT>タグは、基準のサイズなどを自分で設定し、「+」「-」の切り替えによって変更できるようになります。ただし、1から7までと少ない段階になっております。

<B>タグ:文字を太くするためのソースコード

<b>太字</b>はこのように表示されます。
<B>タグはBoldのことを表し、文字を太字に設定します。
CSSの方が一般的で、style.cssの場合は、<span style=”font-weight: bold”>~</span>です。
強調する際には<STRONG>タグも使ってプログラミングできます。

<I>タグ:文字を斜めにするためのソースコード(斜体文字・イタリック)

<i>斜めの字</i>はこのように表示されます。
<I>タグはItalicのことを表し、文字が斜体(斜めの字)に変わります。
こちらもCSSの方が一般的で、style.cssの場合は、<span style=”font-style: italic”>~</span> です。代わりに<EM>タグを使うこともできます。

<U>タグ:文字に下線を引くためのソースコード(アンダーライン)

<u>重要なこと</u>には下線を引きましょう。
<U>タグはUnderLine(アンダーライン)のことを表し、文字に下線を引くことができます。
これもCSSの方が一般的で、style.cssの場合は、 <span style=”text-decoration: underline”>~</span> です。

<EM><STRONG><BIG>タグ:文字のサイズ・大きさを大きく表示するためのソースコード

<em>強調</em><<strong>強調</strong>、通常の文字を<big>でかく</big>表示する。
<EM>、<STRONG>、<BIG>タグはいずれも文字を強調することができますが、強調の度合いや扱い方が少し異なります。
しかし、CSSの方が一般的で、style.cssの場合は、<span style=”font-size: large”>~</span> です。

 

<SMALL>タグ:文字のサイズ・大きさを小さく表示するためのソースコード

通常の文字を<small>ちっちゃく</small>表示します。
<SMALL>タグは文字の大きさを小さくする場合にプログラミングします。
こちらもCSSの方が一般的で、style.cssの場合は、<span style=”font-size: small”>~</span> です。

<S><STRIKE>タグ:文字に打ち消し線を表示するためのソースコード

<s>運動会を開催します</s><br />雨天のため中止とさせていただきます。
<S><STRIKE>タグは、打ち消し線を表示するためのタグになります。<DEL>タグとも類似しています。
これもCSSの方が一般的で、style.cssの場合は、 <span style=”text-decoration: line-through”>~</span>です。

<TT>タグ:文字を幅を等しくするためのソースコード(等幅・インデント)

左に揃う<br><tt>右にインデント</tt><br>左に揃う<br><tt>右にインデント</tt>
<TT>~</TT>内の文字を等幅フォント・インデントして表示します。
CSSの方が一般的で、style.cssの場合は、<span style=”font-family: monospace”>~</span>です。

<SUB>タグ:下付き文字を表示するためのソースコード(下に数字をつける)

炭酸水素ナトリウムを分解する式は、
2NaHCO<sub>3</sub>→Na<sub>2</sub>CO<sub>3</sub>+CO<sub>2</sub>+H<sub>2</sub>O
です。
<SUB>はSubscriptのことを表し、文字の下に数字をつけることができます。対応していないブラウザで表示しようとすると認識されず、通常の文字になってしまいます。

<SUP>タグ:上付き文字を表示するためのソースコード(上に数字をつける)

2の2乗は4ですが、2<sup>2</sup>とも書けます。
<SUP>はSuperscriptのことを表し、 文字の上に数字をつけることができます。対応していないブラウザで表示しようとすると認識されず、通常の文字になってしまいます。

<RUBY><RP><RT>タグ:文字に読み仮名・ルビをふるためのソースコード

葡萄の読み方→
<ruby>
<rb>葡萄
<rp>
<rt>ぶどう
<rp>
</ruby><br/>
檸檬の読み方→
<ruby>
<rb>檸檬
<rp>
<rt>れもん
<rp>
</ruby><br/>
魑魅魍魎の読み方→
<ruby>
<rb>魑魅魍魎
<rp>
<rt>ちみもうりょう
<rp>
</ruby>
Internet Explorerがオリジナルに採用したタグであり、<RUBY>・<RB>・<RT>・<RP>タグは ルビをふる場合に使ってプログラミングします。
<RB>はRubyBaseのことを表し、ルビをふる対象となるテキストをさします。<RT>はRubyTextのことを表し、ルビの読みを示しています。<RP>はRubyParenthesesのことを表し、ルビの読みを囲む括弧等の記号です。

<MARQUEE>タグ:文字を自由にいろんな方向に移動させるためのソースコード

<marquee>何も効果なし</marquee>
<marquee width="50%">なぜかこれだけ途中50%の位置から登場</marquee>
<marquee behavior="scroll">そのまま左へ通過する</marquee>
<marquee behavior="alternate">ターンする</marquee>
<marquee behavior="slide">左端で止まる</marquee>
<marquee direction="left">馬耳東風(左へ向かう)</marquee>
<marquee scrolldelay="500">まじでゆっくりしていってね?</marquee>
<marquee scrolldelay="5">ゆっくりしていってね</marquee>
<marquee scrollamount="20">ふつう</marquee>
<marquee scrollamount="30">高速</marquee>
<marquee scrollamount="80">めちゃめちゃ高速なので見えない</marquee>
Internet Explorerがオリジナルに開発したタグです。文字をいろんな方向にに移動させます。テキストだけでなく画像も移動可能です。
また、移動の仕方として移動の範囲や速度、回数なども変更可能です。
ただし、Netscape Navigatorのブラウザで表示しようと思っても、ただの動かない普通の文字として表示されてしまいます。その場合は、アニメーション効果を適用させることができる言語であるJavaScriptでプログラミングしましょう。
または、CSS3のマーキー系プロパティを活用してプログラミングします。

<MARQUEE>タグの活用方法

direction=”” ・・・  移動の方向
loop=”” ・・・ 移動の回数
scrolldelay=”タイム” ・・・ 再登場までのタイム
scrollamount=”進んでいく距離” ・・・ 再登場までに進んでいく距離
behavior=”” ・・・ 移動方法の指定
behavior=”scroll” ・・・ 横切りを繰り返す
behavior=”alternate” ・・・ 往復移動をリピートする
behavior=”slide” ・・・ 画面端でストップ
height=”” ・・・ 高さ
width=”” ・・・ 範囲
hspace ・・・ 左右スペース
vspace ・・・ 上下スペース

<BLINK>タグ:文字を点滅・点灯させるためのソースコード

<blink>ピカピカ</blink>
<BLINK>タグは、文字を点滅・点灯して反映してくれます。ただし、Netscape Navigatorで使えるタグで、Internet Explorerのようなブラウザの場合、通常の文字として処理されます。
<BLINK>タグのほかにも、CSSに text-decoration: blinkで同様の機能を使うことができますが、実際にWebページで表示しようとすると見にくい表示になってしまうため、あまり使われておりません。

<BDO>タグ:文字の方向を変更・設定・編集するためのソースコード(右から左に読む)

<bdo dir="rtl">
あいうえお
</bdo>
<BDO>タグは、文字の読む方向を設定・変更・編集・作成することができます。最近では日本でも使われることもなくなりましたが、他国語の表示に使ってプログラミングすることもあります。
style.cssの場合、<p style=”direction: rtl; unicode-bidi: bidi-override;”>~</p>でプログラミングすれば、同様の効果が得られます。

<BR><NOBR><WBR>タグ: 文字や文章を改行するためのソースコード

<BR>とは英語でBreakのことを表し、文字や画像を改行することができます。Internet ExplorerやNetscape Navigatorの画面表示では認識されず、半角スペースになってしまいます。
反対に<NOBR>~</NOBR>タグ内の文字や画像は、改行がなくなります(CSSの場合、white-space: nowrap)。
<WBR>タグは、<NOBR>内で改行しても自動的に良い位置を選定してくれます。

<DFN>タグ:ある言葉や用語を定義して説明するためのソースコード

もののインターネット化のことを<dfn>IoT</dfn>といいます。
<DFN>タグはDefinitionのことを表し、ある言葉や用語を定義して説明する際に使ってプログラミングします。

<DEL>タグ:打ち消し線をつけて削除するためのソースコード

<del>2020年IT企業未経験新卒採用</del><br />
誠に勝手ながら2020年の採用を終了しました。
<DEL>タグは文字に打ち消し線を足して削除します。上記のようなソースコードの場合に使用します。<S><STRIKE>タグと同じです。

<INS>タグ:後から追加するためのソースコード

現在のページは閉鎖しました。<ins title="新規サイトのご案内" datetime="2020-04-01T00:00:00+00:00">お探しのページはこちらに移設しました。</ins>
<INS>はInsertのことを表し、後から追加する事項を記述します。

<ADDRESS>タグ:住所や電話番号、メールなどの連絡先やお問い合わせを記すためのソースコード

<address>
お問い合わせはこちら<br>
UpdownTech<br>
公式HP:<a href="https://updowntech.com/" >http://updowntech.com/</a><br>
Eメール:<a href=""></a><br>
住所:<br>
TEL:<br>
FAX:
</address>
<ADDRESS>タグは、住所や電話番号、メールなどの連絡先を設定できます。Internet ExplorerやNetscape Navigatorの場合、斜体(斜め字)で画面に反映されます。

<BLOCKQUOTE><Q><CITE>タグ:引用文・参照・転載・参考文献であることを記すためのソースコード

<blockquote>引用文</blockquote>
<BLOCKQUOTE>タグは引用文や参照、文献からの抜粋などを記述できます。
上記のソースコードは短めの引用文ですが、通常引用文を用いる際は、もっと長く転載します。なお、改行なしで表示したい場合は、<Q>タグを使ってプログラミングします。
<CITE>タグの場合は、本の名前や著者などの引用先や出典先、参照先を記述することができます。

<CODE>タグ:インデントや改行を反映・適用させずソースコードを表示するためのソースコード

<pre>
<code>updown{
color:333;
}</code></pre>
<CODE>タグ内は、ソースコードを強調して表示することができます。
WordPressのHTMLを整形したい場合は<pre class=”prettyprint”></pre>タグで囲みます。

<VAR>タグ:引数と変数を表示するためのソースコード

値を変数<var>int</var>に代入します。
<VAR>タグはVariableの略で、<VAR>~</VAR>で囲まれた部分が変数や引数であることを示します。 Internet Explorer、Netscape Navigatoの表示においては、斜体になります。

<SAMP>:プログラムによる出力結果のサンプルであることを示すためのソースコード

<samp>受付完了いたしました</samp>という画面に遷移します。
<SAMP>タグは、プログラムによる出力結果のサンプルであることを表示してくれます。Internet Explorerなどにおいては、等幅フォントが適用されます。

<KBD>:キーボード入力される文字であることを示すためのソースコード

次に、<kbd>Ctrl + c </kbd>を押します。
<KBD>タグはKeyboardのことを表し、キーボードから入力されるテキストであることを示します。普通の画面においては等幅フォントになります。

<ABBR><ACRONYM>タグ:略語(頭字語以外)であることを表すためのソースコード

<abbr title="Hypertext Markup Language">HTML</abbr>を学習しましょう。
<acronym title="Google Apple Facebook Amazon">GAFA</acronym>をご存知ですか?
<ABBR><ACRONYM>とはAbbreviationのことを表し、略語を表します。
スポンサーリンク

ハイパーリンクに関するソースコード

<A>タグ:文字や画像などに対してハイパーリンクをつけるためのソースコード

<a href="updowntech.htm">相対パス</a><br>
<a href="https://updowntech.com/">絶対パス</a><br>
<a href="../test.htm">1つ上のディレクトリ</a><br>
<a href="mailto:~~~">メール</a><br>
<a href="../test.htm"><img src="../test/test.jpg"></a><br>
<a name="updown">ファイルの途中にupdownという名前を付けます</a><br>
<a href="#updown">updownと名前を付けた場所へリンクします</a><br>
<a href="test.htm#updown">別ファイルの名前を付けた場所へリンクします</a>
<a href="https://updowntech.com/" target="_blank">別画面を開いてリンクします</a><br>
<a href="https://updowntech.com/" target="_self">リンク元と同じフレームにリンクします</a><br>
<a href="https://updowntech.com/" target="_parent">ひとつ上の親フレームにリンクします</a><br>
<a href="https://updowntech.com/" target="_top">フレームをすべて解除してリンクします</a><br>
<a href="https://updowntech.com/" target="updown">updownという名前のフレームにリンクします</a><br>
<A>タグはアンカー(Anchor)のことを表し、リンクを設定・変更・編集・作成するタグです。

<MAP>タグ:ある画像1つに対して複数のハイパーリンクを貼り付けるためのソースコード

<img src="test.jpg" usemap="#test" alt="test" width="400" height="400">
<map name="test">
<area href="a.htm" shape="rect" alt="しかく" coords="">
<area href="a.htm" shape="circle" alt="まる" coords="">
<area href="a.htm" shape="poly" alt="多角形" coords="">
</map>

<AREA>タグ:クライアントサイドイメージマップの範囲や領域を指定するためのソースコード

<img src="sample/area.gif" usemap="#sample" alt="サンプル" width="384" height="128">
<map name="sample">
<area href="aaa.htm" shape="rect" alt="四角形" coords="15,19,126,104">
<area href="bbb.htm" shape="circle" alt="円形" coords="197,69,54">
<area href="ccc.htm" shape="poly" alt="多角形" coords="306,12,261,109,378,92">
</map>

<BASE>タグ: 相対パスの基準となるURIを設定するためのソースコード

<html>
<head>
<base href="https://updowntech.com/" target="_self">
</head>
<body>
<a href="https://updowntech.com/">ホーム</a>
</body>
</html>

<LINK>タグ:関連する文書ファイルを設定するためのソースコード

<head>
<title>題</title>
<link rel="index" href="../index.htm"> ←index
<link rel="search" href="kensaku.html"> ・・・ 検索
<link rel="contents" href="mokuji.htm"> ・・・ 目次
<link rel="prev" href="001.htm"> ・・・ 前頁
<link rel="next" href="003.htm"> ・・・ 次頁
<link rel="stylesheet" href="style.css" type="text/css"> ・・・CSS
</head>
<LINK>タグは<HEAD>~</HEAD>内に記述します。
スポンサーリンク

画像や動画、音声ファイルなどのデータに関するソースコード

<IMG>タグ:画像を表示するためのソースコード

<img src="../images/UpdownTech1.jpg" width="100" height="100" alt="UpdownTech1" title="画像">
<IMG>タグはImageのことを表し、JPEG、PNG、GIFなどの画像を表示します。画像の指定はsrc属性を使ってプログラミングします。widthおよびheightを設定することによって、表示するための広さや高さを調整します。

<EMBED>タグ:動画や音声ファイルなどのプラグインを必要とするデータを埋め込むためのソースコード

<embed src="../images/test.jpg" width="400" height="400"></embed>
<EMBED>タグは、「.mpg」「.swf」「.mov」などの動画や、「.wav」「.aif」「.au」「.mid」「.ra」などの音声等プラグインを必要とするデータをページに埋め込む場合に使ってプログラミングします。
反対に、<NOEMBED>タグは、プラグインが使えない際に表示する内容をプログラミングします。

<OBJECT>タグ:画像や動画、音声ファイルなどのデータを埋め込むためのソースコード

<object data="../images/test.jpg" type="test/jpg" width="400" height="400">
</object>

<APPLET>タグ:Javaアプレットを挿入するためのソースコード

<applet code="array.class" width="400" height="400">
<param name="bgcolor" value="f3f3f3">
<param name="bgimage" value="test.jpg">
</applet>
<APPLET>タグは、HTML文書内に、Javaアプレットを埋め込むことができます。<PARAM>タグと併せて使うことで、パラメータを指定することができます。

<BGSOUND>タグ:効果音やBGMなどの音や音楽を鳴らすためのソースコード

<html>
<head>
<title>音源再生</title>
<bgsound src="updowntech.wav" loop="infinite">
</head>
<body>
</body>
</html>
<BGSOUND>タグは、効果音やBGMなどの音や音楽を鳴らすことができます。<HEAD>~</HEAD>内に書くことによって再生でき、Internet Explorerに使われるタグです。再生されるタイミングはページを開いた時になります。
「.wav」「.aif」「.au」「.mid」「.ra」のような音声ファイルが再生できます。自分で好きなファイルを用意しましょう。
なお、<BGSOUND>タグは、loop属性では再生回数を操作することができます。 infiniteを設定すると、そのページが閉じられるまで永遠に音を鳴らし続けます。
ほかにも、balance属性によって、左右の音の聞こえるバランスを-10000から10000まで調整することができます。
スポンサーリンク

表・レイアウト・フレームを編集するためのHTMLタグとソースコード

<TABLE><TR><TH><TD>タグ:表を設定・編集するためのソースコード

<table border="1" width="1000" cellspacing="0" cellpadding="5" bordercolor="#333">
<tr>
<th bgcolor="pink"><font color="#333">音楽家</font></th>
<th bgcolor="pink" width="350"><font color="#333">どんな人か</font></th>
<th bgcolor="pink" width="400"><font color="#333">作品例</font></th>
</tr>
<tr>
<td bgcolor="skyblue" align="right" nowrap>バッハ</td>
<td bgcolor="#FFFFFF" valign="top" width="350">音楽の父である。18世紀にドイツで活躍した。</td>
<td bgcolor="#FFFFFF" valign="top" width="400">トッカータとフーガニ短調、G線上のアリア</td>
</tr>
<tr>
<td bgcolor="skyblue" align="right" nowrap>アントニオ・ヴィヴァルディ</td>
<td bgcolor="#FFFFFF" valign="top" width="350">ヴェネツィア出身のバロック後期の作曲家で、ヴァイオリニスト。</td>
<td bgcolor="#FFFFFF" valign="top" width="400">四季、グローリア</td>
</tr>
</table>
<TABLE>タグは表を設定・編集することができます。<TR>タグで横一行を設定し、<TH>タグによって表の項目のセルを、<TD>タグによって表の内容のセルを編集することができます。
なお、表の装飾やデザインを変えて編集したい場合には、CSSを使ってプログラミングしましょう。

<THEAD><TBODY><TFOOT>タグ:表のヘッダー、ボディ、フッターを設定・変更・編集するためのソースコード

<table border="1" width="1000" cellspacing="0" cellpadding="5" bordercolor="#333">
<thead>
<tr>
<th bgcolor="pink"><font color="#333">音楽家</font></th>
<th bgcolor="pink" width="350"><font color="#333">どんな人か</font></th>
<th bgcolor="pink" width="400"><font color="#333">作品例</font></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" bgcolor="#CCCCCC" align="right">バロック時代</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor="skyblue" align="right" nowrap>バッハ</td>
<td bgcolor="#FFFFFF" valign="top" width="350">音楽の父である。18世紀にドイツで活躍した。</td>
<td bgcolor="#FFFFFF" valign="top" width="400">トッカータとフーガニ短調、G線上のアリア</td>
</tr>
<tr>
<td bgcolor="skyblue" align="right" nowrap>アントニオ・ヴィヴァルディ</td>
<td bgcolor="#FFFFFF" valign="top" width="350">ヴェネツィア出身のバロック後期の作曲家で、ヴァイオリニスト。</td>
<td bgcolor="#FFFFFF" valign="top" width="400">四季、グローリア</td>
</tr>
</tbody>
</table>
テーブル(<TABLE>)の行はその機能により、 ヘッダ(<THEAD>~</THEAD>)・ ボディ(<TBODY>~</TBODY>)・フッタ(<TFOOT>~</TFOOT>)に分けられます。
<THEAD>タグは表のヘッダー(頭)、<TBODY>タグは表のボディ(本体)、<TFOOT>タグは表のフッター(足)を設定・編集・変更することができます。
これらの設定のメリットは、表のヘッダーや表のフッターを固定表示しながらスクロール移動することができる点です。
上記のソースコードのように、順番は①<THEAD>②<TFOOT>③<TBODY>で書きます。

<CAPTION><COL><COLGRONP>タグ:表に見出しやタイトルをつける

<table border="1">
<caption>おにぎりの具</caption>
<colgroup span="2" width="100" align="center">
<colgroup width="100">
<colgroup width="150">
<thead>
<tr><th>具</th><th>評価</th><th>感想</th></tr>
</thead>
<tbody>
<tr><td>焼きたらこ</td><td>◎</td><td>おいしい。</td></tr>
<tr><td>シーチキン</td><td>◎</td><td>おいしい。</td></tr>
<tr><td>牛肉</td><td>◎</td><td>おいしい。</td></tr>
<tr><td>梅干し</td><td>○</td><td>おいしい。</td></tr>
<tr><td>おかか</td><td>○</td><td>おいしい。</td></tr>
</tbody>
</table>
<CAPTION>タグは、表にタイトルを付帯することができます。

<CENTER>タグ:文字、テキスト、画像などを中央に揃えるためのソースコード

<center>中央揃え</center>
<div style="text-align:center">中央揃え</div>
<CENTER>タグは、文字や画像を中央に置くことができます。

<SPACER>タグ:水平方向や垂直位置にスペースや空白を挿入するためのソースコード

Netscape Navigatorのブラウザを使った際に、<spacer type="horizontal" size="50">水平方向の空白や</spacer><spacer type="vertical" size="25">垂直方向の空白が適用されます。</spacer>
<SPACER>タグは、Netscape Navigatorで使えます。水平方向や垂直方向に空白を入れることができます。空白の大きさの調整はsize属性で行います。

<MULTICOL>タグ:組段して段を均等にきれいに整理するためのソースコード

<multicol cols="3">
<p>
プログラミングを学習するためには
</p>
<p>
写経が欠かせません。
</p>
<p>
写経したら実用化できるように努力しましょう。
</p>
</multicol>
<MULTICOL>タグは、Netscape Navigatorで使うことができます。組段して均等に段を整理することができます。
幅は、gutter属性を使ってプログラミングします(初期値:10px)。

<HR>タグ:横罫線を引くためのソースコード

<hr>
<hr width="80%">
<hr width="100">
<hr size="10">
<hr width="10" size="10">
<hr size="5" color="yellow" noshade>
<hr width="500" color="#ff0000" align="center">
<HR>はHorizontal Ruleのことを表し、名前の通り横罫線を引くことができます。

<FRAMESET><FRAME><NOFRAMES>タグ:ウィンドウをフレームに分割して分けるためのソースコード

<html>
<head><title>フレームソースコードパターン</title></head>
<frameset rows="100,*">
<frame src="frame_up.htm" name="up">
<frameset cols="150,*">
<frame src="frame_left.htm" name="left">
<frame src="frame_right.htm" name="right">
</frameset>
<noframes>
このサイトはフレームを使ってプログラミングしております。
</noframes>
</frameset>
<FRAMESET>タグは、画面を何個かのフレームに分けることができます。

<IFRAME>タグ:インラインフレームを作るためのソースコード

明日の天気は<br>
<a href="iframe_hare.htm" target="sample">晴れ</a><br>
<a href="iframe_kumori.htm" target="sample">曇り</a><br>
<a href="iframe_ame.htm" target="sample">雨</a><br>
<a href="iframe_yuki.htm" target="sample">雪</a><br>
<a href="iframe_hyou.htm" target="sample">雹</a><br>
<iframe src="iframe_tenki.htm" name="sample" width="300" height="250">
天気予報
</iframe>
<IFRAME>はInline Frameのことを表しています。

<ILAYER><NOLAYER>タグ:相対位置にレイヤーを表示させるためのソースコード

<ilayer bgcolor="#fefe00" width="100" height="50" left="10" top="5" z-index="1"></ilayer>
<ilayer bgcolor="#ff0000" width="100" height="50" left="30" top="8" z-index="2"></ilayer>
<nolayer>レイヤーを使ってプログラミングしております。</nolayer>
スポンサーリンク

入力フォーム・リスト・ボタンを編集するためのHTMLタグとソースコード

<FORM>タグ:入力・送信フォームを作成するためのソースコード

<form action="cgi-bin/formmail.cgi" method="post">
<p>
氏名 <input type="text" name="name" size="40">
</p>
<p>
性別 <input type="radio" name="seibetsu" value="male">男
<input type="radio" name="seibetsu" value="female">女
</p>
<p>
あなたの年齢 <select name="blood">
<option value="ju">10代</option>
<option value="niju">20代</option>
<option value="sanju">30代</option>
<option value="shiju">40代</option>
</select>
</p>
<p>
その他<br>
<textarea name="sonota" rows="2" cols="30"></textarea>
</p>
<p>
<input type="submit" value="送信"><input type="reset" value="やり直し">
</p>
</form>
<FORM>タグは、入力・送信フォームを編集することができます。
<FORM>~</FORM>の間に、 <INPUT>タグや<SELECT>タグ、<TEXTAREA>タグのようなさまざまなタグを置くことによって、多くの機能をもたせます。
フォームに入力されたデータは、送信ボタンを作ることによって、送信データはCGIプログラムへ転送されます。
送信先を指定する場合にはaction属性を使い、転送手段を指定する場合はmethod属性、それから、データ形式の指定はenctype属性を使ってプログラミングします。

<INPUT>タグ:フォームを作成するためのボタンや文字入力欄などの部品を作成するソースコード

<form action="cgi-bin/aaa.cgi" method="post">
<table>
<tr>
<td align="right"><b>氏名</b></td>
<td><input type="text" name="name" size="30" maxlength="8"></td>
</tr>
<tr>
<td align="right"><b>暗証番号</b></td>
<td><input type="password" name="pass" size="6" maxlength="4"></td>
</tr>
<tr>
<td align="right"><b>学年</b></td>
<td>
<input type="radio" name="gakunen" value="1年生">1年生
<input type="radio" name="gakunen" value="2年生">2年生
<input type="radio" name="gakunen" value="3年生">3年生
<input type="radio" name="gakunen" value="4年生">4年生
</td>
</tr>
<tr>
<td align="right"><b>履修科目</b></td>
<td>
<input type="checkbox" name="kyouka" value="民法">民法
<input type="checkbox" name="kyouka" value="憲法">憲法
<input type="checkbox" name="kyouka" value="行政法">行政法
<input type="checkbox" name="kyouka" value="刑法">刑法
<input type="checkbox" name="kyouka" value="社会科学">社会科学
<input type="checkbox" name="kyouka" value="物理">物理
</td>
</tr>
<tr>
<td align="right"><b>レポート提出</b></td>
<td><input type="file" name="syukudai"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="送信">
<input type="reset" value="最初から">
</td>
</tr>
</table>
</form>

<INPUT>タグは、フォームを作成するためのボタンや文字入力する欄を作ることができます。

type属性を指定した場合、一行のテキストフィールドやチェックボックス、ラジオボタン、実行ボタン、リセットボタンが作れます。

<INPUT type=”submit”>タグ:フォームの送信ボタンやリセットボタンなどを設定・変更・編集・作成するためのソースコード

<form action="cgi-bin/abc.cgi" method="post">
<p>
氏名<input type="text" name="shimei">
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="最初から">
</p>
</form>

 

<input>タグのtype属性の値にsubmitを指定すると、フォームの送信ボタンを作成します。

<INPUT type=”image”>タグ:フォームの画像ボタンを設定・変更・編集・作成するためのソースコード

<form action="cgi-bin/abc.cgi" method="post">
<p>
氏名<input type="text" name="shimei">
</p>
<p>
<input type="image" src="images/test.jpg" alt="test">
</p>
</form>

 

<input>タグのtype属性の値にimageを指定すると、フォームの画像ボタンを作成します。 画像ファイルはsrc属性で指定します。画像ボタンにはalt属性が必須となります。

<INPUT type=”button”>タグ:フォームのボタンを設定・変更・編集・作成するためのソースコード

<p>
<input type="button" value="前頁戻る" onclick="history.back()">
</p>

<input>タグのtype属性の値にbuttonを指定すると、特に機能を持たない汎用ボタンを作成します。 汎用ボタンはJavaScriptなどと組み合わせて使用されることが多いようです。

<BUTTON>タグ:ボタンを設定・変更・編集・作成するためのソースコード

<button type="button" name="button" value="button">
<font size="2" color="#000000">ぽちっとな</font>
</button></pre>
ボタンを作成します。 <INPUT>タグで作成するボタンと機能的には同じですが、 <BUTTON>タグではボタン上のテキスト表示を変えたり、画像を表示させたり、それらを組み合わせることができます。

<INPUT type=”text”>タグ:1行のテキストフィールドやテキストボックスを設定・変更・編集・作成するためのソースコード

<form action="cgi-bin/abc.cgi" method="post">
<p>
氏名<input type="text" name="namae" size="40" maxlength="20">
</p>
<p>
<input type="submit" value="送信">
</p>
</form>

<input>タグのtype属性でtype=”text”を指定すると、一行テキストボックスが作成されます。

<INPUT type=”password”>タグ:パスワードを入力するための欄を設定・変更・編集・作成するためのソースコード

<form action="cgi-bin/abc.cgi" method="post">
<p>
暗証番号<input type="password" name="pass" size="10" maxlength="8"><br>
氏名<input type="text" name="shimei" size="40" maxlength="20">
</p>
<p>
<input type="submit" value="送信">
</p>
</form>

<input>タグのtype属性でtype=”password”を指定すると、パスワード入力欄が作成されます。

<INPUT type=”checkbox”>タグ:チェックボックスを設定・変更・編集・作成するためのソースコード

<p>
<input type="checkbox" name="mail" value="1" checked="checked">配信を希望する
<input type="checkbox" name="mail" value="2">受信を解除する
</p>
<p>
<input type="submit" value="変更する">
</p>
</form>

<input>タグのtype属性でtype=”checkbox”を指定すると、チェックボックスが作成されます。 チェックボックスとは複数用意された選択肢の中から複数の項目を選択できるボタンのことです。

<INPUT type=”radio”>タグ:ラジオボタンを設定・変更・編集・作成するためのソースコード

<form action="cgi-bin/abc.cgi" method="post">
<p>
<input type="radio" name="kau" value="yes" checked="checked">買う
<input type="radio" name="kawanai" value="no">買わない
</p>
<p>
<input type="submit" value="決定">
</p>
</form>

<input>タグのtype属性でtype=”radio”を指定すると、ラジオボタンが作成されます。 ラジオボタンとは複数用意された選択肢の中からひとつを選択できるボタンのことです。

<INPUT type=”hidden”>タグ:データを非表示にして送信するためのソースコード

<form action="cgi-bin/abc.cgi" method="post">
<p>
氏名:太郎くん<br>
レビュー:素晴らしい<br>
その他意見:面白かった。
</p>
<p>
<input type="hidden" name="usr_id" value="id">
<input type="hidden" name="rebyu" value="grate">
<input type="hidden" name="sonota" value="1">
<input type="submit" value="確認">
</p>
</form>
<input>タグのtype属性でtype=”hidden”を指定すると、ブラウザ上に表示されない非表示データを送信することができます。

<INPUT type=”file”>タグ:サーバーにファイルを送信するためのソースコード

<form action="cgi-bin/abc.cgi" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="datafile">
</p>
<p>
<input type="submit" value="送信する">
</p>
</form>
<input>タグのtype属性でtype=”file”を指定すると、 ファイル名の入力フィールドと参照ボタンが表示され、サーバーへ送信するファイルを選択できるようになります。 サーバー側にはファイルを受け取るためのプログラムが必要となります。

<SELECT>タグ:セレクトボックスを作成するためのソースコード

<form action="cgi-bin/formmail.cgi" method="post">
<p>年齢<br>
<select name="nenrei">
<option value="ju">10代</option>
<option value="niju">20代</option>
<option value="sanju">30代</option>
<option value="shiju">40代</option>
</select></p>
<p>ヨーロッパ<br>
<select name="europe">
<option value="itaria">イタリア</option>
<option value="igirisu">イギリス</option>
<option value="doitsu" selected>ドイツ</option>
<option value="huransu">フランス</option>
<option value="supein">スペイン</option>
</select></p>
<input type="submit" value="送信"><input type="reset" value="最初から">
</form>

<OPTGROUP>タグ:セレクトボックスの選択肢をグループ化して結合・連結するためのソースコード

<form action="cgi-bin/formmail.cgi" method="post">
<p>食べ物ランキング <br>
<select name="food">
<optgroup label="野菜の代表">
<option label="キャベツ" value="kyabetsu">キャベツ</option>
<option label="レタス" value="retasu">レタス</option>
<option label="トマト" value="tomato">トマト</option>
<option label="きゅうり" value="kyuri">きゅうり</option>
<option label="白菜" value="hakusai">白菜</option>
</optgroup>
<optgroup label="果物の代表">
<option label="マスカット" value="muscat">マスカット</option>
<option label="りんご" value="ringo">りんご</option>
<option label="みかん" value="mikan">みかん</option>
<option label="キウイ" value="kiui">キウイ</option>
<option label="いちご" value="ichigo">いちご</option>
</optgroup>
</select></p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</form>

<OPTION>タグ:セレクトボックスの選択肢を指定するためのソースコード

<form action="cgi-bin/formmail.cgi" method="post">
<p>ヨーロッパ<br>
<select name="europe">
<option value="itaria">イタリア</option>
<option value="igirisu">イギリス</option>
<option value="doitsu" selected>ドイツ</option>
<option value="huransu">フランス</option>
<option value="supein">スペイン</option>
</select></p>
<input type="submit" value="送信"><input type="reset" value="最初から">
</form>

<TEXTAREA>タグ:複数行の入力フィールドを作成するためのソースコード

<form action="cgi-bin/formmail.cgi" method="post">
ご意見<br>
<textarea name="kanso" rows="4" cols="40">記入欄</textarea><br>
<input type="submit" value="送信"><input type="reset" value="最初から">
</form>
<TEXTAREA>は複数行の入力フィールドを作成するタグです。

<LEGEND>タグ:フォームの入力項目グループにタイトルを付けるためのソースコード

<form action="aaa.cgi" method="post">
<form action="updown.cgi" method="post">
<fieldset>
<legend>アカウント情報</legend>
ユーザID <input type="text" name="id" size="20">
メール <input type="text" name="mail" size="40">
</fieldset>
<fieldset>
<legend>使ってみて</legend>
感想<br>
<input type="radio" name="kansou" checked>素晴らしい<br>
<input type="radio" name="kansou">良い<br>
<input type="radio" name="kansou">普通だった<br>
<input type="radio" name="kansou">良くはない<br>
<input type="radio" name="kansou">悪い<br><br>
理由<br>
<textarea rows="3" name="S1" cols="40"></textarea>
</fieldset>
<input type="submit" value="送信">
</form>
<LEGEND>は、<FIELDSET>タグでグループ化されたフォームの入力項目にタイトルを付けるタグです。 <FIELDSET>~<FIELDSET>内の先頭に1つだけ記述します。

<FIELDSET>タグ:フォームの入力項目をグループ化(結合)して一括管理してまとめるためのソースコード

<FIELDSET>はフォームの入力項目をグループ化する際に使用します。 グループの先頭には、<LEGEND>~</LEGEND>で入力項目グループにタイトルをつけます。
フォームの入力項目をグループ化することで、Tabキーなどでグループ間を簡単に移動できるという利点があります。

<LABEL>タグ:ボックスやボタンなどに名前や目印(ラベル)をつけるためのソースコード

<form action="cgi-bin/formmail.cgi" method="post">
<label for="namae" accesskey="n">氏名 </label>
<input type="text" name="name" id="namae"><br>
性別 <input type="radio" name="sei" value="male" id="dansei">
<label for="dansei" accesskey="m">男性</label>
<input type="radio" name="sei" value="female" id="josei">
<label for="josei" accesskey="f">女性</label><br>
年齢 <label><input type="radio" name="nenrei" value="ju">10代</label>
<label><input type="radio" name="nenrei" value="niju">20代</label>
<label><input type="radio" name="nenrei" value="sanju">30代</label>
<label><input type="radio" name="nenrei" value="yonju">40代</label><br>
<input type="submit" value="送信">
</form>

<ISINDEX>タグ:検索用語やキーワードの入力欄(テキストボックス)を作るためのソースコード

<isindex prompt="検索キーワード" action="kensaku.cgi">

<OL>タグ:数字や番号、アルファベットなどの順序ありのリスト(箇条書き)を作るためのソースコード

<h3>カップ焼きそばの工程</h3>
<ol type="1">
<li>ソースとふりかけを取り出す</li>
<li>かやくを入れたまま、お湯を線まで注ぐ</li>
<li>3分待つ</li>
<li>お湯を流す</li>
<li>麺とソースとふりかけを混ぜる</li>
</ol>
<ol type="a">
<li>ソースとふりかけを取り出す</li>
<li>かやくを入れたまま、お湯を線まで注ぐ</li>
<li>3分待つ</li>
<li>お湯を流す</li>
<li>麺とソースとふりかけを混ぜる</li>
</ol>
<ol type="A">
<li>ソースとふりかけを取り出す</li>
<li>かやくを入れたまま、お湯を線まで注ぐ</li>
<li>3分待つ</li>
<li>お湯を流す</li>
<li>麺とソースとふりかけを混ぜる</li>
</ol>
<ol type="i">
<li>ソースとふりかけを取り出す</li>
<li>かやくを入れたまま、お湯を線まで注ぐ</li>
<li>3分待つ</li>
<li>お湯を流す</li>
<li>麺とソースとふりかけを混ぜる</li>
</ol>
<ol type="I">
<li>ソースとふりかけを取り出す</li>
<li>かやくを入れたまま、お湯を線まで注ぐ</li>
<li>3分待つ</li>
<li>お湯を流す</li>
<li>麺とソースとふりかけを混ぜる</li>
</ol>

<UL>タグ:数字や番号、アルファベットなどの順番なしのリスト(箇条書き)を作るためのソースコード

<h3>野菜の代表</h3>
<ul type="disc">
<li>キャベツ</li>
<li>レタス</li>
<li>トマト</li>
<li>きゅうり</li>
<li>白菜</li>
</ul>
<ul type="circle">
<li>キャベツ</li>
<li>レタス</li>
<li>トマト</li>
<li>きゅうり</li>
<li>白菜</li>
</ul>
<ul type="square">
<li>キャベツ</li>
<li>レタス</li>
<li>トマト</li>
<li>きゅうり</li>
<li>白菜</li>
</ul>

<LI>タグ:リスト(箇条書き)の項目を作るためのソースコード

<h3>野菜の代表</h3>
<ul>
<li>キャベツ</li>
<li>レタス</li>
<li>トマト</li>
<li>きゅうり</li>
<li>白菜</li>
</ul>
<h3>カップ焼きそばの工程</h3>
<ol>
<li>ソースとふりかけを取り出す</li>
<li>かやくを入れたまま、お湯を線まで注ぐ</li>
<li>3分待つ</li>
<li>お湯を流す</li>
<li>麺とソースとふりかけを混ぜる</li>
</ol>

<DL>タグ:定義リストであることを示すためのソースコード

<dl>
<dl>
<dt>みかん</dt>
<dd>オレンジ色の果物のこと。</dd>
<dt>もも</dt>
<dd>ピンク色の果物のこと。</dd>
</dl>
<dl compact="compact">
<dt>みかん</dt>
<dd>オレンジ色の果物のこと。</dd>
<dt>もも</dt>
<dd>ピンク色の果物のこと。</dd>
</dl>

<DIR>タグ:リストを表示するためのソースコード

<dir>
<li>ミートソース</li>
<li>デミグラスソース</li>
<li>ホワイトソース</li>
</dir>

<MENU> タグ:メニューのリスト(箇条書き)を表示するためのソースコード

<menu>
<li>並盛り</li>
<li>大盛り</li>
<li>特盛</li>
</menu>
スポンサーリンク

その他の重要なHTMLタグとソースコード

<SCRIPT><NOSCRIPT>タグ:HTML文書にJavaScriptを埋め込む(挿入する)ためのソースコード

<script type="text/javascript">
<!--

//-->
</script>
<SCRIPT>タグは、HTML内にJavaScript、VBScriptを挿入することができます。

<STYLE>タグ:スタイルシートを反映・適用させてCSSを作るためのソースコード

<html>
<head>
<title>題</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--

-->
</style>
</head>
<body>
本文
</body>
</html>

<STYLE>タグは、style.cssを書くことができます。これによって、文字などをおしゃれにデザインすることができます。

 

<DIV>タグ:一つ・ひとかたまりのまとまった範囲を定義するためのソースコード(ブロック要素の場合)

<div align="center">
まとめて中心に<br>
表示させる<br>
ことができます。
</div>
<DIV>タグは、まとめて一つのかたまりとして指定することができます。align属性で配置を決定したり、CSSを使います。
ブロック要素なので、見出しや段落、箇条書き、フォームなどに対して指示します。

<SPAN>タグ:一つ・ひとかたまりのまとまった範囲を定義するためのソースコード(インライン要素の場合)

<span style="background-color: #0099FF">青色の文字</span>と
<span style="background-color: #FFFF00">黄色の文字</span>です。
<SPAN>タグは、まとめて一つのかたまりとして指定することができます。文中にCSSを使うことができて便利です。
インライン要素なので、文中に対して指示します。

<!– –> <COMMENT>タグ:HTMLをコメントして無効化するためのソースコード

<!– –><COMMENT>タグは、囲んだ部分が無効化されます。メモや書き残しのメッセージとして使うのが良いでしょう。

<PRE>タグ:ソースコードを整形済みのテキストとしてきれいに表示させるためのソースコード

<PRE>タグはPreformatted Textのことを表し、ソースコードなどをきれいに整形して表示することができます。Preformatted Textを和訳すると「整形済みテキスト」となります。

<PLAINTEXT>:ソースコードをそのまま表示するためのソースコード

<PLAINTEXT>は、ソースコードをそのまま表示させることができます。

<XMP>タグ:タグ・スペース・改行などを等しい幅のフォントでそのまま表示するためのソースコード

<XMP>タグは、タグ・空白・改行などを等しい幅のフォントでそのまま表示することができます。
現在ではあまり使われないため、<pre>タグまたは<code>タグを使ってプログラミングしましょう。

<LISTING>タグ:ソースコードをそのまま表示するためのソースコード

<listing>
ソースコードの表示
</listing>
タイトルとURLをコピーしました