＜ご注意＞ このJavaScriptでは、別途「samp.html」という名前のHTML文書が必要です。 適当なHTMLを作成し、この文書と同じディレクトリ（フォルダ）に置いてくだ さい。該当するファイルがないと自動的に閉じられません。 サンプルの実行結果 http://www.scollabo.com/banban/magazine/mm/sample_83-1.html ◆解説 ここでは、windowオブジェクトが持つ３つのメソッドを利用して、新たに開か れたウィンドウを 10秒後に自動的に閉じる JavaScriptです。 ■function newWindow() { 関数を定義しています。この関数名は newWindow() となっており、HTMLでは、 イベントハンドラ（イベント属性）を使って、関数を呼びます。 ■newWin = window.open("samp.html","NewWindow","width=300,height=80"); 新しく開くウィンドウの内容を設定しています。ここでは新たに開かれるウィ ンドウ内に表示する文書を samp.html という HTML文書を指定しています。 ウィンドウの横幅を 300ピクセル、高さを 80ピクセルとしました。 なお、指定した文書が見つからないとウィンドウは閉じられません。 ■setTimeout("closeWin()",10000); タイマーの設定をしています。ここでは10秒が経過したら closeWin() という 関数を実行します。なお、１秒は 1000 となりますので、自由に数値を変えて タイマーの時間を調整してください。 ■function closeWin() { closeWin() という名の関数を定義しています。 この関数では、指定された関数によって開かれたウィンドウを閉じます。 ■ input要素は単独でも利用できます。ただし、古い Webブラウザでは無視され る場合がありますので、その場合には、form要素の中で配置してください。 type属性で、入力フィールドをボタンに設定しています。ボタンに表示される 文字は value属性で指定します。 onclick属性とは、イベント属性の１つで、ここではボタンがクリックされた ら JavaScriptで定義された newWindow() という関数を呼びます。 ◆windowオブジェクトのまとめ windowオブジェクトでは、現在表示されているウィンドウを含めた、ウィンド ウ全体をオブジェクト（モノ）の対象としています。 windowオブジェクトの中には、閲覧者が嫌がる傾向のメソッドが含まれてい ます。例えば断りなく新しいウィンドウを開くとか、うざったい警告ウィンド ウとか、ステータスバーにメッセージを流すとか、迷惑なスクリプトを実に簡 単に作成することができます。 JavaScriptが万人に受け入れられるよう、最低限のマナーを守りながら、創 意あふれる自由で独自のスクリプトを作るように心がけましょう。 次回は（いつになるのか分かりませんが）、documentオブジェクトについて 解説する予定です。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座（第４回） --- 色を扱う スタイルシートで扱える色は、24ビットのフルカラー（1677万色以上）になり ます。恐ろしい数ですが、どんな環境でも再現できる色は 216色しかありませ ん。その点を含めて、色について解説します。 ■文字色と背景色の関係 高齢者の方は、明るい光を好みません。最近の統計によれば２人に１人、つま り50％以上の人たちが目に異常を持っており、その多くが「白内障」です。 その障害をもつと、明るい光は目が痛く感じられます。ご存知のとおり、コ ンピュータのモニターで描画される文字や背景、様々なドキュメントは光の３ 原色によって色が作られています。 つまり、文字であれなんであれ、モニターに映し出されるすべては光である ということを覚えてください。その光が明るすぎると、高齢者にとって辛い状 況に陥ります。 WindowsOS では、「ユーザ補助」という機能が備わっており、これを「オン」 にすると画面全体が暗くなります。高齢者にとっては目に優しくなるわけです。 実は Webブラウザにも同じ機能を持っています。自分なりに文字色や背景色 を設定する機能が備わっています。非常に多くの人たちが利用しています。 前置きが長くなりました。これからが本題です。 W3C (World Wide Web Consotium：Webの標準化を制定する団体) では、文字色 を指定する場合には、一緒に背景色も指定するように推奨されています。 文字色を黒色にしたとき、先ほど説明したとおり、閲覧者側で背景色を黒色 に設定した場合には、文字を読むことができなくなります。 同様に、背景色を指定した場合にも、文字色を同時に指定する必要が出てき ます。せっかく作り上げたコンテンツが、環境によって読めなくなるのは、作 者も閲覧者も悲劇というものです。 ■Webセーフカラー スタイルシートを使うということは、HTMLの文書構造からビジュアルデザイン を分離するという基本的な考え方があります。その最大の理由は、閲覧者の環 境に依存しない正しいマークアップに他なりません。 そうした考え方を踏襲すれば、閲覧者の環境に依存しない色を使うことには スタイルシートを利用することと何ら変わるものではありません。読者の皆様 には、是非、色を扱うう際には Webセーフカラーという閲覧者の環境に依存し ない色を使っていただきたいと考えます。 Webセーフカラー・カラーパレット一覧 http://www.scollabo.com/banban/lectur/websafe.html ■スタイルシートの色の指定 色を扱う場合の基本が16進数の記述です。16進数では、赤緑青という順序で色 を指定します。発色の度合いが高いほど数値も高くなります。 #000000 何も発色しない → 黒色 #ffffff 全部が発色 → 白色 #ffff00 赤と緑が発色 → 黄色 このようにして、色を決めていきます。 ところで Webセーフカラーでは、f、c、9、6、3、0、という数値だけしか扱 えません。しかしこれを組み合わせることで 216色が使えるようになります。 スタイルシートの場合には Webセーフカラーも含め、３桁で色を指定するこ とができます。なお、この指定は Webセーフカラー以外の指定も行うことが可 能で、全部で4096色を扱うことができます。 スタイルシートで、スタイルを設定する属性とその値はコロン「：」で区切 りますが、複数の属性と値を設定する場合には、セミコロン「；」で区切るこ とにより幾つでも記述することができます。セミコロンの前後には自由に空白 文字（半角かタブキーのみ有効）を配置できます。 #000 → 黒色 赤緑青それぞれを１桁ずつで記述 書式： p { color: #000; background: #fff } （段落 p要素の範囲の文字色を黒色に、背景色を白色に指定） スタイルシートでは RGBによる指定も可能です。その引数には以下のように 記述します。 書式： p { color: rgb(0,0,0); background: rgb(255,255,255) } これは、16進数の色指定を10進数に変換して指定する方法です。f は 256番 目の色であるため 255とします。コンピュータは 0 から数えますので、255は f と同じ値を持ちます。この記述では、24ビットフルカラーが扱えます。 また、色をパーセントでも指定することができます。この場合は 0 〜 100 となりますので、全部で 100万色が指定できます。 書式： p { color: rgb(0%,0%,0%); background: rgb(100%,100%,100%) } ■色を扱うことの注意点 この講座で何度となく述べてきましたが、色を扱う際にはその配色に配慮して ください。文字色と背景色の配色がうまくないと、コンテンツを読めなくなる 可能性があります。 明るい色の背景色で、明るい色も文字色では「ステルス効果」になってしま い、文字を読み取ることができません。また、色弱障害者は赤系色と緑系色の 区別が上手く行われません。このような点にも配慮して色を使うようにしてく ださい。あまり色に頼ったページにならないように気をつけましょう。 次回はスタイルシートで扱う単位について解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆インターネット用語解説 --- FAQ 多くの商用 サイトでは、この FAQなるものを提示しています。これは「よくあ る質問」という意味の「Frequently Asked Question」からきた略語です。 製品やソフトウェアなどを紹介するページでは、トラブルに関する情報が満載 されています。そのことは消費者にとって、非常に有益な情報となります。 皆様が Webサイトを構築するときに、関連した情報として、困ったときや分 からないこと、あるいは閲覧者から寄せられた質問などから、特に多い問題点 などを集め、コンテンツとして提供することができれば、信頼感と親しみやさ を演出することができます。 最近は掲示板の人気も急増していますが、困ったときに探しやすいという点 では、FAQの右に出るものはないでしょう。 作者自身が便利だと感じるものから掲載すると、案外作業がはかどることで しょう。もっと FAQは活用されてもいいのではないかと考えます。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆更新情報 当メールマガジン「第71号」から「第80号」までを圧縮ファイルにしました。 自由にダウンロードすることができます。特に、新しく読者になられた方には、 オフラインでゆっくり読むことができますので、ご利用ください。 なお、圧縮ファイルはプラットフォーム環境ごとに用意していますので、あな たの環境に合わせてご利用ください。バックナンバーで利用している文字符号は 「Shift_Jis」を採用しています。 アーカイブファイル・ダウンロード http://www.scollabo.com/banban/daf/archive.html □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで、ではでは・・ 今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。 Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して います。あわせて過去の記事のおさらいも掲載しています。 （今週のおさらい） http://www.scollabo.com/banban/magazine/review_082.html 次回は、２月６日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 質問・ご意見ははこちらまで→ banban@scollabo.com なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなると 思います。 ただし、個人的な事由により返事が遅れることがあります。ご了承ください。 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて くれると思います。 発行者 ばんばん 協 力 スズキ・コラボレーション http://www.scollabo.com/ 配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196） 誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。 バックナンバー こちらで公開しています。 プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html 各号のおさらい http://www.scollabo.com/banban/magazine/ アーカイブ http://www.scollabo.com/banban/daf/archive.html まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196 配信の変更・中止はこちらです。 個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か ります。 当サイトにて http://www.scollabo.com/banban/magazine/top.html まぐまぐにて http://www.mag2.com/m/0000090196.htm □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ＜えでぃた〜ず・る〜む＞ 新たなコンピュータウィルスが猛烈な勢いで広まっています。くれぐれも不 用意にメールに添付された意味不明のファイルを開かないように注意してくだ さい。 もしかしたら、私のメールアドレスを利用してばら撒いているかもしれませ んが、私のほうから皆さんに一歩的にメールすることはありませんので、くれ ぐれも誤解なきよう。 かく言う私は、インフルエンザ・ウィルスに感染し、激しい高熱とのどの痛 み。吐き気に悩まされています。当地は乾燥が激しく、ウィルスが生息するの には格好の季節となっています。 読者の皆様も、うがいやビタミンＣの摂取を日頃から積極的に行ってくださ い。病気になっても、いい事は何もありません、辛いだけです。トホホ・・ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆著作権について 個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ ておりません。記事中の内容について、無断で使用することを固く禁じます。 なお、記事中のスタイルシート、HTML、JavaScriptなどをご自分のページ作成 に自由に使っていただいても差し支えありません。 Copyright(C) 2002-2004 www.scollabo.com/banban/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_89.txt 100666 0 0 45731 10031200060 15672 毎週金曜日配信 What's New 2004/3/19 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ┏┏┏┏ 初心者のためのホームページ作り/Web for beginner ┏┏┏ http://www.scollabo.com/banban/ ┏┏ ┏ ＜第89号＞ banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的 な Webページ作成に役立つことを目的に配信されております。 当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよ うになります。 今週のコンテンツ ■ Webデザイン 第31回 --- ブログの維持 ■ HTML講座 第31回 --- 文書型定義 (DTD) の不思議 ■ CSS講座 第10回 --- 枠線 ■ 属性の解説（第14回） --- target属性 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Webデザイン（第31回） ブログの維持 大流行している「ブログ：Weblog」ですが、実際に毎日情報を発信するのは大 変なことです。「ブログを公開したからには、毎日書くぞ！」と張り切ってい る方も少なくないと思います。 私も、個人的な偏見に満ちたブログを公開していますが、決して毎日書いて いるわけではありません。思いついた日に思いついたことを勝手に書いている だけです。 毎日何かを発信し続けるのは、どうしても自分自身が消耗するのではないか と考えたことがありました。 しかし、考えてみれば「ブログ」が登場した背景は、9.11以降の何も言えな くなったアメリカの社会で、「それはちがうだろう！」という、ともすると反 社会的な意見を持った「勇気ある」人たちから始まったのです。 当時のアメリカは、テロという共通の敵に対する翼賛的な体制になりつつあ り、新聞やテレビなどのマスコミが政府に対して何も言えない状態でした。何 か反論すると「テロに味方するのか」という見方をされ排斥されました。 そうした中で、「こりゃ違うんじゃないの？」という疑問をもった知識人た ちが「本音」で語るツールとして「ブログ」が注目されました。 日記という形で自分の本音をコンテンツとして発信したブログは、こうした 背景の中で爆発的に流行し、１つの文化として定着しつつあります。 ■長く続けられるということ ブログは、その仕組みから他のブログにトラックバックを発信することで、大 きな輪となって広がっています。それは閲覧する人にとっても有用な情報を簡 単に探せるという利点も併せ持っています。 ブログを開設するということは、そうした大きなうねりを持った輪に参加す るのと同じです。だからこそ、じっくりと練りこんだ発言を発信し続けたいも のです。 発信続けることは決して「消耗」することにはなりません。何かを発言する ということは、それなりの裏づけがあるわけです。そして、書き続けることに よって書き方のコツがつかみ取れるし、持続することによる「力」がついてき ます。 これは Webサイトの運営でも同じことです。持続することで成長することが あります。とにかく Webという広大な空間に向かって発信するわけですから、 何ごとも真剣で、真正面から取り組みたいものです。 (第32回 SEO対策につづく) □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML講座 (第31回) 文書型定義 (DTD) の不思議 不思議なことに、HTMLがまったく同じ構文なのに、文書型定義によっては異な る表現をします。それは何故でしょう？ ■文書型定義とは 文書型定義を一言で述べれば、作成するHTML文書の仕様を定義するものです。 つまり、記述されるHTMLが、どのバージョンに準拠しているかを明示的に宣 言します。本来ならば Webブラウザは記述された文書型定義を参照し、その仕 様にしたがってレンダリングすべきものですが、実際は Webブラウザが実装し ている仕様にしたがってレンダリングするのが実情です。 そのため、HTML文書はブラウザ固有の仕様によって異なる表現になることが あります。 具体的な相違は、親要素の設定を継承しないとか、あらかじめ定義されてい る文字の大きさや、余白、位置の不具合などが報告されています。 １．HTML4.01 Transitional 互換型 この文書型定義は、それ以前のバージョンで定義された要素や属性など を使うことができる過渡期仕様の互換型で、DTDを参照する URI は含ま れません。 互換型の文書型定義は以下のように記述します。 ２．HTML4.01 Transitional 標準型 Transitional互換型と同様に、以前の要素、属性などを使うことができ ます。この宣言は、その仕様を参照する URI が含まれます。 基本的に Webブラウザは、その仕様を参照してレンダリングすること となっていますが、銘柄によってはそれを無視することがあります。 標準型の文書型定義は以下のように記述します。 ３．HTML4.01 Strict 互換型 この文書型定義は「厳格仕様」として、以前の要素や属性を使うことが できません。あくまでも HTML4.01 として定義された要素と属性しか使 えません。以前のタイプを「非推奨」扱いとしています。本来の理想と する構文を示すものです。DTDを参照する URI は含まれません。 HTML4.01 Strict 互換型の文書型定義は以下のように記述します。 ４．HTML4.01 Strict 標準型 Strict互換型同様、以前の要素や属性を使うことができません。 この宣言は、その仕様を参照する URI が含まれます。 基本的に Webブラウザは、その仕様を参照してレンダリングすること となっていますが、銘柄によってはそれを無視することがあります。 HTML4.01 Strict 標準型の文書型定義は以下のように記述します。 ５．HTML4.01 Frameset 互換型 フレームを利用する場合に限って、この文書型定義を宣言しなければな りません。仕様は、Transitional型と同じ以前の要素と属性を使うこと ができます。DTDを参照する URI は含まれません。 HTML4.01 Frameset 互換型の文書型定義は以下のように記述します。 ６．HTML4.01 Frameset 標準型 Frameset互換型同様に、フレームを利用する場合にこの文書型定義を宣 言します。この宣言は、その仕様を参照する URI が含まれます。 基本的に Webブラウザは、その仕様を参照してレンダリングすること となっていますが、銘柄によってはそれを無視することがあります。 HTML4.01 Frameset 標準型の文書型定義は以下のように記述します。 ■継承とは、 継承について具体的に説明すると、 文字色 基本的に親要素の文字色が子要素にも継承される 文字サイズ 基本的に親要素で設定された文字サイズが継承され、子要素で 文字サイズが設定された場合には、親要素で設定された文字サ イズの比率となる 例えば、body要素で指定された文字サイズは、他の要素で文字サイズを指定 しなかった場合には、親要素の文字サイズが継承されます。子要素で文字サイ ズを指定した場合 (例えば 90%とした場合) 親要素の文字サイズを基本とした 比率にならなければなりません。 ところが、文書型定義を変えることによって Webブラウザはそれぞれの銘柄 で異なるふるまいをします。 以下のファイルを見比べてください。微妙に異なることに注意してください。 HTML4.01 Transitional 互換型 http://www.scollabo.com/banban/magazine/mm/sample_89-1.html HTML4.01 Transitional 標準型 http://www.scollabo.com/banban/magazine/mm/sample_89-2.html HTML4.01 Strict 互換型 http://www.scollabo.com/banban/magazine/mm/sample_89-3.html HTML4.01 Strict 標準型 http://www.scollabo.com/banban/magazine/mm/sample_89-4.html 当然 OS や Webブラウザの銘柄が異なれば、それぞれのレンダリングも変化 します。 比較的新しいブラウザでは、文書型定義を参照する URI の有無で、異なる 場合があります。例えば、Windows版、及び Macintosh版 MSIE の場合、互換 型と標準型で文字サイズのレンダリングに相違があります。 結果から申し添えれば、HTML Transitional を使う場合には、概ね標準型の レンダリングに好感が持てます。 なお、文書型定義を宣言しない場合、仕様書では HTML 2.0 として扱うよう に規定されています。HTML文書では、その冒頭で必ず文書型定義を明示的に宣 言しなければなりません。正しいHTMLを作成するためにもお忘れなく。 XHTMLの場合には、XML宣言の有無でも Webブラウザによっては、その振る舞 いが違ってきます。なかなか「標準」となるブラウザを探すのは容易ではない ようです。 次回は、アクセシブルなテキストの表現について解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Tips 文書型定義の統一 サイト内で登録されているすべてのページでは、特に意味がなければ同じ文書 型定義を宣言するように心がけましょう。今回説明したとおり、文書型定義の 種別によっては異なる表現をします。 ページを繰るたびに違う表現というのはあまり心地よいものではありません。 文字サイズや余白、継承といった様々な要素の中で、それらが変化するという 文書型定義の性質を考慮して、統一性のあるページを作成することが大切なこ とではないかと考えます。 文書型定義の種別によって異なるレンダリングという弊害は避けられないも のです。作者の意図とは異なることが多々あるのが実情です。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座（第10回） 枠線表示 末梢線や下線表示を含まないものとして、HTMLで枠線が表示できるのは、基本 的にテーブル要素だけです。その他の枠線指定に関する要素や属性は、すべて 独自規格であるため、環境によっては無視されることがあります。 スタイルシートでは、ブラウザ画面に表示するすべての要素で、様々な形式 の枠線を設定することが可能です。インラインレベルでも、ブロックレベルな どの要素に、簡単に枠線を設定することができます。 枠線を指定するとき、枠線の形式、色、太さといった３つの属性が用意され ており、それぞれを個別、あるいは一括で設定することができます。 ■枠線の形式 枠線の形式とは、枠線の表現を示すもので、単純な直線や破線、点線などの形 式を指し、スタイルシートでは、border-style属性で設定します。 枠線を指定するために、あらかじめ以下のような８つの形式が用意されてい ます。 solid 直線 ( ― ) dashed 破線 ( -- ) double 二重線 ( ＝ ) dotted 点線 ( … ) groove 立体的に窪んだ感じの線 ridge 立体的に隆起した感じの線 inset 立体的に要素ごと窪んだ感じの矩形 outset 立体的に要素ごと隆起した感じの矩形 border-style属性で形式を指定する方法は、上下左右を個別で、あるいは、 一括で設定します。なお、枠線の色や太さはブラウザ依存となります。 □枠線形式を個別で設定 上下左右の枠線形式の指定は以下のとおりです。 botder-top-style 上側の枠線形式を指定する botder-left-style 左側の枠線形式を指定する botder-right-style 右側の枠線形式を指定する botder-bottom-style 下側の枠線形式を指定する □枠線形式を一括で指定する 上下左右の枠線形式を一括で設定する方法です。 border-style 上下左右に指定した形式で枠線を表示する □具体的な書式 枠線形式を設定する具体的な書式は以下のとおりです。 p { border-bottom-style: dotted } 要素の下側に点線の枠線を設定 p { border-style: solid } 要素の上下左右に直線の枠線を設定 ■枠線の太さ 枠線の太さを指定する場合、同時に枠線形式を併用する必要があります。形式 が設定されない場合、枠線そのものを表示することができません。 枠線の太さは、border-width属性を使いますが、それぞれ個別に設定するこ とができます。 □枠線の太さを指定する単位 枠線の太さを指定するとき、以下の単位を使います。 thin 細い枠線 medium 中くらいの太さの枠線 thick 太い枠線 数値＋単位 スタイルシートで扱う単位で太さを指定する thin、medium、thick などの実際の太さは、ブラウザに依存します。 数値と単位を組み合わせた太さは、それぞれの単位に依存します。 □枠線の太さを個別に設定 上下左右の枠線の太さの指定は以下のとおりです。 border-top-width 上側の枠線の太さを設定する border-left-width 左側の枠線の太さを設定する border-right-width 右側の枠線の太さを設定する border-bottom-width 下側の枠線の太さを設定する □枠線の太さを指定する具体的な書式 前述したとおり、枠線の太さを指定する場合は、border-style属性を一緒に 用いる必要があります。 h1 { border-style: solid; border-left-width: 2em } p { border-style: dashed; border-bottom-width: medium } ■枠線の色 枠線の色を指定する場合には、同時に、border-style属性を指定する必要があ ります。もし、その属性を指定していない場合には、枠線は表示されません。 □枠線の色を指定する単位 枠線に色をつける場合には、以下の3つの単位が指定できます。 16進数フルスペック RGBを２桁ずつで指定 (#ff9900 オレンジ色) 16進数の３桁指定 RGBを1桁で指定 (#f90 は #ff9900 と同じ) カラーネーム (色名) あらかじめ定義されている16色の色名で指定 □枠線の色を個別に指定 枠線の色は上下左右に個別で設定することができます。 border-top-color 上側の枠線の色を設定する border-left-color 左側の枠線の色を設定する border-right-color 右側の枠線の色を設定する border-bottom-color 下側の枠線の色を設定する □枠線の色を指定する具体的な書式 枠線の太さを指定する場合は、border-style属性を一緒に用いる必要があり ます。 h1 { border-style: ridge; border-left-color: green } p { border-style: solid; border-bottom-color: #09f } ■枠線の各設定を一括で行う 枠線は、要素の上下左右の位置や形式、太さ、色などを一括で指定することが できます。いちいち border-style、border-width、border-color などの属性 を個別に設定することなく行えます。 □各設定を位置を指定して一括で指定する 上下左右の位置を指定して、形式、太さ、色などを一括で指定します。 border-left 要素の左側に枠線を一括で設定する border-top 要素の上側の枠線を一括で設定する border-right 要素の右側に枠線を一括で設定する border-bottom 要素の下側に枠線を一括で設定する □各設定をまとめて指定する 上下左右にまとめて各枠線表示のスタイルを設定します。各設定の値は半角 のスペースで区切って、それぞれで指定します。 border 上下左右に枠線の太さ、色、形式を一括で指定します。 □一括設定の具体的な書式 この属性を使った設定には、border-style属性は必要ありません。 h1 { border-left: 2em solid #f90; border-right: 2em solid #f90 } p { border: thicl double #039 } ■padding属性を併用する方法 どのような方法で枠線を設定するにせよ、枠線とコンテンツに隙間がないのは 窮屈に感じます。そこで、前回説明した padding属性を使って、コンテンツに 余裕をもたせる方法があります。 p { border: 1ps solid red; padding: 2px } この設定は、段落要素のコンテンツに赤色の１ピクセル幅の枠線を表示させ るものですが、枠線とコンテンツの間に２ピクセル分の余白を設定しています。 このようにすることで、見やすい環境を提供することができますので、いろい ろとお試しください。 次回は、背景画像の設定について解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML、XHTML属性の解説 --- target属性 リンク先のページを指定したウィンドウで表示させるために用いられます。 特に、フレームを使ったページでは必須の属性になります。フレームがない 場合には、新規のウィンドウを開かせることが可能です。 ■target属性 リンク先の表示ウィンドウを指定する DTD： HTML4.01 Transitional、および Frameset で利用可能 属性値： フレーム名、 _top、 _blank、 _self、 _parent など 記述法： … 関連要素： a、area、base、link、form など XHTMLの制限： XHTML1.0 Transitional および Frameset で利用可能ですが、 XHTML1.0 Strict および XHTML1.1 では利用できません。 フレームを使うページでは、複数のウィンドウで構成されるため、各ウィンド ウで表示させるリンクには、target属性を使わなければなりません。また、フ レームを解除させる場合には、_top という値を使います。 _self の場合は、 同じウィンドウ内でリンクするときに用います。 フレームがないページでリンクをクリックしたとき、新しいウィンドウで表 示させているときには、target属性が使われ、_blank、あるいは _parentなど の値が指定されています。 どちらにしても、閲覧者のリソースを消費するだけなので、リンクはできる だけ同じウィンドウ内で設定したいものです。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 今回はここまで、ではでは・・ 今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。 Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して います。あわせて過去の記事のおさらいも掲載しています。 （今週のおさらい） http://www.scollabo.com/banban/magazine/review_089.html 次回は、3月26日に配信を予定しています。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 質問・ご意見ははこちらまで→ banban@scollabo.com なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなると 思います。 ただし、個人的な事由により返事が遅れることがあります。ご了承ください。 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて くれると思います。 発行者 ばんばん 協 力 スズキ・コラボレーション http://www.scollabo.com/ 配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196） 誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。 バックナンバー こちらで公開しています。 プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html 各号のおさらい http://www.scollabo.com/banban/magazine/ アーカイブ http://www.scollabo.com/banban/daf/archive.html まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196 配信の変更・中止はこちらです。 個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か ります。 当サイトにて http://www.scollabo.com/banban/magazine/top.html まぐまぐにて http://www.mag2.com/m/0000090196.htm □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ＜えでぃた〜ず・る〜む＞ このところ個人情報の流出が問題になっていますが、身近にある個人情報につ いては、あまりにも関心が払われていないような気がします。 私も自分の個人情報を、どんなところにバラ撒いているのかを考えました。 ガソリンスタンドで発行するサービスカード、自動車デーラー、病院の受診カ ード、大手家電店のポイントカード、病院、行きつけの床屋さん、ISP (プロ バイダ) 、オンラインショップ、銀行、不動産屋、その他数え上げるとかなり の数になります。 こうした中で個人情報がしっかり管理されていることに疑問を感じます。そ う思うとこれから先、そうそう簡単に申込書などに記入することに不安を抱き ます。イヤな世の中になりましたねぇ。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆著作権について 個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ ておりません。記事中の内容について、無断で使用することを固く禁じます。 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい ただいても差し支えありません。 Copyright(C) 2002-2004 www.scollabo.com/banban/ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 初心者のためのホームページ作り_88.txt 100666 0 0 61471 10031200030 15665 毎週金曜日配信 What's New 2004年3月12日 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ┏┏┏┏ 初心者のためのホームページ作り/Web for beginner ┏┏┏ http://www.scollabo.com/banban/ ┏┏ ┏ ＜第88号＞ banban@scollabo.com □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的 な Webページ作成に役立つことを目的に配信されております。 当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよう になります。 今週のコンテンツ ■ JavaScript講座 第16回 --- documentオブジェクト ■ CSS講座 第９回 --- padding ■ インターネット用語解説 第６回 --- ブログ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆JavaScript講座 --- documentオブジェクト documentオブジェクトは windowオブジェクトの下位階層に位置し、最も頻繁 に使用するオブジェクトで、画面上に表示されているページに関するあらゆる 情報（文字列、画像、フォーム、リンクなど）を扱います。 documentオブジェクトが持つメソッドとプロパティは以下のとおりです。 ■documentオブジェクトのメソッド clear 表示中のドキュメント内容を消去する close 表示ストリーム (openで開始したドキュメントの出力) を閉じる open 表示ストリーム (ドキュメントの出力) を開始する write ページに指定した文字列を表示する writeln ページに指定した文字列を表示して改行する このメソッドの中で、write と、writeln は同じ意味ですが、writeln は改 行を持って表示されているといわれています。ただし、一般的な視覚系ブラウ ザでは「改行」されず、そのまま出力されますので、基本的には、write と同 じ意味で解釈されます。 ■documentオブジェクトのプロパティ alinkColor 読み込まれたリンクの文字色を参照、または設定する anchors 現在表示されている全アンカーの内容を持つオブジェクトの配列 bgColor 背景色を参照、または設定する cookie ちょっとした情報を入れるための文字列型のオブジェクトを参照 domain ドメイン名を返す fgColor 文字色を参照、または設定する forms 現在表示されている全フォームの内容を持つオブジェクトの配列 lastModified 現在表示されているページの最終更新日を参照する linkColor リンクの文字色を参照、または設定する links 現在表示されている全アンカーの内容を持つオブジェクトの配列 location 現在表示されているドキュメントの URLを参照、または設定する referrer 移動先の呼び出した URLを参照する title ページのタイトルを参照、または設定する vlinkColor 訪問済みのリンクの文字色を参照、または設定する documentオブジェクトで、最も利用頻度の高いものがここに掲げたプロパティ ではないでしょうか。特に、最新更新日を参照したり、背景色の設定などで利 用されたりします。 プロパティは大文字と小文字を厳格に区別しますので、扱いに気をつけてく ださい。 ■document writeメソッドの使用例 documentオブジェクトが持つメソッドの中で、最も多く利用されているのが、 document.write (あるいは document.writeln) でしょう。 これは、テキストや静止画像を Webブラウザに出力するメソッドで、面白い ことに、HTMLタグさえ配置することができます。 具体的には、以下のように使います。 document.write("初心者のためのホームページ作り"); document.write("
");
その気になれば、このメソッドを利用してHTMLの全文を記述することができ
ますが、あまり現実的とは思えません。
HTMLタグを挿入する場合、終了タグの扱いに気をつけてください。終了タグ
では、初心者のためのホームページ作り<\/h1>");
このように、/ の前に \ (バックスラッシュ) をいれて とします。
これによって不用意なトラブルからエスケープ (回避) することが可能になり
ます。
■document openメソッドの使用例
似たようなメソッドとして window.open がありますが、根本的に異なるのは、
このメソッドでは、他のファイルを開いて出力させるものではありません。
openメソッドは、指定された MIMEタイプ形式のファイルをオープンするも
ので、MIMEタイプを省略した場合には自動的に「text/html」になります。
具体的な構文は以下のとおりです。
ここでは、新たに開かれたウィンドウの内容について記述しています。MIME
タイプが指定されていないため、そのファイルは「HTML文書」となります。
具体的なHTMLのタグは、document.writeメソッドで記述されたとおりです。
なお document.openメソッドで開かれたウィンドウは、必ず closeメソッド
を使って閉じなければなりません。もし closeメソッドがない場合には、ウィ
ンドウにスクロールバーなどが表示されないなどの不具合が発生します。
document.clearメソッドは開かれたファイルの内容をクリアにて初期状態に
戻すために利用します。
■document.alinkColorプロパティの使用例
このプロパティは、現在のリンクに設定されている文字色を参照したり、任意
に設定することができます。
リンクの色を参照する場合は、
n = document.alinkColor;
document.write(n);
これで、簡単に現在のリンク色をブラウザに出力させることができます。
リンクの色を設定する場合は、
dcument.alinkColor = "#0033cc";
この構文だけでリンクの色を設定します。
■document.anchorsプロパティの使用例
現在読み込まれている文書から、埋め込まれているアンカー ()
の数を参照するプロパティです。アンカー名は参照できません。
また、アンカーが埋め込まれていない場合には、0 を返します。
具体的な構文は、
n = document.anchors.length;
lengthは、数を調べるメソッドで、ここでは埋め込まれているアンカーの
数を変数 n に代入しています。
■document.bgColorプロパティの使用例
人気のあるプロパティで、現在の背景色を参照したり、あるいは任意に設定し
たりするときに使います。
ただし、スタイルシートなどにより予め背景色を指定していた場合には、環
境によっては無効となりますので、その点に注意してください。
具体的な構文は、
dcument.write(document.bgColor); 背景色を参照する場合
document.bgColor = "#ffcccc"; 背景色をクリーム色に設定している
なお、色を設定する場合には、16進数のカラーコードのほかに、JavaScript
で定義されている「カラーネーム：色名」を使うことができます。
JavaScriptカラーネーム一覧
http://www.scollabo.com/banban/java/colorchart.html
■document.cookieプロパティの使用例
クッキーファイルの内容を参照したり、変更する場合に利用します。このプロ
パティは、唯一閲覧者のローカルファイルを参照することができますので。扱
いには十分注意してください。
書き込まれた変更内容は、ある一定の期間が経つと自動的に消去されます。
具体的な構文は、
document.write(document.cookie); クッキーファイルの参照
document.cookie = "Thisi is Test"; クッキーファイルの変更
■document.domainプロパティの使用例
現在読み込まれているページ上のドメイン名を参照します。
具体的な構文は、
document.write(document.domain); 現在のドメイン名を参照する
■document.fgColorプロパティの使用例
現在のページで指定されている文字色を参照したり、あるいは予め文字色を指
定する場合に使います。
ただし、スタイルシートなどにより予め文字色を指定していた場合には、環
境によっては文字色の設定は無効となりますので、その点に注意してください。
具体的な構文は、
document.write(document.fgColor); 現在の文字色を参照する
document.fgColor = "#000099"; 文字色を濃い青色に設定する
■document.formsプロパティの使用例
現在読み込まれているフォームの名前やオブジェクトなどを配列として取り込
んで参照します。
ここでいうオブジェクトとは、フォーム内で配置されている入力フォールな
どを指します。このプロパティでは、フォームのオブジェクトを設定すること
はできません。
具体的な書式は、
document.フォーム名.入力フィールド要素名.form
なお、入力フィールドが複数設定されている場合は [ ] で囲んで添字を
使って、入力フィールドの出現する順位を明示します。ただし、この場合
最初の番号は 1 ではなく 0 となります。
具体的な構文は、
a = document.myForm.element[2].form; オブジェクトを参照している
document.write(a); そのデータを出力している
このプロパティの一般的な利用法として、入力されたデータを検証する際に用
いられることが多いようです。
■document.lastModifiedプロパティの使用例
現在読み込まれているページの最後に更新された日付を参照します。つまり、
最新更新日を出力するのに用いられます。ただし Mac版 Netscape では、必ず
しも正しい日付が返されるわけではありません。
具体的な構文は、
update = document.lastModified;
document.write("最新更新日", update);
表示される日付は、2004/3/12 01:40:30 という形式でレンダリングします。
■document.linkColoプロパティの使用例
現在読み込まれているリンクの文字色を参照、あるいは設定したりします。
ただし文字色を設定する場合、スタイルシートなどにより予め文字色を指定
していた場合には、環境によっては設定は無効となりますので、その点に注意
してください。
具体的な構文は、
document.write(document.linkColor); リンクの文字色を参照している
document.linkColor = "#006699" リンクの文字色を設定している
■document.linksプロパティの使用例
現在読み込まれているリンクのオブジェクトを、配列として取り込んで参照し
ます。表示される内容は、絶対パスで記述された全文が返されます。
具体的な構文は、
■document.locationプロパティの使用例
現在読み込まれているページの URLを参照します。また、リンク先を設定する
ことも可能です。
リンクを設定する場合の具体的な書式は
documeny.location.href ="リンク先の URL を指定"; リンクの設定
現在のロケーションを参照する具体的な構文
document.write(document.location);
■document.referrerプロパティの使用例
現在のページの直前の URL を返します。
直前のページが存在しない場合は、そのディレクトリの index という HTML
ファイルを返す場合があります。（UNIXサーバの場合）あるいは、undefined
と返す場合もあります。(定義されていないという意)
referre (リファラー) とは、ハイパーリンク元を示すもので、アクセスロ
グなどに記録されますが、JavaScriptは Webブラウザの履歴を参照するもので
サーバのリクエストヘッダを読むものではありません。
具体的な構文は、
befor = document.referre; 直前のページを参照している
document.write(befor); 得られたデータを出力している
■document.titleプロパティの使用例
現在読み込まれているページ、あるいは他のページの title要素で囲まれた文
字列を参照します。
具体的な構文は、
myTitle = document.title; 現在のページのタイトルを参照している
document.write(myTitle); タイトルの内容を出力している
■document.vlinkColorプロパティの使用例
現在読み込まれている訪問済みリンクの文字色を参照、あるいは設定したりし
ます。
ただし文字色を設定する場合、スタイルシートなどにより予め文字色を指定
していた場合には、環境によっては設定は無効となりますので、その点に注意
してください。
具体的な構文は、
document.write(document.vlinkColor); 訪問済みリンクの文字色を参照
document.vlinkColor = "#800080" 訪問済みリンクの文字色を設定
documentオブジェクトは、様々なメソッドとプロパティを組み合わせることに
より、現在表示されているページの情報を読み取ることができます。また、ペー
ジに係わる様々な設定も可能です。
いろいろと試される中で、documentオブジェクトの魅力を体験してください。
次回の JavaScript講座は、locationオブジェクトについて解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第９回） 余白（padding）
前回はコンテンツの外側の余白について解説しましたが、今回はコンテンツの
内側の余白について取り上げます。
コンテンツの内側の余白を指定するスタイルシートの属性は、padding です。
指定する値は、スタイルシートで利用できるすべての単位で行います。
padding は、margin 同様、ほとんどの要素で利用できます。
■margin と padding の違い
簡単に図で説明すると以下のとおりです。
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ margin padding ┃
┃ ↑ ┌───────┐ ┃
┃ ┌─────┐ │ ↑ │ ┃
┃ ←│コンテンツ│→ │←コンテンツ→│ ┃
┃ └─────┘ │ ↓ │ ┃
┃ ↓ └───────┘ ┃
┃ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
この図を見てお分かりのとおり、マージン (margin) は、コンテンツの外に
位置した余白で、基本的に背景尺などは継承されません。
しかし、パディング (padding) はコンテンツの一部として扱われます。つ
まり、余白もコンテンツ領域であるということです。
￣￣￣￣￣￣￣
そのため、コンテンツに背景色などを指定した場合にも継承され、余白部分
も塗りつぶされます。
■パディングを個別で設定する
コンテンツの内側に余白を設定する paddingを、要素の上下左右に個別で指定
する属性は以下のとおりです。
padding-top 要素の上側にパディングを設定する
padding-left 要素の左側にパディングを設定する
padding-right 要素の右側にパディングを設定する
padding-bottom 要素の下側にパディングを設定する
■パディングをまとめて設定する
パディングの上下左右を一括で指定する方法は、指定する単位の数によって、
それぞれの内側の余白の設定が異なります。
padding: 単位 要素の上下左右を一括して設定する
padding: 単位 単位 要素の上下、左右の順で設定する
padding: 単位 単位 単位 要素の上、左右、下の順で設定する
padding: 単位 単位 単位 単位 要素の上、右、下、左の順で設定する
Macintosh版 MSIE では、一括で指定した場合に不具合が発声します。
ブラウザ固有のバグではないかと推測します。
■パディングの使い方
具体的なパディングの使い方はありません。ただ、枠線や背景色などを設定し
た場合、ある程度の余白を設定することで、コンテンツの表現に余裕が表示さ
れ、見やすい環境を提供できます。
視覚的なデザインにこだわったとき、極めて重宝する属性でしょう。
次回は、スタイルシートで扱う枠線表示について詳しく解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips
前回お伝えした margin について補足説明があります。これは padding にも
共通するものです。
■マージンのつぶし
２つのボックスを上下に並べたとき、最初のボックスで下側のマージンを 2em
(２文字分の余白) と取り、下に位置するボックスの上側のマージンを 1emと
した場合、その部分の合計は 3emとなります。
┏━━━━━━━━━━┓
┃ ↑ (margin 1em) ┃
┃ コンテンツ ┃
┃ ┃
┃ ↓ (margin 2em) ┃
┣━━━━━━━━━━┫ ← この部分が合計 3em となる
┃ ↑ (margin 1em) ┃ 実際には 2em だけが表示される
┃ コンテンツ ┃
┗━━━━━━━━━━┛
こうした時、実際に Webブラウザで表現される場合は、そのマージンは 2em
だけしかレンダリングされません。つまりどちらか多い方のマージンを取り、
少ない方のマージンはつぶされます。近接するマージンやパディングなどのお
互いの余白をつぶすことがあるということを覚えてください。
■マージンがつぶされない場合
スタイルシートで絶対位置指定や浮遊によって設定した場合には、互いの余白
は維持され、つぶされることがありません。
また、浮遊によって左右に並べた場合にも、左右のマージンはつぶされるこ
とがありません。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆インターネット用語解説 --- ブログ (Weblog)
9.11テロ事件後、アメリカで登場して以来、あっという間にブームとなって広
がった「ブログ」は、その後世界中で人気を博し、信じられないスピードで増
殖しています。そう、まるでウィルスのように。
新しいカルチャーとして根をおろしつつあるブログについて、ほんの触りだ
けですが、その仕組みを解説します。
■ブログとは？
元もとの語源は「weblog：ウェブログ」で、その言葉を短縮して「ブログ」と
読んでいるものです。ブログという言葉を定義するには、その意味があまりに
も広範に及び、なかなか説明つかないことがあります。
Weblog の log は、日誌を意味し、つまり Web上で展開する「日記サイト」
と言えなくもありません。日記を記事として時系列に並べられるツールが使え
ることで、個人ベースで運営されているのが一般的な印象です。
現在、毎日新しいブログが登場する背景として、個人の見解や思想、考え方
を比較的簡単に発信できるという要因があり、多くの人たちが何かを発言した
いという欲求を満たしているのではないかと推測します。
■ブログを提供しているサイト
無料で提供しているブログ構築サイトで、大変な勢いで伸びています。誰でも
簡単な手続きで加入することができ、しかも特別な知識やソフトを使うことな
く Web上で、容易に「ブログサイト」を構築することができます。
代表的なブログ提供サイトは以下のとおりです。
□はてなダイアリー http://d.hatena.ne.jp/
現在 202万人も利用している超人気サイト。無料
□ココログ http://www.cocolog-nifty.com/
ニフティが運営しているブログ。会員でなくても利用可。無料。
□マイプロフィール http://myprofile.ne.jp/
予め用意されているプロフィールカードで簡単作成。無料。
□ライブドアブログ http://blog.livedoor.jp/
同社の社長自らブログを発信している。無料。
□エキサイトブログ http://www.exblog.jp/
現在ベータ版で無料。テキスト及び画像を最大20MBまで利用可。
□PHPNuke http://phpnuke.org/ (英語)
ブログ CMSの老舗で、そのほとんどを PHPスクリプトで構成しています。
面倒な設定なしですぐに使える手軽さがあります。年間 $29.95
□TypePad
http://www.typepad.com/
人気の Movable Type のように、サーバにインストールするという複雑さが
ないために人気があります。月額 $4.95より。
□gooブログ
http://www.goo.ne.jp/
blogの検索，開設の両方を提供。無料。
■ブログツール
個人でも、自分の Webサーバで CGIが扱える場合 Web上で提供されているツー
ルを使うことで、ブログを構築することができます。
ツールは CMS「コンテンツマネジメントシステム」と呼ばれるもので、様々
なツールが Web上で手に入ります。若干、設定に知識を要しますが、自分でプ
ログラミングするわけではないので、比較的容易に導入することができます。
日記などローカルで編集したコンテンツをボタン１つで貼り付けられ、その
まま Webページを生成する機能が備わっています。
以下は、人気のある代表的なツールです。
□Movable Type http://www.movabletype.org/
最も人気のあるトロット夫妻の手による CMSツール。ほとんどのサーバに
インストールすることができます。比較的容易にカスタマイズできる利点
もありますが、XHTML、CSSに精通していないと自在に扱うことが困難です。
当サイトでも、この CMSを採用しています。ドネーション(寄付)ウェア。
□Zope http://zope.jp/
インタプリタ言語「Python」で書かれた CMSです。
コンテンツの操作や開発、管理がブラウザだけで行える特徴を持っており
ほとんどのプラットフォームに対応している秀作。このソフトはブログだ
けでなく Webサイト構築にも優れた機能を持っています。無料。
□WikiWiki http://c2.com/cgi/wiki?WelcomeVisitors
参加者が自由に編集したりできる「WikiWiki」ツールで、これをモデルと
して非常に多くのクローンが生まれています。そのほとんどがインタプリ
タ言語「Perl」で書かれていいます。秀逸。無料。
□iBlog http://www.lifli.com/Ploducts/iBlog/main.htm (英語)
Mac版ブログツール，シェアウェア $19.95
使ったことがないので詳細は分かりませんが、基本的にローカルで作成し
たコンテンツをボタンやアイコン操作でブログを構築できる CMSです。
■ブログと XML
ほとんどのブログツールでは XMLを生成する機能を持っています。これは一体
どんな働きがあるのでしょう？
例えば、あなたのページに誰かがリンクしてくれたと仮定します。しかし、
誰であってもリンクしてくれたことを知る術がありません。誰かがそのサイト
からアクセシした場合には、アクセスログから解析して知ることができますが
通常は、ほとんど知ることもなくそのままです。
しかし、ブログには「トラックバック機能」があり、誰かのブログからあな
たのブログにリンクを張ったとき、ブログ内にその結果が表示されます。
これは XMLの RSS (RDF Site Summary) というファイル形式がその役目を果
たします。
具体的な構文は、
| 氏名 | 国語 | 数学 | 英語 | 歴史 | 小計 | 平均点 | 備考 |
|---|---|---|---|---|---|---|---|
| 平均点 | 54点 | 56点 | 60点 | 41点 | 210点 | 52.5点 | − |
| 田中さん | 60点 | 65点 | 73点 | 40点 | 238点 | 59.5点 | 追試 |
| 鈴木さん | 84点 | 46点 | 90点 | 68点 | 288点 | 72点 | 合格 |
| 中村さん | 48点 | 82点 | 55点 | 50点 | 235点 | 58.8点 | 追試 |
| ばんばん | 24点 | 30点 | 25点 | 5点 | 79点 | 19.8点 | 落第 |
| 氏名 | 見出しセルに「受験者」という概要を設定し scope属性によって、このセルの 下側のグループと関連付けています。 つまり、この列のセルには「氏名」という見出しと関連付けられます。ただ し、グループ化されていない場合には、単に col とします。 ■ 〜 フッタとなる横方向のセルをグループ化しています。この tfoot要素は、必ず thead要素の直後、tbody要素の直前で設定しなければなりません。 ■平均点 | このセルに識別子を設定しています。この識別子は他のセルの、headsers属性 で関連付けるものです。アクセシビリティの一環として設定しています。 scope属性の rowgroup という値は グループ化された横方向にあるセルと関 連付けるために指定しています。 グループ化されていない横方向のセルと関連付ける場合には、row と指定し ます。 ■54点 | このセルが、id属性で指定された識別子を持つ見出しセルと関連付けるために headers属性でその識別子を指定しています。 ここでは、id属性の値が average という識別子を持つ見出しと関連付けてい ます。この指定は、一般的に音声、あるいは点字ブラウザに配慮するために利 用されるものです。 ■ 〜 この要素で囲まれた範囲がテーブルのデータセル本体となります。HTMLの仕様 書では、テーブルを定義した場合、必ず tbody要素で囲まなければなりません。 ただし、thead、tfoot要素が指定されていない場合には、省略することが可 能となっています。その場合には Webブラウザが tbody要素を補完します。 以下省略 ◆まとめ テーブルをメールマガジンのようなテキスト中心で解説するには、ある程度の 限界があります。より理解を得るため、「今週のおさらい」ではサンプルと図解 で説明していますので参照してください。 テーブルをレイアウトに用いる方法については解説しませんでしたが、アクセ シビリティを考えると、別の方法で再現することをお勧めします。 「別の方法」については、講座を進める中で別途解説したいと思います。 次回は、文書型定義の不思議について説明する予定です。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆CSS講座（第８回） 余白（margin） 今回は、各要素で設定することが可能な「余白」について詳しく解説します。 ここで示す「余白」とは、要素の外側にある「何も表示されない領域」を指しま す。何も表示されないということは、背景色やテキストなどさえもその領域では 無視されるということです。 スタイルシートでは、こうした余白を「margin：マージン」という属性によっ て自由に設定することができます。 ■余白のコントロール 例えば、段落を示す p要素の場合、一般的な視覚系ブラウザでは、上下に１文 字分の空白をもって表現されます。見出しやリストなどのブロックレベル要素 では、このようにブラウザ側で余白を持たせています。 コンテンツを表現するとき、時にはこうした余白が必要ない場合があります。 そんなときにスタイルシートで、余白の有無や幅、高さを自由にアレンジする ことができれば、レイアウトデザインの自由度が広がります。 ■余白の設定 余白 (margin) は、要素の上下左右に設定することができます。margin属性は それぞれ個別に指定する方法と、まとめて設定する方法があります。 なお、余白を指定する「単位」は、当マガジン「第84号」で詳しく説明して いますので、そちらを参照してください。 □個別に余白を設定する margin-top 要素の上側の余白を設定する margin-left 要素の左側の余白を設定する margin-right 要素の右側の余白を設定する margin-bottom 要素の下側の余白を設定する 書式： p { margin-top: 0; margin-bottom: 2em } この設定は、段落の上側の余白を無し、下側の余白を２文字分です。 □まとめて余白を設定する margin: 単位 要素の上下左右を一括して余白を設定する margin: 単位 単位 要素の上下、左右の順で余白を設定する margin: 単位 単位 単位 要素の上、左右、下の順で余白を設定する margin: 単位 単位 単位 単位 要素の上、右、下、左の順で余白を設定する （この指定の場合、Mac版 MSIEでは正しく表現されない場合があります。） 書式： p { margin: 1ex 5% 1em } この設定は、段落の上側に x の文字の高さ分を、左右に ５％分を、そし て、下側に１文字分の余白を設定しています。 ■余白の効用 余白を自在にコンとルールすることにより、コンテンツの表現は飛躍的に洗練 されてきます。余白によって、コンテンツの位置まで設定できることさえ可能 になります。 視覚系ブラウザでレンダリングされるレイアウトデザインを設計するとき、 余白は非常に重要な位置をしめています。HTMLのタグだけでは、余白をコント ロールすることができません。 次回は、コンテンツの「内側の余白」について解説します。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆Tips --- body要素と margin と背景色の関係 通常、marginは、要素の外側に対して余白を設定するので、その要素に背景色 が設定されていた場合、marginの余白部分には、背景色は適用されません。 ところが、body要素だけは特別で、仮に body要素に marginを設定していて も、余白部分に指定された背景色が適用されます。 例： body { margin: 1em 6%; background: #ffc; color; #000 } このスタイルシートでは、body要素の外側の余白に、上下１文字分、左右に 画面の相対的な比率である６％を設定しています。 本来ならば、その余白には背景色は適用されないのですが、body要素では、 この余白に対しても背景色がレンダリングされてしまいます。いろいろな視覚 系ブラウザで試してみたのですが、ほとんどで同じでした。 body要素に余白を指定した場合には、このような「現象」があるということ を知っておいてください。 □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ◆HTML、XHTML属性の解説 --- enctype属性 フォームのデータを処理するプログラムなどに送信する際の「MIMEタイプ」を 指定します。 ■enctype属性 処理可能なプログラムに MIMEタイプを送信する DTD： すべての文書型定義で利用可能 属性値： MIMEタイプ 記述法：
|---|