Home | 第87号 | 第88号 | 第89号 | 目次

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

Web作成支援

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

＜第88号＞ 今週のおさらい
　　　　　　　　　　　　　 毎週金曜日配信　What's New 2004年3月12日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ JacaScript講座  第17回 --- documentオブジェクト
　　■ CSS講座　第９回 --- 余白 (padding)
◆ JavaScript講座 --- documentオブジェクト
JavaScriptの documentオブジェクトは、画面上に表示されているページに関するあらゆる情報 (文字列、画像、フォーム、リンクなど) を扱います。
■ documentオブジェクトのメソッド
JavaScriptで利用する documentオブジェクトのメソッドは、複雑なプログラムを作成することなく Webページに情報を出力させる「命令」で、以下のとおり定義されています。
documentオブジェクトのメソッド一覧
メソッド 機能
clear 表示中のドキュメント内容を消去する
close 表示ストリーム (openで開始したドキュメントの出力) を閉じる
open 表示ストリーム (ドキュメントの出力) を開始する
write ページに指定した文字列を表示する
writeln ページに指定した文字列を表示して改行する
例えば、wrireメソッドは、その内容を Webブラウザに出力します。
document.write("初心者のためのホームページ作り");
document.write("<img src='logo.gif' width='460' height='60'>");
このスクリプトの実行結果は、
このメソッドを利用する場合、「出力させる文字列」には必ず引用符で囲んでください。また、文字列の中に引用符が含まれる場合は、異なる引用符を使ってください。引用符にはダブルコート「 " 」とシングルコート「 ' 」がありますので、その対応に注意しながら記述しなければなりません。
■ documentオブジェクトのプロパティ
documentオブジェクトのプロパティは、現在表示されているページに関する情報を扱うために、予め定義されている属性です。
documentオブジェクトのプロパティ一覧
プロパティ 説明
alinkColor 読み込まれたリンクの文字色を参照、または設定する
anchors 現在表示されている全アンカーの内容を持つオブジェクトの配列
bgColor 背景色を参照、または設定する
cookie ちょっとした情報を入れるための文字列型のオブジェクトを参照
domain ドメイン名を返す
fgColor 文字色を参照、または設定する
forms 現在表示されている全フォームの内容を持つオブジェクトの配列
lastModified 現在表示されているページの最終更新日を参照する
linkColor リンクの文字色を参照、または設定する
links 現在表示されている全アンカーの内容を持つオブジェクトの配列
location 現在表示されているドキュメントの URLを参照、または設定する
referrer 移動先の呼び出した URLを参照する
title ページのタイトルを参照、または設定する
vlinkColor 訪問済みのリンクの文字色を参照、または設定する
これらのプロパティのいくつかを試用したサンプルは以下のとおりです。
document.write("現在のリンクの文字色は、", document.alinkColor);
document.write("最新更新日は、", document.lastModified);
document.write("現在のアンカー数は、", document.anchors.length);
document.write("現在のリンク数は、", document.links.length);
document.write("直前の URL は、", document.document.referre);
document.write("現在のドメインは、", document.domain);
このスクリプトの実行結果は、
説明したとおり、documentオブジェクトは、ページの情報を操作したり、参照したりする機能を持っています。いろいろと組み合わせることで、思いがけない効果を発揮することがあります。
次回の JavaScript講座では、locationオブジェクトを取り上げる予定です。
PageTop
◆ CSS講座 --- padding
前回説明したとおり、コンテンツの外側に置く margin (マージン) という余白に対して、padding (パディング) は、コンテンツの内側の余白として設定するものです。
margin と大きく異なる点は、padding はコンテンツの一部分であるということです。以下の図は、margin と padding について、その相違を示したものです。
margin と padding を表示した図
緑色の矢印部分が margin で、コンテンツの外側の余白になります。対して、赤色の矢印部分が padding で、コンテンツの一部としてレンダリングします。
コンテンツに背景色を指定した場合には、padding 部分にも背景色が適用されます。margin には適用されません。
ただし、body要素に関しては、margin にも背景色が適用されます。
■ 個別に paddingを設定する
CSS では、上下左右における padding の設定を個別に指定することができます。
それぞれに padding を指定する場合の単位は、スタイルシートで利用できる単位となります。詳しくは「第84号」で説明した スタイルシートで扱う単位 を参照してください。
具体的な書式は、
  p { padding-left:    1em;
      padding-right: 1.5em }
■ paddingを一括設定する
上下左右の padding を一括で設定する方法もあります。この方法では、指定する単位の数によって padding を設定する位置が異なりますので注意してください。
各単位は半角スペースで区切って設定します。具体的な書式は、
  h1 { padding: 0 5% 1em 5% }
  p  { padding: 1em 5% }
この設定方法を利用した場合、Macintosh版 MSIE では、レンダリングに不具合が発生することがあります。残念ながら、Macintosh版 MSIE は、マイクロソフト社が今後のサポートと開発を打ち切ると発表しています。
This page is Valid HTML 4.01! 初版公開日 2004年3月12日
Copyright（C） 2002-2004 banban@scollabo.com