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

                  毎週金曜日配信 What's New 2002/11/22
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第28号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題 ■ 枠線の応用
             ■ ホームページに求められるもの --- 更新(Update)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆枠線 --- border
枠線を表示するスタイルシートを利用することにより、様々な表現が可能です。
基本的に枠線は、ほとんどの要素にも適用でき、工夫によって印象的な枠線らし
くない表現をもたらします。
 今回は、その枠線の応用について詳しく解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆枠線の様式を設定する
枠線には直線のほかに、2重線、点線など各種の表示形式があります。上下左右
をまとめて設定します。

  border-style: 枠線の様式

 solid  直線
 double  2重線(破線)
  dotted  点線
 groove  立体的に望んだ感じの線
  ridge    立体的に隆起した感じの線
  inset    立体的に要素ごと望んだ感じの矩形
  outset   立体的に要素ごと隆起した感じの矩形
  none     枠線の非表示(デフォルト値)
 hidden  枠線を表示しない(枠線の領域だけを表示する)
  none     枠線を設定しない

  枠線の様式と位置を指定する
 border-top-style      要素の上側の枠線の様式を設定する
  border-bottom-style   要素の下側の枠線の様式
 border-left-style     要素の左側の枠線の様式
 border-right-style    要素の右側の枠線の様式
 border-style          要素の上下左右の枠線の様式をまとめて設定する

 参考例: h1 { border-style: dotted }

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆枠線の幅を設定する
枠線の幅の単位は文字の大きさの単位と同じものを使います。

 border-width: 枠線の太さ+単位(あるいは thin、thick、medium )

  単位は 細めの線(thin)、太目の線(thick)、普通の線(medium)、
     ピクセル(px)、ポイント(pt)、ミリ(mm)、パイカ(pc)、
     インチ(in)、Mの大きさ(em)、xの大きさ(ex)、パーセント(%)

 枠線の太さと位置を指定する
 border-top-width      要素の上側の枠線の太さの設定
 border-bottom-width   要素の下側の枠線の太さ
 border-left-width     要素の左側の枠線の太さ
 border-right-width    要素の右側の枠線の太さ
 border-width          要素の上下左右の枠線の太さをまとめて設定

  参考例: h1 { border-bottom-width: 3px }


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆枠線の色を設定する
枠線に色コードを用いて設定します。

 border-color: 色コード

  16進数の色コードに加えてカラーネーム(全16色)も利用できます。
   また、値に transparent と設定すると背景色と同じになります。見た目は表
 示されていないような表現です。
   (Macintosh版 MSIEはサポートしていません。)

 枠線の色と位置を指定する
  border-top-color      要素の上側の枠線の色を設定する
 border-bottom-color   要素の下側の枠線の色
 border-left-color     要素の左側の枠線の色
 border-right-color    要素の右側の枠線の色
 border-color          要素の上下左右の枠線の色をまとめて設定

 参考例: h1 { border-top-color: blue }

 値の数によって、表示される色が変えられます。
 border-color: #f00        要素の上下左右に同じ色の枠線を設定
 border-color: #f00 #00f   要素の上下に赤、左右に青の枠線を個別に設定
 border-color: #f00 #0f0 #00f 
              要素の上に赤、下に青、左右に緑の枠線を個別に
              色を設定
 border-color: #f00 #00f #0f0 #909
                            要素の上に赤、右に青、下に緑、左に紫という順
              に個別に色を設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆枠線をまとめて設定する
いちいち枠線の属性を設定していたのでは、記述も大変です。そこでまとめて要
素に枠線を設定します。

 border: 枠線の幅 枠線の様式 枠線の色(値の順序は指定されていません)

 基本的には3つの値がまとめて設定できます。

 border-top      要素の上側の枠線をまとめて設定
 border-bottom   要素の下側の枠線をまとめて設定
 border-left     要素の左側の枠線をまとめて設定
 border-right    要素の右側の枠線をまとめて設定
 border          要素の上下左右の枠線をまとめて設定

 参考例: h1 { border-bottom: 3px double #090 }
             (各値は半角スペースで区切ります。)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆枠線の応用

■パディングの応用
要素にはマージン(外側の余白)、枠線、パディング(内側の余白)を持たせる
ことが可能です。枠線の設定では、要素と枠線が近すぎて見にくくなる恐れがあ
ります。そこで、パディングをうまく使うことによって、コンテンツが見やすく
なります。

 参考例 h1 { border: 3px double #090; 
               padding: 3px }

  h1要素に3ピクセル分の枠線より内側に余白を設定し、テキストが見やすくな
ります。

■枠線の太さの応用
枠線を太くすることで見出しや段落などに、アクセントを設けます。

 参考例: h1 { border-left: 3em solid #fc0; 
                 border-top: solid #fc0;
                 border-bottom: solid #fc0; 
                 padding: 5px; 
                 color: #fc0 }

 h1要素の左側に3文字分の枠線、上下に1ピクセルの枠線をオレンジ色で表示
 し、見出しのテキストも同じ色を用いました。また各枠線からの余白は5ピク
 セル分取りました。

■テーブルの枠線
テーブルに枠線を設定するには <table border="1"> と設定すればいいのですが
色や幅、枠線の様式はこのままでは不可能です。そこで、データセル(td、th)
とテーブル(table)に、枠線を設定します。

  table,td,th { border: 1px solid #009 }

 枠線がお互いに重なり合って、2ピクセルの枠線が全体に表示されます。

なお、テーブルにおける枠線の色を設定する bordercolor属性は、HTML4.01では
規格外(この属性はブラウザによって表示できない場合がある。)となっている
ので、できるだけスタイルシートを利用するように心がけましょう。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆HTMLの作成
上記の枠線の設定を踏まえて、HTML文を作成します。なお使用する画像は、教材
として提供している写真を使います。(ご自分の画像を使用しても結構です。)

 今回は外部スタイルシートを利用する方法で、HTMLに読み込みます。スタイル
シートは、コロン「:」セミコロン「;」を間違わないようにタイプします。
 テキストエディタを起動して下記のように入力してください。

■外部スタイルシート

h1 { background-color: #cfc;
     border-left: 3em solid #090; 
     border-top: 1px solid #090;
     border-bottom: 1px solid #090; 
     padding: 5px; 
     color: #090;
     text-align: center;
     font-size: x-large }

table { margin-left: auto; 
        margin-right: auto }

td,th { padding-left: 2em; 
        paddin-right: 2em }

th { border-top: 1px solid #009;
     border-bottom: 1px solid #009 }

td { border-bottom: 1px solid #009 }

div { text-align: center }

img { border: 15px inset #f63 }


ここまで入力が終わりましたら、スタイルシートとして保存します。保存場所は
この講座でお使いの「images」フォルダに保存します。未だ「images」フォルダ
がない場合には、作っておいてください。
  ファイル名  border.css と、必ず拡張子「css」を忘れないように注意してく
ださい。これで外部スタイルシートが完成しました。

次に、HTML文書を作成します。同じようにテキストエディタで下記のようにタイ
プしてください。

■HTML文書

<!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">
<title>枠線の表示</title>
<link rel="stylesheet" type="text/css" href="images/border.css">
</head>

<body>
<h1>枠線の表示の応用</h1>
<table cellpadding="3" cellspacing="0" summary="枠線表示のCSS">
<tr><th abbr="CSS説明">borderの設定</th>
    <th abbr="値の説明">枠線表示</th></tr>

<tr><td>border-top</td><td>要素の上側の枠線をまとめて設定</td></tr>
<tr><td>border-bottom</td><td>要素の下側の枠線をまとめて設定</td></tr>
<tr><td>border-left</td><td>要素の左側の枠線をまとめて設定</td></tr>
<tr><td>border-right</td><td>要素の右側の枠線をまとめて設定</td></tr>
<tr><td>border</td><td>要素の上下左右の枠線をまとめて設定</td></tr>
</table>

<div>
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
</div>

</body>
</html>

 入力が終わりましたらHTML文書として保存します。そのためには必ず拡張子を
つけて保存します。ここでは、test_30.html としておきます。「.html」を忘れ
ずに保存してください。なお、保存の際の文書名は任意の名前をつけていただい
ても差し支えありません。

 サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_044.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
■CSSより
h1 { background-color: #cfc; border-left: 3em solid #090; 
     border-top: 1px solid #090; border-bottom: 1px solid #090; 
     padding: 5px; color: #090; font-size: x-large }
  先ほどの枠線の操作で説明したものと同じ設定です。見出し要素の左側に3文
 字分の太さの枠線、上下に1ピクセルの緑色の枠線を配し、文字色も同じ緑色
 に設定しました。また、背景色には薄い緑色とし、文字の大きさは x-largeに
 指定しました。

table { margin-left: auto; margin-right: auto }
 テーブルの左右の余白を自動とし、中央に配置する設定です。なお、文書型宣
 言が、Strict以外ではこのスタイルは反映できません。Transitionalでは中央
 に配置できませんので、ご注意ください。

td,th { padding-left: 2em; paddin-right: 2em }
 データセル、ヘッダセルの左右の内側の余白を2文字分の設定しました。

th { border-top: 1px solid #009; border-bottom: 1px solid #009 }
 ヘッダセルの上下に1ピクセルの青色の枠線を設定しました。

td { border-bottom: 1px solid #009 }
 データセルの下側に1ピクセルの青色の枠線を設定しました。

div { text-align: center }
 汎用ブロックレベル要素内のテキストや画像をセンタリングさせる設定です。

img { border: 15px inset #f63 }
 画像を表示させる置換え要素 imgに15ピクセルのオレンジ色の枠線を設定しま
 した。まるで額縁のように表示されます。

■HTMLより
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 文書型宣言で、HTML4.01Strict型を使用しています。非常に厳格な仕様で、非
 推奨となる要素や属性値は使えません。

<link rel="stylesheet" type="text/css" href="images/border.css">
 外部スタイルシートを読み込ませるために、link要素で呼び出します。ここで
 は、「images」フォルダ内の border.css を読み込んでいます。
  この記述は、必ずヘッダ内で行います。

<table cellpadding="3" cellspacing="0" summary="枠線表示のCSS">
 テーブルを表わす設定で、セル間の余白はゼロ、セル内の内側の余白を3ピク
 セル分取りました。summaryは非視覚系ブラウザへの配慮です。第13号参照。

<tr><th abbr="CSS説明">borderの設定</th>
    <th abbr="値の説明">枠線表示</th></tr>
 ヘッダセルに、abbr属性で非視覚系ブラウザに対する配慮として設定しました。
 なお、第13号で述べたとおり、ヘッダセルはテキストが強調され、センタリン
 グされて表示します。

<div>
<img src="images/sakura.jpg" width="250" height="180" alt="京都の桜">
</div>
 汎用ブロックレベル要素内に、桜の画像を配しました。この画像は本誌サイト
で教材として提供しているものです。

 教材のダウンロードはこちらです
  http://www.scollabo.com/banban/daf/material.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ Tips --- リンクで使用する画像
リンクを画像で使用する際に、不用意な青色の枠線が表示されてしまう場合があ
ります。この枠線を非表示にさせるには、

 img { border-style: none }

 こうすることで、枠線を非表示にできます。また、img要素内で border属性を
使用することは、非推奨とされています。

 <img src="sample.jpg" width="100%" height="100%" border="0" 
   alt="リンクの絵">

 このように、border属性を使用する場合には、文書型宣言(DTD)を過渡期の
 Transitional とするようにしましょう。Strictでは使えません、念のため。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆罫線の表示 --- hr要素(ブロックレベル要素)終了タグなし
ページに罫線を表示する、hr要素は手軽に使えるので便利です。この要素のスタ
イルシートは下記の通りです。

hr { color: #090 }  罫線の色の指定
hr { width: 80%  }   罫線の横幅の指定
hr { height: 5px }   罫線の太さの指定
hr { width: 15%; text-align: right }  罫線の位置の指定
hr { border-style: double }  罫線の様式の指定

なお、Netscapeでは、色、位置、様式は表示されません。また、Operaでは、色
及び様式は表示されませんが、位置は指定できます。
 Opera の場合は、border-color を指定すれば罫線に色を表示できます。

また、hr要素に直接属性を指定することは非推奨となっています。
 例: <hr width="80%">

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ホームページに求められるもの --- 更新
HTML文書を作り、サーバにファイル転送して初めてホームページの開設ができる
ことは、前回にお伝えしたとおりです。
 今回は、「更新」について解説します。

 ■更新
 ホームページを開設して月日が経つうちに、訪問者から飽きられてしまうこと
 があります。1年以上も更新していない場合には、その傾向が高く急激にアク
 セスが少なくなってしまいます。
 (無料レンタルのサーバでは、数ヶ月更新がない場合、ページそのものを削除
  されてしまうこともあるようです。)

  実は、ホームページの維持でもっとも大変なのが、ページの「更新」です。
 大企業では Webページ作成の専門部署があり、常日頃から新しい情報を盛り込
 んで頻繁にページが更新されています。

  更新とは、訪れるユーザへの新しい情報の提供です。単に色だけを変えても
 フォントの大きさを変えてもそれは更新とはいえません。
  私たち一般の個人では、企業のような真似はできません。ましてや新しい情
 報などなかなか手に入るものではありませんし作り出せるべきものでもありま
 せん。
  じゃあ、どうする?

  まず何よりも自分自身のページをじっくりと観察することが大切です。友人
 や家族に見てもらったりして、その感想などを聞きましょう。
  自分自身のページを自分で見るときには、客観的なユーザとしてページの隅
 から隅まで、じっくりと読み観察することです。
  すると、何らかの物足りなさや、忘れているものが見つかるはずです。それ
 は大きなヒントになります。

  似たようなサイトを訪問して観察することも発想を豊かにする方法です。で
 すが、まったく真似してしまうのはいただけません。
  日ごろから、新聞に目を通したり、本屋さんで立ち読みしたり、ボケーッと
 テレビを見たり、自分なりに見識を深めるよう努力することも大切です。

   最初から立派なコンテンツを持ったサイトを構築することは、非常に困難な
 ことです。ページは成長させるものです。少しずつ手を入れて、手法を凝らし
 て、そういった更新作業を重ねていく中で、ページは成長していきます。それ
 こそが、アクセスアップにも寄与していくことでしょう。
  

  ホームページを開設したからといって、そのまま放ったらかしではなく、随
 時に更新作業して、新鮮なサイト構築に励むようにしましょう。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
WebページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_028.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://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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆更新情報
当サイトにおける「今週のおさらい」では、従来より号数しか表示しておらず、
読者の方から、詳しいメニューをつけて欲しいとの要請があり、先週16日より更
新し、「目次」とて公開しました。
 今までご不便をおかけして申し訳ありませんでした。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
日ごとに寒くなって、私の狭い部屋にもストーブが登場しました。時折、換気を
忘れてしまい、「ボーッ」としてきて、一種の二酸化炭素中毒に陥ります。
 思考することが面倒になり、動きも緩慢になってしまいます。大変危険な状態
ですので、皆さんも石油を燃料とした暖房器具の取り扱いには注意しましょう。

 そんなわけで、今週のメールマガジンの編集がやっと先ほど終わったばかりで
これから配信です。大きなミスが無ければいいなと思っていますが・・

 このところ会社でも自宅でもパソコンにしがみついているためか、目が非常に
疲れて、肩も凝っています。まるで年寄りみたい。(高齢の方、スミマセン)
 会社では主にグラフィックスと XML、自宅ではメールマガジンの原稿やらサイ
トの構築など。決して健康的ではありません。少しパソコンから離れた生活をと
思っている今日この頃です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



Copyright(C) 2002-3003 banban@scollabo.com