めざせ、ＨＴＭＬの鉄人！

「ＨＴＭＬ教室」(小技篇)

ここには、ちょっとしたテクニックを順不同で集めてあります。

1 表の罫線を実線にする方法

普通の方法で表を作ると、次のようになります。

ModelMax. Print Speed
HL-2700CN31ppm Black
8ppm Color
HL-4200CN26ppm Black
26ppm Color

表は、実際は罫線で区切られるのでなく、実際は各項目がブロックで示されています。これを実際の表に近づけるには、ブロックとブロックの間隔を狭めれば良いのです。cellspacing を 0 にして見ました。

ModelMax. Print Speed
HL-2700CN31ppm Black
8ppm Color
HL-4200CN26ppm Black
26ppm Color

実際の表に近づきましたが、まだまだ、罫線が太く表示されます。そこで、表全体の背景色を black にして、項目の背景色を white にし、cellspacing を 1 にすると、項目間のスペースの black が残り、あたかも、細い罫線で区切られた表のように見えます。

ModelMax. Print Speed
HL-2700CN31ppm Black
8ppm Color
HL-4200CN26ppm Black
26ppm Color

表全体の背景色と cellspacing を適当に変更すれば、様々な色の、様々な太さの実線で表を描くことができます。次のものは背景色が blue で、cellspacing="2" の場合です。

ModelMax. Print Speed
HL-2700CN31ppm Black
8ppm Color
HL-4200CN26ppm Black
26ppm Color

こちらが、そのソースです。 

<table bgcolor="blue" border="0" cellspacing="2" cellpadding="4">
<tr align="center"><td bgcolor="white">Model</td>
<td  bgcolor="white">Max. Print Speed</td></tr>
<tr align="center"><td bgcolor="white">HL-2700CN</td>
<td bgcolor="white">31ppm Black<br />8ppm Color</td></tr>
<tr align="center"><td bgcolor="white">HL-4200CN</td>
<td bgcolor="white">26ppm Black<br />26ppm Color</td></tr>
</table>

表の外枠だけを太くしたいときは、Style Sheet で table の border-width を指定すると良いでしょう。

ModelMax. Print Speed
HL-2700CN31ppm Black
8ppm Color
HL-4200CN26ppm Black
26ppm Color


2 ピン・メニューの作り方

多くのウェブページで、画面を左右に 1：3 ぐらいの割合で区切り、左にメニューを、右に本文を置いているのを見かけます。たいていの場合、本文のほうがメニューが長いので、スクロールするとメニューが隠れてしまって見えなくなってしまうことがあります。フレーム機能を使えば、本文をスクロールしても、メニューはスクロールしないでそこにとどまっていますが、フレーム機能は標準的なウェブページには推奨されないので、これをスタイルシートで実現することにしました。次がそれです。 

div.pinmenu {
    position: fixed;
    float: left;
    margin-top: 1em;
    margin-left: 1em;
    width: 12em;
    background-color: #ffffd0;
    }
div.page {
    margin-left: 16em;
    margin-right: 2em;
}
HTML では次のように使います。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-JP">
<link href="pinmenu.css" rel="StyleSheet" type="text/css">
<title>2005</title>
</head>
<body>
<!-- メニューはここに -->
<div class="pinmenu">
<h3 align="center">目　　次</h3>
<ul type="square">
<li><a href="2001.html">はじめに</a></li>
<li><a href="2002.html">起動と終了</a></li>
<li><a href="2003.html">ユーザ登録</a></li>
<li><a href="2004.html">テキストの編集</a></li>
<li><a href="2005.html">その他の設定</a></li>
</ul>
</div>
<!-- 本文はこちら -->
<div class="page">
<h1 align="center">2005</h1>
<p>商売上手な Bill Gates さんのおかげでコンピュータというと Windows と
思い込んでいる人がいっぱいいます。そして、HTML 形式はまだしも、SJIS コード
で、Microsoft Word 文書の添付ファイルをつけた Email を平気で送りつけて
来る人がいまだにいます。Microsoft が世界標準だと思い込まされているのです。
しかし、実際はさまざまなシステムによって世界のコンピュータは動いています。と
くにインターネットを支えているサーバーのほとんどは UNIX/Linux システムなの
です。Linux こそ世界標準に近いシステムと言ってもよいと思います。
</p>
<p>私も Windows に飽きて Linux の世界にやってきました。そしてコンピュータ
の楽しさを取り戻しました。Linux の世界は冒険に満ちています。とてもエキサイ
ティングです。しかし、Linux の世界にはじめて迷いこんだ人は、その楽しさを味わ
う前に、サバイブできなくなってしまう可能性があります。たとえば、ブートアップし
て、黒い画面にいきなり Login: という文字が出て来たら「どうすればいいの？」と
感じることでしょう。このページでは私が経験してきたごく「ハウ・ツー」を紹介しま
す。どれもごく初歩的なものですが、その方がかえって初心者には親切かと思います。
</p>
</div>
</body>
</html>

テストページを表示し、ブラウザの幅を調整して画面がスクロールするようにして、この機能をためしてみてください。ピンメニューの大きさや、本文との間隔などは margin 要素を調整すればできます。ここでは、画面の左端とピンメニューの間隔を 1em、ピンメニューと本文との間隔を 2em、本文と右端との間隔を 2em にしてあります。


3 簡単リダイレクト

Penguin News には、news05a.html news05b.html hews06a.html などのふぁいるがあって、それぞれ 2005年前期、2005年後期、2006年前期の記事が書かれています。このページに入る時、2006年前期のページを表示させたい場合、それを index.html というように名前を変えてアップロードしてもいいのですが、リンクの設定など面倒になりますので、index.html を次のように書いて、Pengin News に入ると、自動的に news06a.html に飛ぶようにしています。 

<html>
<head>
<title>JavaScript Test</title>
<script language="javascript" type="text/javascript">
<!-- Hide script from old browsers
window.location="news06a.html"
//End hiding script from old browsers -->
</script>
<link rel="shortcut icon" href="../images/penguin_icon.gif">
</head>
<body>
<p>This is designed for JavaScript-enabled browsers. 
If you have JavaScript turned off in your preferences,
you may want to turn it on. 
If you have an older browser,
we suggest upgrading to a current browser.</p>
<p>To read this page, click <a href="news06a.html">here</a>.</p>
</body>
</html>
news06b.html をアップロートした時には、上記の news06a.html を news06b.html に書き換えればよいのです。 簡単ですが、役に立つジャンプ機能だと思います。


3 段の区切り線

文章を段組にしたとき、段と段を線でくぎると読みやすくなる場合があります。それを簡単に行う方法を思いつきましたので、紹介します。

２段組みの場合、３コラムの表をつくり、真ん中のコラムの背景色で区切り線を表示させ、最初とさいごのコラムに文章を流し込めばよいようにしてあります。 

<table cellspacing="24" width="600"><tr valign="top">
<td>左側の文章</td>
<td bgcolor="lightgreen" width="0"></td>
<td>右側の文章</td>
</tr></table>

実例は次のようになります。

私も Windows に飽きて Linux の世界にやってきました。そしてコンピュータ の楽しさを取り戻しました。Linux の世界は冒険に満ちています。とてもエキサイ ティングです。しかし、Linux の世界にはじめて迷いこんだ人は、その楽しさを味わ う前に、サバイブできなくなってしまう可能性があります。 たとえば、ブートアップし て、黒い画面にいきなり Login: という文字が出て来たら「どうすればいいの？」と 感じることでしょう。このページでは私が経験してきたごく「ハウ・ツー」を紹介しま す。どれもごく初歩的なものですが、その方がかえって初心者には親切かと思います。

このやり方では、<td bgcolor="lightgreen" width="0"> の bgcolor= で区切り線の色を、width= で太さを変えることができ、<table cellspacing="24"> の cellspacing で区切り線と文章との間隔を調整しています。




[INDEX]