毎週金曜日配信 What's New 2003/4/25
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第49号＞
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
等福フォントに関しては、「まぐまぐ」の http://www.mag2.com/faq/mua.htm
を参考にしてください。
今週のコンテンツ
■ ホームページ作りの基本 その４ --- 著作権
■ XHTML講座 その12 --- 浮遊コンテンツの作成
■ HTML タグの解説 --- p要素
■ WebMasterへの道 第３回
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆お知らせ
当メールマガジンを新たに購読された方がたくさんおります。そのため、記述
内容が、過去の記事と重複する箇所がいくつかあります。
あわせて次回より、新規読者のためにも、HTML講座の「第１回」を違う視点で
シリーズとして解説していくことを予定しています。
復習という感覚でお読みいただければ幸いです。
また既存の読者には、Webサイト設計に当たって「Webデザイン」の講座を予定
しています。ご期待ください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆ホームページ作りの基本 --- リンクと著作権
つい最近、新聞社のサイトに掲載されたニュースを、ページの中でリンクして
紹介する個人ベースの「ニュースサイト」関連で問題が起こっています。
ある新聞社が、個人ニュースサイトの運営者に「記事ページへの直接リンクは
著作権侵害である」と主張し、リンクをやめるように要求してきたことがきっか
けです。
考えてみれば、個人が独自にニュースを集めることは不可能ではありませんが
限りなく不可能に近いことです。
ページの中で、個別の他サイトへのページに直接リンクすることを「ディープ
リンク」と呼びます。このメールマガジンや Webサイトでも活用しています。
基本的にリンク自体には著作権の侵害するという行為には当たりません。リン
クされる文書は、すでにインターネットで公に発表されているものであり、閲覧
制限がかかっていなければ、誰もが自由に見ることができるわけです。
また、リンク自体がリンク先の文書を複製や引用していることがなければ、さ
して問題になるようなことはないと考えられます。
その意味では、新聞社が記事のページに直接リンクするのは著作権侵害と主張
するのはやや無理があります。
■フレームにおけるリンク
問題になるのは、フレームを利用して自分のフレームのウィンドウ内にリンク
先を表示するのは、著作権の侵害に触れます。
訪れたユーザ側から見ると、あたかも自分のサイト内にあるページと勘違い
されてしまいます。アメリカでは、フレーム内のウィンドウに表示したニュー
ス記事について訴訟問題となり、訴えた新聞社が勝訴しています。多分法外な
賠償金を取られてしまったと推測されます。
フレーム内から他のページにリンクする場合は、target属性の値に気をつけ
ましょう。
■引用と盗用
記事の引用は大変難しい判断が求められます。どこまでが引用という定義はあ
りませんが、なるべく自分の言葉で記述し、引用先を明記するのは当たり前の
マナーというものです。
引用先をまるっきりそのままでは、盗用になります。明らかに著作権の侵害
となりますので、十分注意する必要があります。
■リンクする場合のマナー
ページ内で、他のサイトへリンクする場合、リンク先の正式な名前や URLをき
ちんと表示するように心がけましょう。サイトの要点などをまとめておくと、
好感が持たれます。単に「ここ」というのは、失礼になります。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML講座 --- 浮遊コンテンツの作成
ブロックレベル要素（注１）とは前後に改行を持った１つの「区切り」を意味
し、要素の種類によっては、文書構造（注１）を示すものもあります。
つまり、改行を持っているので、横に並べることができません。
XHTMLコーディングによって、ブロックレベル要素を横に並べる方法は、今の
ところテーブルだけです。これ以外に方法はありません。
しかし、スタイルシートでは、ブロックレベル要素をフローティング（浮遊）
させることで、２つ、あるいは３つという具合にブロックレベル要素を横に並べ
ることが可能です。もちろん、インラインレベル要素（注２）でも同じ表現が可
能です。
今回は、フローティングを利用して、ブロックレベル要素中で表されるコンテ
ンツの表現について解説します。
■注釈用語解説
（注１）ブロックレベル要素、文書構造
基本的に要素の前後に改行を持っています。文書構造とは、ここが見出し、
ここが段落で、ここがリスト、というように、文書が持つ内容の構造を示す
ものです。ブラウザによっては、前後の１行分の余白をもって表示するもの
もあります。
XHTML1.1におけるブロックレベル要素は、以下の通りです。
address、blockquote、dir、div、dl、fieldset、form、h1〜h6、
hr、isindex、ol、p、pre、table、ul
（注２）インラインレベル要素
普通の文字列と同じ扱いで、前後に空白や改行を持っておりません。ただし
インラインレベル要素は、必ずブロックレベル要素の中で使われなければな
りません。
XHTML1.1におけるインラインレベル要素は、以下の通りです。
a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、
i、img、input、kbd、label、map、object、q、samp、select、small、
span、strike、strong、sub、sup、textarea、tt、var
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆フローティング
フローティング（浮遊）とは、回り込みなどに利用される手法です。回り込みと
は、例えば下の図のように、画像の回りにテキストを配置したりします。
┏━━━━━━━━━━━━┓ このように画像の右側にテキストを配置して
┃ ┃ 回りこみを表現します。
┃ 画像 ┃ HTMLでは img要素の属性に alignを利用する
┃ ┃ ことがよく使われていますが XHTMLでは、残
┗━━━━━━━━━━━━┛ 念ながら、その属性は使えません。
HTMLでの構文は、非推奨ながら以下の通りです。
<img src="samp.jpg" width="80" height="50" alt="sample" align="left">
この構文は、画像を左に配置して、テキストなどの他のコンテンツを右側に
回りこませるもので、画像が「浮遊」しているように見えます。
今回はスタイルシートを利用して、このような回り込みを実現させます。画像
だけでなく、様々な要素で用いることができます。
前回、テーブルによるレイアウトの表現を解説しましたが、今回はこのフロー
ティングを利用することで、テーブルと同じ表現を作成します。
テーブルで構成するよりも体感的に速く表示できることができます。大きな特
徴として、ブロックレベル要素をフローティングさせて、横に複数並べることが
できます。
繰り返しますが、インラインレベルとは通常の文字列と同じで、前後に改行や
余白は持っていません。また、インラインレベル要素は必ずブロックレベル要素
の中で配置しなければなりません。
初心者が犯しやすいミスなので、必ず覚えておきましょう。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆スタイルシートによるフローティング
スタイルシートの設定は簡単です。例えば見出し要素に設定する場合、
h1 { float: left } たったこれだけで見出し要素を浮遊させることができます。
なお、float属性の値は left、rightの２つだけです。
見出し要素に簡単なフローティングを施した実験（h1要素を横に３つ並べた）
http://www.scollabo.com/banban/magazine/sample/mmsample_095.html
実は、本誌 Webサイトのトップページを２週間前に大幅に（？）更新しました
が、このフローティングという手法を用い、テーブルを使わずに、テーブルと同
じような表現をさせています。
今後の新しい手法として、フローティングによるレイアウトの表現が主流にな
りそうな、そんな予感がします。
なお XHTMLでは文書の中にスタイルシートを直接記述することができません。
つまり、非XHTMLデータであるスタイルシートの記述ができません。
これは XHTMLが XMLに分類されているためです。そのため、スタイルシート文
書を作成し、外部に置いて読み込ませる必要があります。
（詳しくは、本誌第35号をお読みください。）
http://www.scollabo.com/banban/magazine/magazine_035.html
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML作成
上記のスタイルシートの設定を踏まえて、フローティングによる表現を作成し
ます。先週のテーブルのレイアウト表現で用いたコンテンツを利用して、テーブ
ルで作ったページと比較してみましょう。
なお、XHTML1.1では、タグや属性はすべて小文字で記述しなければなりません。
テキストエディタ（メモ帳、SimpleTextなど）を起動して以下のようにタイプ
してください。XHTML文書とスタイルシート（CSS文書）の２つを作成します。
■XHTML
<?xml version="1.0" encoding="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- 改行せずに -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="float.css" /">
<title>フローティング</title>
</head>
<body>
<h1>Banban's Online School</h1>
<p id="memo">
Webサイト構築に関わる総合学習を開催しており、新たに４月生の募集を
行っております。当校では、下記の講座を専任の講師によって実施しています。
皆様のご参加を心よりお待ちしています。
</p>
<div class="floatBlock">
<div class="item">
<dl title="初心者コースのご案内">
<dt>■ 初級コース</dt>
<dd>SGMLとHTML</dd>
<dd>WWWの歴史とW3C</dd>
<dd>HTMLと文書構造</dd>
<dd>文書型定義の基本</dd>
<dd>HTMLの作法</dd>
<dd>ページ作成の実践</dd>
<dd>サーバとファイル転送</dd>
</dl>
<dl title="中級者コースのご案内">
<dt>■ 中級者コース</dt>
<dd>ユーザビリティ</dd>
<dd>アクセシビリティ</dd>
<dd>スタイルシート</dd>
<dd>厳格仕様HTMLの作成</dd>
</dl>
<dl title="上級者コースのご案内">
<dt>■ 上級者コース</dt>
<dd>HTMLとXHTML</dd>
<dd>XHTMLの基本</dd>
<dd>XHTMLの作成</dd>
</dl>
</div>
</div>
<div id="mainBlock">
<div class="item">
<h2>特別講座：<span>WebMaster</span>への道</h2>
<hr />
<p>
ホームページ作りから一歩先に進んだ講座を開催します。ネットワークの
基礎知識、Webサーバの構築、Webデザインと運用の知識など、Webサイトを
維持・管理するための WebMasterとして身につける基本的講座です。</p>
<hr />
<p><em>■ ネットワークの基本講座</em>
HTTPを始めとするネットワーク・プロトコル、ファイヤーウォールなどの
セキュリティの基本、Webサーバの構築などの講座を予定しています。</p>
<hr />
<p><em>＜ご注意＞</em>
当講座は定員制ですので、お早めにお申し込みください。
定員になり次第締め切らせていただきます。</p>
</div>
</div>
<div class="floatBlock">
<div class="item">
<dl title="JavaScript入門">
<dt>■ JavaScript講座</dt>
<dd>JavaScript言語仕様</dd>
<dd>オブジェクトを使う</dd>
<dd>命令文の基本</dd>
<dd>関数の作成</dd>
<dd>JavaScriptの作法</dd>
</dl>
<dl title="CGI講座のご案内">
<dt>■ CGI講座</dt>
<dd>HTMLとWebサーバ</dd>
<dd>CGIとPerl言語</dd>
<dd>CGIプログラム入門</dd>
<dd>PHPプログラム入門</dd>
</dl>
<dl title="XML講座">
<dt>■ XML講座</dt>
<dd>SGMLとXML</dd>
<dd>XMLの基本</dd>
<dd>XMLとXSLT</dd>
<dd>データベースとXML</dd>
</dl>
</div>
</div>
</body>
</html>
入力が終わりましたら敵当な名前をつけて保存してください。保存の際には、
必ずファイル名に続いて 「.html」という拡張子をつけてください。これに
よって Webページ用文書として保存されます。
なお、XHTML文書の本来の拡張子は 「.xhtml」です。ただしこの拡張子を使
用した場合、ブラウザによっては正しく表示されない場合があります。古いブ
ラウザとの互換性を保つためにも拡張子は「.html」としてください。
■スタイルシート（float.css）
入力の際には、コロン「：」と、セミコロン「；」を間違えないようにしてく
ださい。
@charset "Shift_Jis";
div.floatBlock {
margin-top: 0px;
padding: 1em 0.5em;
background-color: #ffc;
float: left;
width: 26% }
div#mainBlock {
margin-top: 0px;
padding: 1em 0.5em;
float: left;
width: 47% }
div.item {
margin: 0; padding: 1em 0.5em }
h1 {
margin: 0.5em 0;
color: #fff;
padding: 5px;
font-family: impact,sanserif;
font-style: italic;
background-color: #900;
text-indent: 2em }
h2 {
font-size: 1.2em;
color: #069;
text-align: center }
dt {
font-weight: bold
}
dt:first-letter {
color: #06f
}
dd {
margin: 3px;
padding: 2px 0.5em;
border: 2px dotted #06f
}
span {
color: #f00
}
em {
display: block;
font-style: normal;
color: #f00;
font-weight: bold
}
p#memo {
margin: 0px;
padding: 0 1em 1em;
border-bottom: 1px solid #000
}
入力が終わりましたら 「float」という名のスタイルシート文書として保存し
ます。先ほどの XHTML文書と同じフォルダに保存してください。
保存の際には拡張子は「.css」を、ファイル名に続けて必ずタイプしてくだ
さい。拡張子を忘れるとスタイルシート文書になりません。
実行結果
http://www.scollabo.com/banban/magazine/sample/mmsample_096.html
先週のテーブルで表現したページと見比べてください。
http://www.scollabo.com/banban/magazine/sample/mmsample_094.html
■ご注意
XHTML構文には、メールマガジンの見やすさから多数の空白スペース利用して
インデント（字下げ）を挿入しています。
もし、構文をコピーして利用する場合には、すべてのスペースを削除してから
お使いください。不用意な空白はブラウザ上での表現に多大な影響を及ぼします。
なお、スタイルシートでは半角スペースで記述していますので、問題になるこ
とはないと思います。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆解説
■XHTMLから
XHTMLは、基本的にすべての要素、属性については小文字で記述しなければな
りません。大文字の記述は認められておりませんので、注意してください。
<?xml version="1.0" encoding="Shift_Jis"?>
XML宣言です。基本的に XHTMLは XMLのサブセットのため、XML宣言の記述を強
く求められています。必須ではありませんが、使用する文字符号が UTF-8、あ
るいは、UTF-16以外では宣言するようにしましょう。
（ただし XML宣言をした場合、MSIEでは互換モードとなり、フォントの大きさ
などに影響が出ます。MSIEのバグ？）
なお、文字コードの指定には大文字小文字の区別はありません。SHIFT_JIS
でも、shift_jis でも、Shift_Jis でもかまいません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTMLの文書型定義の宣言です。XHTMLに限らず、HTMLでも文書の冒頭で使用す
るタグセット（タグの集）がどのバージョンであるかを明示的に宣言しなけれ
ばなりません。省略することができませんので、必ず記述します。
なお、この構文は改行なしで記述してください。メールマガジンの横幅に制
限があるために、改行して表現していますが、本来は１行で記述します。
この構文は宣言であり、タグを表わすものではありません。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
名前空間を指定します。名前空間については本誌第35号を参照してください。
使用するタグの意味がある場所を指定します。XHTMLが、XML文書の一部である
ことが、この構文でも現れています。
xml:lang属性は、言語コードを示すものです。HTMLでは、lang属性でしたが
XHTMLでは、接頭辞に xml: と記述します。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
文書情報をHTTPサーバ、あるいはブラウザに伝えるために記述で、文書のMIME
タイプがテキストで記述されたHTML形式で、その文字符号がシフト_JIS形式で
記述されたことを示しています。
基本的に XML宣言で記述したものと同じ文字符号コードを指定します。なお
meta要素は空要素なので XHTMLでは行末にスラッシュを記述しなければなりま
せん。
<meta http-equiv="Content-Style-Type" content="text/css" />
文書がスタイルシートを利用していることを示します。スタイルシートを利用
する場合には、必須の記述形式です。
<link rel="stylesheet" type="text/css" href="table.css" />
外部にあるスタイルシートをこの文書に読み込ませる記述です。ここでは同位
フォルダに table.cssという名のスタイルシート文書を読み込んでいます。
<h1>Banban's Online School</h1>
第一見出しを設定しています。見出しは基本的に「第一」から記述しなければ
なりません。いきなり「第二：h2」や「第：h3」を配置してはいけません。
<p id="memo"> 〜 </p>
段落をあらわしています。id="memo" とは、スタイルシートの p#memo を読み
込む識別子です。
idとは、他の分類や識別を明確に区別するもので、同一文書の中で同じ構文
は一度しか使えません。本来、同じ id が何回も登場すること自体がおかしい
わけです。
<div class="floatBlock"> 〜 </div>
汎用ブロックレベル要素をあらわしています。class="floatBlock"とは、スタ
イルシートの p.floatBlock を読み込む分類子です。
classとは、同じ構文を何度でも利用できる分類子で、スタイルシートの（.）
がついたものを読み込みます。
id識別子と違うのは、同一文書で何度の利用できる点にあります。この構文
は、もう一度使われます。そのためにクラス（分類子）としました。
詳しくはこちらに（id属性とクラス属性）
http://www.scollabo.com/banban/faq/faq.html#b-2
<dl title="初心者コースのご案内"> 〜 </dl>
dl要素とは、定義リストを意味するもので、この要素の中に、dt、dd要素を配
置して、見出し付き箇条書きリストを構成するブロックレベル要素です。
title属性は、リストが何を現すのかを説明し、一般的な視覚系ブラウザでは
ツールチップが表示されます。
この記述は任意ですので、必ずというわけではありませんが、非視覚系ブラ
ウザへの案内（ナビゲーション）の意味から、記述しておくと親切になります。
<dt>■ 初級コース</dt>
定義リストの定義する用語を示す、いわば見出しの部分になる要素です。
この要素は、dl要素内で使われるもので、単独で利用することができません。
<dd>SGMLとHTML</dd>
定義済みリストの補足説明を受け持つ要素で、この中には他のブロックレベル
要素を配置知ることが出来ます。
この要素は基本的に、dl要素内の、dt要素直後で使われるもので、単独で使
うことができません。
この要素は、一般的な視覚系ブラウザでは、数文字分のインデント（字下げ）
を持って表示されます。
<div id="mainBlock">
汎用ブロックレベル要素に、スタイルシート 「div#mainBlock」を読み込ませ
ています。このブロックは、１度だけ登場しますので、id属性を使っています。
<h2>特別講座：<span>WebMaster</span>への道</h2>
第２見出し要素をあらわしています。span要素はインラインレベル要素で、こ
れ自体では何もしませんが、スタイルシートによって表現を表しています。
インラインレベル要素とは、文字列と同等の働きがあり、前後に改行や余白
を持つことはありません。
<hr />
罫線をあらわすブロックレベル要素です。この要素は空（エンプティ）要素な
ので、XHTMLでは行末にスラッシュを記述しなければなりません。
<em>■ ネットワークの基本講座</em>
em要素とは、文字を強調するインラインレベル要素です。一般的な視覚系ブラ
ウザでは、斜体で表示されますが、ここではスタイルシートによって普通の字
体になっています。
以下、同文。
■スタイルシート文書（float.css）から
@charset "Shift_Jis";
スタイルシートを記述した文字コードを示し、ブラウザに伝えます。
ただし XHTML文書と同じ文字コードの場合には、省略可能です。
h1 { margin: 0.5em 0; color: #fff; padding: 5px; font-family: impact;
font-style: italic; background-color: #900; text-indent: 2em }
第１見出し要素の左右の余白を０、上下の余白を半文字分とし、コンテンツ内
の余白は上下左右５ピクセルも足せました。
フォントの種類を Impact というフォントにしています。このフォントは、
Windows、Macintoshともに共通したフォントですが、もしこのフォントを持っ
ていない環境では無視され、通常使われているフォント種になります。
文字は斜体、背景色をマルーン（茶系色）、文字色は白、文字位置は左側か
ら２文字分インデント（字下げ）しています。
margin: 0.5em 0 この記述は上下の余白は１文字の半分、左右が０です。
つまり、
属性値が２つの場合には、最初が上下、２番目が左右となります。
属性値が１つの場合は、上下左右を一括で設定します。
属性値が３つの場合は、上、左右、下の順で設定します。
属性値が４つの場合は、上、右、下、左の順で設定します。
なお、この設定は、padding属性でも同様となります。
div.floatBlock { margin-top: 0px; padding: 1em 0.5em;
background-color: #ffc; float: left; width: 26% }
今回のハイライト部分です。汎用ブロックレベルに設定しています。上側のコ
ンテンツの外側の余白をなし、コンテンツの内側の余白は、上下に１文字分、
左右に半文字分設定しています。（コンテンツの内側なので、この部分には背
景色が表示されます。）
背景色は薄いクリーム色、横幅はブラウザの26％としています。またフロー
ティングの位置は左側です。このブロックの右側に別のコンテンツが配置され
ます。
クラス属性にした理由は、このスタイルをもう一度利用しているためです。
横幅の設定にパーセント（％）を用いた理由は、相対値であるためです。つ
まり、ユーザの画面の割合で設定するものです。もしこの単位に絶対値のピク
セルを使うと、ユーザの画面によっては、不意な横スクロールが発生したり、
妙に左に片寄った表示になってしまいます。
div.item { margin: 0; padding: 1em 0.5em }
入れ子にした汎用ブロックレベル要素で、コンテンツの外側の余白はなし、背
景色を含むコンテンツの内側の余白を、上下に１文字分、左右に半文字分を設
定しました。
実は、これがミソで、フローティングを施したブロックにこの設定をすると
ブラウザによっては、ブロックが改行してしまうのを防ぐ役目があります。
div#mainBlock { margin-top: 0px; padding: 1em 0.5em; float: left;
width: 47% }
これも汎用ブロックレベル要素に設定しています。同様に上側のコンテンツの
外側の余白はなし、コンテンツの内側の余白は、上下に１文字分、左右に半文
字分としています。
ブロックの横幅をブラウザ画面の46％、フローティングは左側に配置してい
ます。これによって、このブロックの右側に他のコンテンツが配置されます。
このスタイルは id属性のため、１度だけの使用となります。
横幅の設定は重要なポイントです。フロートさせるブロックの横幅の合計が
100％になるのを避けています。もし横幅の合計が 100％になった場合、ブラ
ウザによっては、ボックスが改行されてしまう危険があります。
そのため、合計は99％になっていますが、それほど表示にはおかしな感じに
はならないと思います。
dt { font-weight: bold }
定義リストの用語説明に文字を強調させています。
dt:first-letter { color: #06f }
dt要素の最初の文字を青色の設定しています。この設定は「擬似要素」という
特殊なスタイルシート設定です。最新のブラウザでは、この擬似要素をほぼサ
ポートしています。
擬似要素の設定は、単独で設定します。
dd { margin: 3px; padding: 2px 0.5em; border: 2px dotted #06f }
定義リストの補足説明をする要素の余白の設定です。デフォルトでは、数文字
分のインデントがあるので、意識的に設定しています。
この要素の全体の余白を上下左右とも３ピクセル分、コンテンツの内側の上
下に２ピクセル、左右に半文字分の余白を設定しました。
また、この要素を囲む枠線は、青色の破線としました。
span { color: #f00 }
インラインレベル要素を設定しています。span要素はそれ自体では何もしませ
ん。この要素の利用のほとんどがスタイルシートによるものです。
ここでは、テキストの文字色を赤色に設定しています。この要素に囲まれた
範囲のテキストが赤色に変わります。
em { display: block; font-style: normal; color: #f00; font-weight: bold }
文字強調を意味するインラインレベル要素をブロックレベル要素として設定し
ています。そのため、この要素の直後は改行します。
一般的な視覚系ブラウザのデフォルトは斜体で表示しますが、ここでは普通
の字体に設定しています。色を赤、文字を強調（太字）にしています。
p#memo { margin: 0px; padding: 0 1em 1em; border-bottom: 1px solid #000 }
段落を示す要素で、コンテンツの外側の余白をなし、コンテンツの内側の余白
は、上側はなし、下側と左右に１文字分とし、さらに下側には１ピクセルの太
さを持った黒色の枠線を設定しました。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆フローティングを解除する
フローティングを設定した場合、コンテンツは常にフロートしているコンテン
ツに回り込もうとします。例えば、上記 XHTMLの構文で、最後の行に段落やボッ
クスを記述した場合、とても妙な表示になってしまいます。
妙な表示
http://www.scollabo.com/banban/magazine/sample/mmsample_098.html
フローティングを解除しなければならない場面では、以下のスタイルシートを
記述する必要があります。
clear: left (この他に、right、both）
これは、フローティングを解除する設定です。
具体的な記述法
CSS： p#foot { clear: left; text-align: center }
XHTML： <p id="foot">フローティングを解除しました。</p>
フローティングを解除した表示
http://www.scollabo.com/banban/magazine/sample/mmsample_099.html
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 --- p要素
段落をあらわす要素で、語源はパラグラフ（Paragraph＝段落）です。
要素分類：ブロックレベル要素
DTD仕様 ：HTML4.01Strict
終了タグ：省略可能（ただし、XHTMLは省略不可となっています。）
属性 ：align（非推奨）、汎用属性（id、class、title、lang）
属性値 ：align="位置" （left、right、center）
子要素として持てる要素：インラインレベル要素のみ
一般的な視覚系ブラウザでは、要素の前後に１行分の余白を持って表示させる
ことがあります。
一昔前には、この特性を利用して「けつぴー」といって、</p>だけを記述し、
求める余白を表示させることがありました。しかし、これは明らかに文法違反で
あり、ブラウザは無視しなくてはならないのですが、未だにこれを使っているサ
イトがあり、幸か不幸か、一部のブラウザでは余白を持って表示してしまいます。
また、空白の段落 <p> </p> と記述しても同じ結果になりますが、これも明確
な文法違反です。ちょっと前まであの W3Cのトップページでも使っていました。
この要素は、文書構造の中で「段落」を示す重要な役割があります。正しい使
い方を求められる要素でもあります。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Web Masterへの道 第３回
今回は、皆さんが Web Master を目指すための心得を、私なりに経験して得た
ものをいくつかご紹介します。あくまでも独断と偏見に満ちた内容です。
■WebMasterの心得
１．何事にも強い好奇心を持つ
２．「為せば成る」と、自分を信じる
３．Webのマナーを身につける
４．アイデアはノートに取る
５．情報には貪欲になる
▼何事にも強い好奇心を持つ
街を見渡すと大小の看板が目に付きます。ポスターや店頭のウィンドウ・ディ
スプレィもあるでしょう。お店の中にもそれぞれ独特の雰囲気があります。
それらを観察することによって感性を磨き、デザインのヒントにつながるか
もしれません。
新聞や雑誌のレイアウトや構成、テレビコマーシャル、電化製品、自動車、
家具、文房具などにもデザインがあります。じっと見つめるだけで何かが浮か
ぶかもしれません。目に写るあらゆるものに好奇心を持つことは、優れたデザ
イナー能力を身につけるうえで、大切なことです。
デザインには必ず理由があります。その理由探しをすることでも、自分自身
のスキルアップに貢献してくれるハズです。
▼「為せば成る」と、自分を信じる
いろいろな面で WebMasterに知識や技術を求められることがあります。ネット
ワークの技術的な知識を習得するだけでも大変なことです。
新たな分野に挑戦することは苦痛を覚えることがあります。しかし、それを
習得したときの喜びは格別です。焦らず少しずつ、しかし目標を持って確実に
自分のものにするまで諦めずにがんばりましょう。
覚えてくると楽しいものです。楽しいとまた覚えたくなります。その繰り返
しの中で、自分自身の能力が向上したことを、はっきりと自覚するハズです。
「継続は力なり」という言葉があるように、途中で投げ出さず、最後までやり
抜く努力を惜しまないことが大切です。
「言語」や「技術」の習得に不可能はありません。必ず習得できます。自分
の能力を信じて、楽しく学ぶように心がけましょう。失敗した数だけ成長があ
ります。
▼Webのマナーを身につける
「マナー」とか「作法」というのは、人間関係を円滑に作り上げる１種の潤滑
油的な役割があります。これによって無意味な争いごとから解放されるわけで
す。しかし、実は簡単なようで、なかなか身につかないのも人間のある種の悲
しさなのでしょう。
でも、自分が嫌がることは、相手も嫌がるものです。
Webの世界にもマナーは歴然としてあります。「Webで？」といかぶるかも知
れませんが、例えば、あなたのメールボックスに10MBのファイルが送られてき
たらどうでしょう？最悪の場合、メールボックスが壊れます。
Web上のマナーをネチケット（ネット上のエチケット）と呼ばれます。多分、
皆さんも一度は聞いたことがある言葉だと思います。
・第三者への誹謗・中傷は絶対にしない
・差別用語を慎む（身体障害者→かたわ、盲人→めくら、など）
・著作権を尊重し第三者のコンテンツを盗用しない
・相手の通信環境を考慮する
Web制作上、これだけは常に意識しておく必要があります。Webは、時には非
常に強い力を持ち、暴力と同じ結果を生む場合があります。
ホームページ作りをしていると、どうしても主観的で自己満足に陥ってしま
う危険があります。見た目ばかりを意識しすぎて、肝心のコンテンツがお粗末
になってしまう場合もあります。家族や親しい友人などに見てもらって、意見
を求めるようにするといいでしょう。
▼アイデアはノートに取る
デザインやコンテンツのアイデアは、いくら頭をひねってもなかなか出るもの
ではありません。
あるとき、瞬間的にひらめくアイデアは、時間が経つと忘れてしまう場合が
多々あります。（私の場合、忘れてしまったものを取り戻せません。）
私の知り合いで超有名企業の社長さんは、常に小さなノートを持ち歩き、夜
寝ているときにさえ、夢に出てきたアイデアを書き留めるという習性の持ち主
で、そのアイデアから製品化し大ヒットを飛ばしたことが何度もあります。
そのノートを見せてもらいましたが、文字だけでなく絵や図がびっしりと書
き込んでありました。
ひらめいたアイデアは、即刻ノートに書き取っておくと便利です。あとで冷
静になってそのアイデアを検証することで、さらにアイデアが膨らんできます。
常に「雑記帖」などのノートを用意しておくことをお勧めします。思いつい
たことは雑記帖に、何でも書き留める癖をつけておくといいでしょう。
▼情報には貪欲になる
少なくとも自分のサイトに関する情報には貪欲になりましょう。新聞や雑誌の
記事を切り抜いて分類する、関係する催事や展示会には積極的に参加する、あ
るいは関連する人に会うことも時には必要でしょう。
情報は、黙って何もしないとやって来るものではありません。自らが能動的
に働きかけることによって、面白いように収集できます。
次回より、新たなシリーズとして、皆さんが WebMasterを目指すための講座を
掲載します。ネットワークのことや Webデザイン、HTMLや CGIなど、多岐にわた
って、WebMasterに求められる事柄について解説していきます。ご期待ください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_049.html
次回は、Webデザイン、HTML講座などの第１回目、XHTML講座ではコンテンツの
配置について解説する予定です。
もしかしたら、個人的な理由によってはお休みするかもしれませんが、その際
には改めてご案内いたします。ご了承ください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.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をご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com