第6回HTML講座（Ⅲ)は、11月25日（木）の9:00～13:00、12名の参加で、日立オリジンパーク内の大みか拠点で開催しました。今回はテキスト本のPart5の「Webサイトを充実させよう」です。本講座の講師は安田出世話人が担当しました。
講座の内容梗概は下記のとおりです。
-
Pａｒｔ５ Webサイトを充実させよう
Lesson-1 ディスプレイ用と印刷用でスタイルシートを替えよう
-
◆<link>タグにmedia属性値を追加することで、ディスプレイ表示用と印刷用のスタイルシートファイルを分けることができる。
例、ディスプレイ用 media="screen"、 印刷用 media="print"
印刷の場合の表記 <link rel="stylesheet" href="css/print.css" type="text/css" media="print" >
◆印刷時に要らないボックスを非表示にするには、要らないボックスのCSSで、例えば、#nav { diplay: none; }とすれば良い。
◆不必要なボックスを非表示にしたら、テキストを読み易いレイアウトに変更する。たとえば、bodyのbackground-imageを削除
、#wrapperのborderを削除、および、.textのwidthやborder-rightを削除する。
◆印刷した時の文章を読み易くするために、余白と行間はしっかりと取る、フォント指定はptを使うのが良い。
-
Lesson-2 フォームをデザインしよう
-
◆CGIはCommon Gateway Interfaceの略。Webサーバーがブラウザからの要求に応じてプログラムを起動するための仕組み
である。CGIを使うことでカウンタや掲示板、チャット、アンケートが実現する。CGIはPHPやPerlで書かれることが多い。
◆掲示板やチャットに書き込み、アンケートや購買記録などをCGIに渡すため、データを書き込む部分が必要になり、この部分
を「フォーム」という。このフォームを作るための基本タグは<form>であり、form要素の中にテキストボックス、チェックボックス
、プルダウンメニュー、ボタンを組み込む。
◆<form>タグの属性には、 action(属性値はCGIまでのパス)とmethod(getまたはpost)があり、入力されたデータはactionで
指定されたWebサーバー上のプログラムファイルに渡され、データを処理してその結果ブラウザ上に表示する。
例、<form method="post" action="inquiry.cgi>
◆グループになる複数の項目については<fieldset>タグで囲み、その見出しは<fieldset>タグの直後に<legend>タグの囲む。
◆フォームの中」に組み込むパーツの大部分は<input>タグに対してtype属性と様々なを挿入することで定義する。
◆<label>タグは、どの文字がinput要素などのフォーム部品として対応しているかを示すためのラベルとして利用するタグ。
◆1行のテキストボックスを作成する場合には、input要素のtype属性に属性値「text」を記述する。また、パスワードを入力する
ボックスを作成したい場合は、属性値を「password」にする。
◆<textarea>タグを使うと、複数行入力可能なテキストボックスを作ることができる。属性としてrows、cols、wrap、nameがある。
row属性値で行数を、cols属性値を1行の「文字数」を指定する。
◆入力したデータに送信に必要なボタン作成するには、値に送信ボタンの場合は「submit」、リセットボタンの場合は「reset」
を記述する。
Lesson-3 Flashムービーを配置しよう
世話人・文責：安田 出
第6回HTML講座（Ⅲ）の参加者