初心者のためのホームページ作り 第81号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第81号> 今週のおさらい
                 毎週金曜日配信 What's New 2004/1/16
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
  ■ HTML講座  第25回 --- フォーム
  ■ CSS講座 第2回 --- スタイルシートのお約束
HTML講座 --- フォーム
サイト上で、閲覧者からの要望や質問、問い合わせなどを形成するファームを、HTML4.01では幾つかの要素型とその属性が用意され、それらを組み合わせることで実現できます。
form要素
フォームを定義するために form要素 を利用します。各種入力フィールドなどのオブジェクトは、この中で配置されます。
form要素は、ブロックレベルとして定義されていますが、この要素の中に入力オブジェクトを配置するためには、さらに何らかのブロックレベル要素で囲まなければなりません。忘れやすい決まり事ですが、正しいマークアップ文書を作成するために必要なことです。
form要素の属性は次のとおりです。
action属性は必須ですので、必ず送信するデータを処理できるプログラムなどの URI を指定しなければなりません。HTML4.01では基本的に省略することが許されておりません。なお、この属性以外はすべて任意です。
input要素
フォームは、閲覧者からの入力に応じるために定義しますが、実際の入力フィールドのオブジェクトを形成するのは、input要素 です。
入力フィールドは、様々な「形式」によるオブジェクトが用意されており、input要素type属性によって指定することができます。
type属性の主要な値とその機能
Type 例示 機能
text 1行のテキスト入力フィールド
password パスワードの入力フィールド
checkbox 複数の選択が可能なチェックボックス
radio 1つしか選択できないラジオボタン
submit データ送信時のボタン
reset データを取り消して初期状態にするボタン
button 汎用的に利用するボタン
image 画像を利用するボタン
メニュー形式の入力オブジェクト
プルダウンメニューのように、あらかじめ決められていた項目を選択する入力オブジェクトがあります。
メニュー形式の入力フィールドは、select要素と、その中に配置される option要素によって設定します。
 左のサンプルのように、プルダウンメニューの選択項目ができます。
このように、 form要素内で配置される様々な入力オブジェクトで、1つのまとまったフォームを作成することが可能です。
フォームのサンプル (詳しいHTML構文は、今週のマガジン「第80号」をお読みください。)
次回は、アクセシブルなフォームについて解説します。
CSS講座 --- スタイルシートのお約束
スタイルシートを作成するための基本的なお約束について述べます。
スタイルシートが、正しくHTMLの各要素に反映できるよう、正しく記述しなくてはなりません。ここでは、そうした文法的な規則も含めて解説します。
セレクタと宣言部
スタイルシートの基本骨格はセレクタ(選択部)とその宣言部になります。
  p { color: #000000 }

    p = セレクタ
  { 〜 } = 宣言部
  color = 属性   #000000 = 値
このスタイルシートの記述では、セレクタ、宣言部、属性、値の前後に任意の空白文字を入れることが可能です。ただし、半角空白文字かタブキーに限ります。
スタイルシートの記述は、半角大文字と小文字を区別しません。好きなタイプを選んで頂いてもかまいません。ただし、セレクタに id が設定された場合には、大文字と小文字を厳格に区別しますので、注意してください。どちらか一方に統一しておいた方が安全でしょう。当講座では、すべて小文字に統一しています。
スタイルシートの実装方式
スタイルシートを HTML文書に適用するためには、3つの方式があります。
インライン方式
インライン方式とは、HTMLに直接記述する方式で、要素の属性に style属性 を利用します。この方式は、その要素のみに適用され、他の同じ要素型には適用されません。
  <p style="color:#000000">  〜  </p>
インライン方式のスタイルシートは、他の方式のスタイルシートより最も優先されます。この方法は、一時的な、やむをえない場合などに有効です。
なお XHTMLでは、style属性 は非推奨扱いとなっていますのでご注意ください。
エンベッド(埋め込み)方式
HTMLのヘッダ部で 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>
どのような方式のスタイルシートであっても、このサンプルの6行目に掲げたスタイルシートの MIMEタイプ を記述しなければなりません。忘れやすい構文なので、しっかり覚えてください。スタイルシートを利用するための基本的な作法となります。
また、style要素 を使う場合にも、type属性 を記述して、同じように MIMEタイプ を指定しなくてはなりません。これは、あなたの作成したスタイルシートが、ユーザエージェントで正しく理解するために必要な作法となります。
なお XHTML1.1では、スタイルシートは外部に置く「リンキング方式」の利用が推奨されています。詳しくは、XHTMLの CSSとスクリプトの扱い について参照してください。
リンキング(外部スタイルシート)方式
非常に多くのサイトで利用されている方式で、外部文書として作成したスタイルシート文書 (拡張子が .css の文書) とリンクして、HTML文書に描画するために用います。
例えば、「banban.css」というスタイルシート文書を取り込むために、ヘッダ部で以下のように記述します。
<link rel="stylesheet" type="text/css" href="banban.css">
一般的な視覚系ブラウザでは、複数のスタイルシートを取り込むことが可能です。なお、もし外部スタイルシートを作成したときに、HTML文書と異なる文字符合で記述した場合には charset属性 で、文字符号コード を指定する必要があります。不用意な文字化けを避けるために指定しなければなりません。
このリンキング方式のスタイルシートの優先順位は、一番最後となります。他のスタイルシートと併用する場合には、セレクタの選び方に気をつけてください。
次回は、「セレクタ」 について詳しく解説します。


This page is Valid HTML 4.01! 初版更新日 2004/1/16
Copyright(C) 2002-2004 banban@scollabo.com