メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。
<第81号> 今週のおさらい 毎週金曜日配信 What's New 2004/1/16 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ■ HTML講座 第25回 --- フォーム ■ CSS講座 第2回 --- スタイルシートのお約束
form要素form要素 を利用します。各種入力フィールドなどのオブジェクトは、この中で配置されます。form要素は、ブロックレベルとして定義されていますが、この要素の中に入力オブジェクトを配置するためには、さらに何らかのブロックレベル要素で囲まなければなりません。忘れやすい決まり事ですが、正しいマークアップ文書を作成するために必要なことです。form要素の属性は次のとおりです。action属性は必須ですので、必ず送信するデータを処理できるプログラムなどの URI を指定しなければなりません。HTML4.01では基本的に省略することが許されておりません。なお、この属性以外はすべて任意です。input要素input要素 です。input要素の type属性によって指定することができます。| Type | 例示 | 機能 |
|---|---|---|
| text | 1行のテキスト入力フィールド | |
| password | パスワードの入力フィールド | |
| checkbox | 複数の選択が可能なチェックボックス | |
| radio | 1つしか選択できないラジオボタン | |
| submit | データ送信時のボタン | |
| reset | データを取り消して初期状態にするボタン | |
| button | 汎用的に利用するボタン | |
| image | 画像を利用するボタン |
select要素と、その中に配置される option要素によって設定します。form要素内で配置される様々な入力オブジェクトで、1つのまとまったフォームを作成することが可能です。
p { color: #000000 }
p = セレクタ
{ 〜 } = 宣言部
color = 属性 #000000 = 値
id が設定された場合には、大文字と小文字を厳格に区別しますので、注意してください。どちらか一方に統一しておいた方が安全でしょう。当講座では、すべて小文字に統一しています。style属性 を利用します。この方式は、その要素のみに適用され、他の同じ要素型には適用されません。
<p style="color:#000000"> 〜 </p>
style属性 は非推奨扱いとなっていますのでご注意ください。style要素 を利用する方法で、HTML文書に埋め込む方式となります。かなり普及している方法の1つです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
p { color: #000000 }
-->
</style>
</head>
style要素 を使う場合にも、type属性 を記述して、同じように MIMEタイプ を指定しなくてはなりません。これは、あなたの作成したスタイルシートが、ユーザエージェントで正しく理解するために必要な作法となります。.css の文書) とリンクして、HTML文書に描画するために用います。「banban.css」というスタイルシート文書を取り込むために、ヘッダ部で以下のように記述します。
<link rel="stylesheet" type="text/css" href="banban.css">
charset属性 で、文字符号コード を指定する必要があります。不用意な文字化けを避けるために指定しなければなりません。