HTMLガイダンス 1
HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種 で マークアップ 言 語 と 言 って タグ を 使 って 文 字 の 大 きさや 各 種 属 性 等 の 指 定 画 像 ファイルを 文 書 に 埋 め 込 む 指 定 他 の 文 書 へのリンク 等 様 々な 機 能 を 持 っています 標 準 のHTMLのみで 作 成 できるユーザインタフェース(UI)の 表 現 には 限 界 / 制 約 がありますので その 事 を 十 分 に 理 解 したうえで UIを 設 計 することになります
一 般 的 なHTMLソース 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <TITLE>ホームページタイトルSDEV</TITLE> </HEAD> <BODY bgcolor="#ebf5f5" text="#333333" link="#003399" vlink="#990033" alink="#339900"> <CENTER> <FONT color="red" size="+1"> 取 り 扱 い 注 意 </FONT> <TABLE width="95" border="0" height="65" class="index" bgcolor="#ebf5f5"> <TBODY> <TR align="center"> <TD height="10" align="center"><a href="index.htm" target="_parent"> <IMG alt="トップ アイコン" width="48" height="48" align="middle" border="0" src="img/stp.gif"> はじめに </A></TD> </TR> <TR> <TD bgcolor="#660000"> </TD> </TR> <TR align="center"> <TD height="10" align="center"><a href="contents/sdev/index1.htm" target="contents"> 第 1 回 </A> (9/29) </TD> </TR> : : : : <TR> <TD bgcolor="#660000"> </TD> </TR> <TR> <TD align="center" bgcolor="#660000"></td> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> IE 等 のWebブラウザでソースを 表 示 して 確 認 メニューバーの[ 表 示 ] [ソース] または マウスの 右 クリック ソースの 表 示 をクリックする HTMLソース 文 字 データは HTML という 言 語 で 記 述
HTML 基 本 構 造 タグとフォーム 4 HTMLファイルは <HTML>タグ <HEAD>タグ <BODY>タグといった 基 本 構 造 を 持 つ <BODY>~</BODY> 部 にブラウザに 表 示 する 内 容 をタグを 用 いて 表 現 (HTMLをコーディングする) ユーザ 入 力 を 行 う 様 な 画 面 を 造 る 際 には フォームを<FORM>タグを 用 いる これらも<BODY> 部 に 記 述 する メモ 帳 などのテキストエディタを 用 いて 作 成 保 存 する 基 本 構 造 タグ <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> ブラウザに 表 示 する 内 容 <FORM> フォーム 定 義 </FORM> </BODY> </HTML> <html> <head> <title> </title> </head> <body> <form> </form> </body> </html> タグは 大 文 字 も 小 文 字 も 同 様 の 動 作 を 行 う
フォント タイトル 文 字 <FONT SIZE="4" COLOR="#990000"> 情 報 システム 開 発 演 習 </FONT> 文 字 フォント サイズや 色 を 指 定 します 設 定 は <FONT>タグを 用 いる 5 属 性 名 初 期 値 内 容 書 式 <font>~</font> size color なし なし 文 字 サイズを 指 定 1~7 段 階 で 指 定 1が 最 小 7が 最 大 -7や+5のように 符 号 で 相 対 変 更 でき 文 字 の 色 を 指 定 指 定 には2 通 りの 方 法 あり 1RGB( 光 の3 原 色 )を00~ff(16 進 数 )の256 段 階 表 記 00が 一 番 暗 い ffが 明 るい 例 えば 000000 が 黒, ff0000 が 赤, ffffff が 白 色 の 指 定 では6 桁 の 数 字 の 先 頭 に#を 付 けた 形 で 表 記 例 : color="#123456" 2 色 の 名 前 を 書 く 例 えば color= white のように 書 く わかりやすい 反 面 使 える 色 の 名 前 を 知 っておく 必 要 あり face なし 書 体 を 指 定 します id なし IDを 指 定 します class なし スタイルシートクラスを 指 定 します style なし スタイルシートを 指 定 します lang 環 境 に 依 存 言 語 を 指 定 します
リンク アンカー 6 リンク <A HREF="http://lxxxt.waseda.ac.jp/" target="_blank"> 経 営 工 学 システム 工 学 実 験 演 習 </A> リンクを 設 定 するには <A>タグを 用 いる HREF 属 性 は リンク 先 URL を 指 定 する 属 性 名 初 期 値 内 容 書 式 <a href="url">~</a> <a name="アンカー">~</a> <a href="url" target="ターゲット"> ~</a> href なし リンク 先 のURLを 指 定 します name なし 同 じページ 内 へのリンク 位 置 を 示 すアンカーを 指 定 します target なし 指 定 されたターゲットウィンドウへリンク 先 のページを 表 示 します 以 下 は 予 約 されたtarget 名 です _self: 自 分 自 身 _blank: 空 白 ページ _parent: 親 フレーム _top:トップフレーム を 示 します id なし IDを 指 定 します class なし スタイルシートクラスを 指 定 します style なし スタイルシートを 指 定 します
テーブル <TABLE BORDER= 2 > <TR> <TD> 回 </TD> <TD>タイトル</TD> </TR> : </TABLE> 7 書 式 <table>~</table> 書 式 <td>~</td> 書 式 <tr>~</tr> テーブル 構 造 は<TABLE>タグを 基 本 に 各 セルを<TR>タグ <TD>タグの 組 み 合 わせで 作 成 する 主 なオプション( 抜 粋 ) <TR> 行 を 指 定 <TR> 行 を 指 定 <TABLE> 表 を 指 定 属 性 名 初 期 値 内 容 border なし 枠 幅 を 指 定 します bgcolor なし 背 景 色 を 指 定 します <TABLE> <TD> 列 を 指 定 align なし 回 り 込 み 方 法 を 指 定 します width なし 横 幅 を 指 定 します height なし 縦 幅 を 指 定 します background なし 背 景 画 像 を 指 定 します id なし IDを 指 定 します <TD> 列 を 指 定 <TR> <TD> 回 </TD> <TD>タイトル</TD> </TR> <TR> <TD> ~ </TD> class なし スタイルシートクラスを 指 定 します style なし スタイルシートを 指 定 します <TD> ~ </TD> </TR> </TABLE>
イメージ 画 像 8 イメージ 画 像 を 配 置 するには <IMG>タグを 用 いる 書 式 <img src="url"> 画 像 貼 付 <IMG SRC="logo.jpg" HEIGHT="40" WIDTH="600" ALT=" 経 営 システム 工 学 科 ロゴ"> 属 性 名 初 期 値 内 容 src なし 表 示 する 画 像 のURLを 指 定 します width なし 画 像 の 横 幅 を 指 定 します height なし 画 像 の 縦 幅 を 指 定 します alt なし 代 替 テキストを 指 定 します border なし 枠 幅 を 指 定 します id なし IDを 指 定 します class なし スタイルシートクラスを 指 定 します style なし スタイルシートを 指 定 します name なし 名 前 を 指 定 します dynsrc なし 表 示 する 映 像 のURLを 指 定 します (IE) align なし 回 り 込 み 方 法 を 指 定 します hspace なし 回 り 込 み 指 定 時 の 横 方 向 の 間 隔 を 指 定 します vspace なし 回 り 込 み 指 定 時 の 縦 方 向 の 間 隔 を 指 定 します usemap なし クライアントサイドクリッカブルマップを 指 定 します ismap なし サーバーサイドクリッカブルマップを 指 定 します
フォーム 書 式 <form>~</form> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> フォーム 内 容 </FORM> 9 ブラウザに 表 示 されたWebページから 情 報 を 書 き 込 む( 入 力 )ためには <FORM>タグを 用 いる ACTION 属 性 は 入 力 されたデータの 送 信 先 URLを 指 定 する METHOD 属 性 には 送 信 方 法 はpostまたはgetが 指 定 できます 一 般 的 にはpostを 指 定 します get を 指 定 した 場 合 URLの 後 に?で 区 切 られデータが 送 信 されます フォームから 情 報 を 書 き 込 むには <INPUT>タグ 入 力 フィールド <TEXTAREA>タグ テキストボックス <SELECT>タグ 選 択 リスト などを 組 み 合 わせて 使 用 する ( 後 述 ) 属 性 名 初 期 値 内 容 action なし データの 送 信 URLを 指 定 します method get 送 信 方 法 を 指 定 します (getまたはpost) id なし IDを 指 定 します class なし スタイルシートクラスを 指 定 します style なし スタイルシートを 指 定 します enctype なし MIMEタイプを 指 定 します target なし ターゲットを 指 定 します
入 力 フィールド <INPUT>タグ type 属 性 名 初 期 値 内 容 なし name なし 名 前 を 指 定 します エレメントの 種 類 を 指 定 します text 1 行 のテキストフィールド password パスワード 入 力 した 文 字 は*や などで 隠 される hidden 隠 しデータ 表 示 されませんがデータは 送 信 される checkbox チェックボックス 選 択 肢 の 中 から 複 数 選 択 する 場 合 radio ラジオボタン 選 択 肢 の 中 から1つだけ 選 択 する 場 合 submit 送 信 ボタン button コマンドボタン reset リセットボタン クリックすると 初 期 状 態 image 画 像 ボタン submitボタンと 同 じ 働 き(クリック 時 のボタン 座 標 も 送 信 ) file ローカルファイルの 選 択 ファイル 選 択 ダイアログが 表 示 される value なし 値 を 指 定 します VALUE 属 性 で 指 定 した 内 容 が 固 定 値 として 送 信 される size なし 表 示 幅 ( 半 角 文 字 数 換 算 )を 指 定 します maxlength なし 入 力 可 能 文 字 数 ( 半 角 文 字 換 算 )を 指 定 します checked --- チェック 状 態 を 指 定 します id なし IDを 指 定 します class なし スタイルシートクラスを 指 定 します style なし スタイルシートを 指 定 します alt なし 代 替 テキストを 指 定 します align なし 回 り 込 み 方 法 を 指 定 します src なし 画 像 URLを 指 定 します readonly --- 読 み 出 しのみの 状 態 を 指 定 します disabled --- 禁 止 状 態 を 指 定 します 10
1 行 テキストフィールド <INPUT TYPE="text"> 入 力 フィールド <INPUT TYPE="text" NAME="field1" SIZE="30" MAXLENGTH="50"> 11 <INPUT TYPE= password"> 1 行 の 文 字 列 を 入 力 するには <INPUT TYPE= text >タグを 用 いる Name 属 性 は フィールドを 一 意 に 識 別 するために 指 定 する パスワード 入 力 フィールド <INPUT TYPE="password" NAME="field2" SIZE="10" MAXLENGTH="10"> 1 行 の 文 字 列 でパスワードなどの 入 力 値 を 隠 す 場 合 の 情 報 を 入 力 するには <INPUT TYPE= password >タグを 用 いる 入 力 した 文 字 は*や などで 隠 される 隠 しフィールド <INPUT TYPE= hidden"> 隠 しフィールド <INPUT TYPE="hidden" NAME="hidden1" value="サンプルフォーム"> 一 般 にユーザに 見 せる 必 要 のない 特 定 の 値 をCGIプログラムに 送 信 するには <INPUT TYPE= hidden > タグを 用 いる
チェックボックス 12 チェックボックス <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="c1" CHECKED>チェックボックス1 <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="c2">チェックボックス2 <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="c3">チェックボックス3 複 数 の 選 択 肢 から 複 数 選 択 するには <INPUT TYPE= checkbox >タグを 用 いる NAME 属 性 は 共 通 の 項 目 に 対 する 選 択 肢 として 使 用 する 場 合 は すべて 同 じ 名 前 を 指 定 する VALUE 属 性 は 選 択 肢 を 一 意 に 識 別 するための 名 前 を 指 定 するため 必 ず 指 定 するようにする CHECKED 属 性 は 既 定 値 として 設 定 される ラジオボタン ラジオボタン INPUT TYPE="radio" <INPUT TYPE="radio" NAME="radio1" VALUE="r1" CHECKED> 選 択 肢 1 <INPUT TYPE="radio" NAME="radio1" VALUE="r2"> 選 択 肢 2 <INPUT TYPE="radio" NAME="radio1" VALUE="r3"> 選 択 肢 3 複 数 の 選 択 肢 から1つだけ 選 択 するには <INPUT TYPE= radio >タグを 用 いる NAME 属 性 は 共 通 の 項 目 に 対 する 選 択 肢 として 使 用 する 場 合 は すべて 同 じ 名 前 を 指 定 する VALUE 属 性 は 選 択 肢 を 一 意 に 識 別 するための 名 前 を 指 定 するため 必 ず 指 定 するようにする CHECKED 属 性 は 既 定 値 として 設 定 される
コマンドボタン フォーム 内 のデータを 送 信 する 13 <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ コマンドボタン <INPUT TYPE="submit" value=" 送 信 "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ ボタン <INPUT TYPE="button" value=" ボタン "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ リセットボタン <INPUT TYPE="reset" value=" リセット "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ ローカルファイル 選 択 ボタン <INPUT TYPE="file" value=" ファイル 選 択 "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> 送 信 ボタン コマンドボタン リセットボタン クリックすると 初 期 状 態 になる ローカルファイルの 選 択 ファイル 選 択 ダイアログが 表 示 される イメージボタン イメージボタン <INPUT TYPE="image" value=" イメージボタン " src="imgbutton.jpg" alt=" 地 球 とPCのイメージボタン"> </FORM>
テキストボックス 14 テキストボックス TEXTAREA <TEXTAREA NAME="textbox1" ROWS="5" COLS="30">ここに 文 字 列 が 入 ります </TEXTAREA> 複 数 行 の 文 字 列 を 入 力 するには <TEXTAREA>タグを 用 いる NAME 属 性 は テキストボックスを 一 意 に 識 別 するための 名 前 を 指 定 する ROWS 属 性 は 表 示 される 文 字 入 力 フィールドの 幅 ( 文 字 数 )を 指 定 する COLS 属 性 は 表 示 される 文 字 入 力 フィールドの 行 数 を 指 定 する ROWS 属 性 とCOLS 属 性 は 必 ず 指 定 する
リストボックス 複 数 項 目 リストから 選 択 するには <SELECT>タグにSIZE 属 性 を 用 いる NAME 属 性 は リストボックスを 一 意 に 識 別 するための 名 前 を 指 定 する SIZE 属 性 は リストボックスの 表 示 行 数 を 指 定 する 選 択 項 目 は <OPTION>タグで 列 挙 する リストボックス SELECT NAME="list1" SIZE="5" <SELECT NAME="list1" SIZE="5"> <OPTION>アイテム1 <OPTION>アイテム2 <OPTION>アイテム3 <OPTION>アイテム4 <OPTION>アイテム5 <OPTION>アイテム6 </SELECT> 15 ドロップダウン リストボックス ドロップダウン リストボックス SELECT <SELECT NAME="dropdown1"> <OPTION>アイテム1 <OPTION>アイテム2 <OPTION>アイテム3 <OPTION>アイテム4 <OPTION>アイテム5 </SELECT> 複 数 項 目 リストから 選 択 するには <SELECT>タグを 用 いる リストボックスの 表 示 行 数 を1 行 もしくは SIZE 属 性 自 体 を 指 定 しないとドロップダウン リストボックスになる NAME 属 性 は ドロップダウン リスト ボックスを 一 意 に 識 別 するための 名 前 を 指 定 する 選 択 項 目 は <OPTION>タグで 列 挙 する