ページスタイル
金野が作っているウェブページの体裁(ページスタイル)についての記述をまとめてあります。
What's New!!
What's Old!!
- HTML 4.0またはHTML 4.0 Transitionalに適合したページにする。
- 日本語のページはEUCコードに統一する。(以前はJISコードにしていた。)
- ページの体裁に関わる項目は、なるべく「スタイルシート」に書く。
ページに直接書かない。
HTMLのスタイルシートは古くからある技術だそうですが、ウェブブラ
ウザが対応したのはごく最近だそうです。メジャーなところでは、
Internet Explorer 3以降がCSS1の一部分を、Netscape Navigator 4.0
以降がCSS1の大部分をサポートしているそうです。
- 各ページに共通のテクスチャ(壁紙)、簡易リンクメニューをつける。
- ページの先頭にページ内容を短くまとめて書く。
検索サーバには検索結果を表示するとき、各ページの内容を短くまと
めて付け加える機能を持つものがあります。ページ先頭に概要を書い
ておくと、その部分が表示されることが多いので、検索した人に対し
て親切です。
- なるべくシンプルにする。余計な装飾機能は使わない。
できれば装飾機能はスタイルシートだけで指定したいのだが、ウェブ
ブラウザでのCSSのサポートが不十分で、私が求める装飾機能をすべて
スタイルシートだけで実現するのは、現時点では出来ないようです。
- (上の原則に反するが)大きな項目へのリンクにはアイコンをつける。
ページの彩りのつもり。
- (上の原則に反するが)CSSの装飾は、気にせずどんどん使う。
- 見やすいページを心掛ける。バックは白系、文字は黒系にする、など。
偉そうに書いているが、例外多数あり :-P
スタイルシートとウェブブラウザ
ページの体裁に関わる項目をスタイルシートに書いていますが、だからといって、スタイルシートをサポートしていないウェブブラウザで表示すると正しく表示されないわけではありません。むしろその逆です。ページの体裁に関わる部分をHTMLファイルから切り離し、HTMLファイルにはページスタイルに依存しない記述を行なっているので、スタイルシートをサポートしていないウェブブラウザを使っても、情報の欠落などは生じません。確かに背景画(壁紙)などのページの体裁は、作者の意図したものとは異なる表示になっているはずですが、ページの体裁と内容とは関係がありません。
関連リンク
「ウェブページ」に関するページ
(「水先案内」のページ内)
以前ここにあったリンクは、上のリンク集に引っ越しました。
What's New!!からページスタイルの変更に関する記述を独立させました。主に作者の備忘録です。
2000年
- 11/29
- 一部のHTMLファイルをXHTML 1.0 compliantにした。またIE5.5と
Netscape Navigator 4.73とで表示を確認し、どちらでもできるだけ同
じに表示されるようにした。
- 9/13
- CSSの書き方で、"border: none;"と書くとNetscape Communicator 4.7
では不要な改行が発生するので、"border: 0px;"に変更。何が違うのか
はよく分からない。
- 8/3
- 節見出し、たとえば<h2>〜</h2>などの体裁を統一し、か
つ書きやすくするためのマクロを導入した。これを用いて、「研究に使
うUNIXと…」のページの体裁を統一。CSS2以上をサポートするブラウザ
が普及するまでの便法。(もうちょっとカッコ良くしたいが…。)
- 6/23
- 背景につけていたノート地の画像を改造。横幅を長くして、PNG画像に
変更した。長くなったのにファイルサイズは小さくなった。
(この画像に変えたのが、ちょうど1年前ぐらいだなぁ。)
- 3/29
- 各ページの頭付近にあったメニューを、ページ冒頭に入れることにした。
また、メニューを自動生成するようにした。
- 2/8
- 一部のページをHTML 4.01適合にし、Valid HTML 4.01!アイコンを使い
はじめた。
- 将来XHTML 1.0適合にするため、タグを小文字にするとか、イメージフ
ァイルのサイズ指定をダブルクオートで囲むとか、終了タグ</p>
をきちんと書くなど、XMLのルールに従った書き方に変えはじめた。完
全に書き換えるとHTML 4.01に適合しなくなるので、変更しやすい部分
だけ。
- 1/18
- スタイルファイルがCSS Validatorを通るようにちょっとだけ改造し、
CSSアイコンをValid CSS!アイコンに変えた。
1999年
- 6/15
- 見出し<H3>は中程度の明るさの青色にしていたのだが、暗めにし
た。明るい青だと、リンクが張ってあるように見えるかもしれないから。
「やっぱ基本は黒かなぁ」とも思ったが、そっけないので色を付けた。
- 6/14
- トップページにある、各ページの見出しのうち、<H5>を使ってい
るところのフォントの大きさをいじっていたのをやめて、標準に戻した。
下手にいじるよりはブラウザの標準を使った方がよさそうだ。
- 各ページの下についている、学部や学科のページへのリンクの説明書き
に「…のページへ」といちいちつけていたのを取った。と同時にアイコ
ンをとってシンプルなリンクにした。
- 各ページにつけているメニューに、いまだに「メイン掲示板」という言
葉が残っていたのに気づき、あわてて修正した。
- "ナヴィゲーション用リンク"なるものを各ページにつけた。といっても、
目次をトップページに、索引を検索ページに結び付けただけなんだけど。
- 6/11
- 画像の縦方向のアラインメントを変更し、baselineに合わせることにし
た。Netscape Navigator 4.04でも対応していた(あれ、対応していない
んじゃなかったっけ?)
- CSSの検証を行い、スタイルファイルを改善した。またブラウザ間の非
互換性を多少考慮した。(あまり深くは考えていない。)
- 6/9
- ページ背景の画像を変更(半年ぶり)。ノートっぽい柄で、色はやはりク
リーム・キンマリ(#FFFCF5)にした。
- 「トップページ」の、英語ページへのリンク
を画像ボタンだけにし、ページ右上に配置した。その分、ページ先頭の
節が短くなった。
- 「トップページ」のメニュー(表)の行間を詰
めた。メニューはコンパクトな方がいいだろう。
- 5/28
- 「トップページ」の表の要素を左寄せにする
ように、明確に指定した。MSIE5だと標準で中央揃えになる(?)から。
(なんだかなぁ。)
- 同じく「トップページ」のHTMLファイルの先
頭についていた、不必要なJavaScript定義を削った。
- 5/22
- 各ページの先頭と末尾につけているメニューを、JavaScriptによるプル
ダウンメニューから、もともとの形式、つまり単なるリンクの羅列に戻
した。ただし以前は1行だったが、入りきらないので2行になった。
JavaScriptをやめたのは、わざわざJavaScriptにする意味がないと思っ
たことと、文字コードの関係で(?)メニューが表示されない場合がある
らしいから。
- 4/5
- 下の3/23の変更に追加。<h5>のフォントサイズを小さくしないよ
うに。
- 3/23
- トップページの体裁を、わずかに変更。<h5>をインデントできる
ようなクラスを作り、トップページでそれを利用している。サブメニュ
ーにあたる階層を<h5>で実現しており、それを字下げしたかった
ため。(こういう使い方はHTML 4.0の思想に反するのかなぁ。)
- 2/2
- 「メイン掲示板」という用語が残っていたのを、「トップページ」に統
一した。なにごとも分かりやすくしないとねぇ。そうでなくとも小難し
い話ばかり書いてあるのに。
- このページもえらく長くなってきたので、変更年ごとに分けた。
- 1/25
- トップページの大改造(たしかこの日だったはず)
- 1/8
- 各ページ先頭のメニューの改造終了。
- 1/6
- 各ページの先頭と末尾につけているメニューを、久しぶりに改造した。
計算機環境に関するページに関し、プルダウンメニュー(form select)
とJavaScriptを用いて、一発で飛べるようにした。JavaScriptに対応し
ていないプラウザ、たとえばlynxなどへの対応がまだ不完全。
- 日本語用スタイルファイルを変更。ヘッダエレメントはゴシックに、そ
れ以外は明朝体を指定した。ただしこれはUA依存なので、Windows以外
ではうまく行かないだろう。(…その前にNetscape Navigatorでもうま
く行かなかった ^^;;)
1998年
- 12/25
- ちょっと色に凝り出した。<H1>は以前から青にしていたが、
<H2>などにも色をつけた。
- 12/24
- 「メイン掲示板」の、各ページの説明文のと
ころにつけている、更新内容の簡単な説明の文字の色をグレーに変えた。
- 各ページの冒頭にも、上記の更新内容と同じものを書くことにした。い
きなりそのページに飛んで来る人もたくさんいるから。
- リンクの文字列にマウスカーソルを重ねると、文字が赤くなるように変
更。こういうことはJavaScriptでしか出来ないと思い込んでいたが、ス
タイルシートで指定できたのにはびっくり。
- 12/17
- 「メイン掲示板」の、各ページの説明文のと
ころにつけている、更新内容の簡単な説明の部分を、小さい字になるよ
うに変更した。<P>のための新しいスタイルクラス"whatsnew"を
追加。
- スタイルシートの評価プログラムを入手したので、これを用いてスタイ
ルシートをチェックし、エラーを無くした。
- 12/16
- ページ背景の画像を変更。以前の白タイルとデザインは同じだが、バッ
クを真っ白ではなく、文庫本の紙(クリーム・キンマリというらしい)の
ような黄色みがかった色に変えた。各ページの内容が、文章がほとんど
で、見るというより読むページになっているので、長時間じっと見るの
に耐えられるような色が望ましいと考えた。背景が真っ白では目が疲れ
るだろう。(ついでにTera Termの背景も変えちゃった ^^;;)
- 見かけ上は関係ないが、<P>のための新しいスタイルクラス
"continue"を追加し、日本語の文章では段落に分かれないような段落
(もっとはっきり言えば、字下げをするべきではない"段落")に使うよう
にした。
- 9/10
- Another HTML-lint gatewayによる診断と修正が、ほぼ完了した。
- 各ページの頭とおしりにあるメニューを、小さいフォントにするよう、
スタイルシートを書き換えた。
- 9/9
- Another HTML-lint gatewayに「メイン掲示板」をかけてみたところ、
なんと0点と診断されたので、慌てて修正。イメージファイルの幅や高
さを指定しまくり、「よくできました」になるまで書き直した。他のほ
とんどのページも書き換えた。
- 8/13
- 久しぶりにスタイル変更。背景(壁紙)を小さな白タイルに換えた。
シンプルイズベスト。
- 3/11
- 「メイン掲示板」の日本語、英語ページへの
相互リンクをちょっとだけ変えた。
<p lang="en">
がMSIE4ではちゃんと表示された。ちょっとびっくり。
- 3/7
- lynx2.7.2をインストール
(バージョンアップ)したので、これを使って金野のページをチェック
し、表示がおかしかった「メイン掲示板」
を修正した。Emacs w3の古いバージョンでは、スタイルシートを使っ
ているページが表示できなかった(原因不明、気にしない)。
- 各ページに、ページの作者を入れた。<meta name=…と<link
rel="made"…の2種類をヘッダに。
- ヘッダの共通項をインクルードファイルにした。
- <blockquote>の使用を大幅に減らした。引用には関係の無いと
ころではもう使っていない。
- <pre>、<code>も、内容によっては<kbd>に書き換え
た。
- 3/6
- HTML 4.0 (not Transitional)に適合させる方法(コツ)がやっと掴めた
ので、外部に公開しているページの全てをHTML 4.0に厳密に適合させ
た。手間はかかったがそれほど難しくない。とにかく全ての文字をパ
ラグラフの中に入れるのがポイントのようだ。
- <blockquote>は実際に何かを引用しているときだけになるよう
に更新中。これに限らず、HTMLのタグの意味と使い方が合致するよう
に、ページを書き直していく予定。
- HTML 4.0 Transitional→HTML 4.0の書き換えに伴い、ページの体裁を
規定する部分をスタイルシートに移しているので、スタイルシートが
だんだん充実してきた。
- 3/3
- 外部に公開しているページが、やっと全て、HTML 4.0 Transitionalに
適合するようになった。"Transitional"に適合させるのはさほど難し
くなかったが、厳密に適合させるのは大変そう。
- 2/24
- 各ページがHTML 4.0に適合するように改訂中。かなり書き換えたが、
それでも全然適合しない。
- 日本語のページは、漢字コードをEUCに統一。以前はJISコードで書い
ていたので、公開している全てのページを改訂した。
- 金野のページ用のスタイルシートを書いた。体裁に関わる変更は、今
後、スタイルシートだけの変更で済ませたい。(IE4はCSS2に対応して
いないみたいなので、現時点では無理。)
- 2/5
- 各ページがHTML 4.0に適合するように作業中。全てのページを修正し
なければならない。
1997年
- 10/24
- 日本語で書かれているページのDOCTYPEをi18n//ENに変更した。
- 10/6
- 各ページの最後につけているリンクのアイコンの枠を無くした
(border="0")。スタイルの変更は久しぶり。
- 5/28
- 5/6にページ構成を変更した際に、元の位置(ディレクトリ)に残してお
いたファイルを消し、かわりにRefreshタグの入った「移動しました」
ページを作った。
- 5/20
- 「メイン掲示板」につけている検索サーバ
を利用するフォームリストの体裁を変えて、
gooを追加した。
gooは最近よく利用している。
- 上に関連して、検索フォームはページの下の方に移動した。検索フォ
ームは自分が使うためのもので、ページを見に来て下さった他人様に
とってはあまり重要ではない(だろう)から。
- 5/15
- ページ先頭に<H1>…</H1>でタイトルをつけているが、そ
のすぐあとにそのページの内容を簡単に紹介する文章を入れた。
検索サーバの"goo"
はページの
概要を表示するのだが、たまたま自分のページが表示されたのを見て
みるとページ先頭につけていたメニューが表示されている。これでは
内容が分からなくて不親切だ、と思って改造した。
- 5/9
- 5/6にディレクトリ構成を変更した際に、バックグラウンドイメージの
リンク先を変えるのを忘れていた。これを修正。
- ついでにバックグラウンドイメージを変更。
- 5/7
- 「メイン掲示板」の体裁を変更。水平線と
余計なアイコンを削った。
- 「金野の好きなもの」の見
出しに付けていたアイコンが白くて見づらいので、青いものに変えた。
- 5/6
- ディレクトリ構成の変更。
- JavaScriptで表示している"Last modified"をやめて、HTMLを編集する
のに使っているEmacs Lisp(html-helper-mode)の機能を使って更新日
を表示するようにした。各ページのメニュー(共通)を書き換えただけ
で全てのページが更新されたように見えるのが馬鹿らしかったから。
- 4/21
- 「皆でプリンタを使おう」のページの、
EPSON PRIF8Nで使えるTCPポート番号の説明を箇条書から表に変えた。
その方が見やすいと思った。でも表を使うとテキストベースのブラウ
ザでは見づらいんだよね…。
- 4/9
- 「メイン掲示板」の中の
「金野の好きなもの」のペ
ージの扱いを小さくした。好きなもののページは結局は自分勝手なこ
とを言っているだけだし、内容も充実していないし、ずっと更新して
いないし…。
- 3/5
- やっとjweblintに文句を言われなくなった。<h2>の次に
<h3>ではなく<h4>を使うと、標準の設定では文句を言う
らしい。
- 3/2
- jweblintをインストールしたので、これを使ってページの体裁をチェ
ックしたところ、あっちこっちにたくさんのエラーや警告が出た。で
きるだけ全てに対処するようにしたが、まだエラーの原因が分からな
い部分もある。
- (上に関連して)<IMG SRC=…>(画像挿入)の部分すべてにALT属性
を追加し、テキストのみのブラウザでも表示がおかしくならないよう
にした。チェックにはEmacs-w3を用いた。
- 3/1
- 新しいアイコン集を手に入れたので、その中からいくつか使ってみた。
「烏龍茶」のアイコンを変更。
- html-helper-modeを使いはじめた。ページのスタイルにはあまり関係
ないが、ソースコードのスタイルは今後かなり変わるだろう。
- 2/28
- 今までは
<DL><DT>見出し<UL><LI>中身1 <LI>
中身2…というリストを多用していたが、どうも見かけが気に入らない
ので、<H4>で見出しをつけるように変更した。この方がすっき
りして見やすいように感じる。
- 他のページへのリンクは、「メイン掲示板」
を除き、なるべくを使うようにし
た。(まだ完全には統一していない。)
- 「What's New!!」、
「What's Old!!」、
「ページスタイル」は相互に関係があ
るので、それぞれのページから他のページへのリンクを張った。
- 2/27
- ページ全体の構成がだんだん複雑になって来たので、
「メイン掲示板」のリンクを表形式から単
なるリストに戻し、孫ページへのリンクを加えた。
- 2/13
- 各ページで使われている背景の画像のURLを統一した。今までは画像フ
ァイルの方を各ディレクトリにハードリンクして使っていたが、これ
だと画像が同じファイルであることが分からないのでHTTPによる再送
が発生するので効率が悪い(らしい)。なお、現時点では藤沢周平氏の
喪に伏して黒バックにしてあるページが幾つかある。
- 各ページについている簡易メニューから「この
ページについて」を外し、「メイン掲示板」
だけからたどれるようにした。全てのページからたどれる必要は
無いと判断したから。
- 2/4
- 「金野ってこんなやつ」で使わ
れているアイコンを増やす。各項目(節)ごとに一つは付ける。
- 1/25
- 主に「水先案内」のページで使
われていた、<P>…</P>を減らし、<BR>を使うよう
にした。少なくともNetscape Navigatorではその方が余計な空白が出
ない。(ページの体裁は本来はブラウザに任せるべきなのだろうが…。)
- 「メイン掲示板」の中で、今までリストだ
った部分を横並びにするためにTABLE属性を利用した。TABLE機能を使
うと、TABLEに対応していないブラウザで見たときの表示が気になるが、
lynxで見ると別に変ではなかった。
- 1/21
- 「メイン掲示板」に「ODIN検索」を追加した
のに伴って、ついにTABLE属性を使いはじめた。
1996年
- 12/27
- 各ページの一番下に付いているリンクメニュー(学科のページに戻る、
など)の体裁を変えた。工学部に戻るリンクを追加し、学科、学部、大
学のページへのリンクは一行になるようにした。
- 12/16
- 各ページの見出しにつけているアイコンを変えた。
(うぅむどうでもいい情報だ。)
- What's Newの書き方をちょっと変更。
ページへの参照はかぎかっこ(「」)で括るようにした。
- 12/9
- ページスタイルの変更(このページ)を
What's Newから独立させた。主に作者
の備忘録のため。
- メイン掲示板の体裁を変更。無意味に大きなフォントを使っていたよ
うに感じるので整理した。
- 各ページの先頭と最後に付けてある簡易リンクを改定。流体研内限定の
ページへのリンクは要らないだろう。
- What's Newの体裁を変更。
なるべくシンプルに。
- 水先案内のページのアイコンを
変更。「なるべくシンプルに」の原則に反するけど、何もないのも寂
しいからね。
- 12/2
- HTML 3.2にならってDOCTYPEを指定した。実は意味を理解せずに付けて
いるので、近日中に書き換えるかもしれない。
- 10/24
- 各HTMLファイルの漢字コードを明示するために、ヘッダにContent-Type
を明示する。これに対応しているブラウザならば適切な文字セット・
フォントが指定されるはず。
- What's New(このページ)の体裁をちょっとだけ変更。
- 10/22
- JavaScriptで"Last modified"を表示。意外と簡単。
- 9/21
- メイン掲示板の体裁を簡略化。
- 各ページに、相互のページへのリンクの簡単なメニューを追加。
- HTMLソースコードの構成を変更。(うーん、作者には重要だけど、見て
いる人にとってはどうでもいい情報だなぁ ^^;;)
- 9/10
- JavaScriptを使ってWWWブラウザの下に横スクロールする文字列を入れ
てみた。現在はWelcomeメッセージが流れるだけだが、将来は「最新の
変更点」を載せる予定。
- 今回から、Internet Explorer Ver.3を利用してページの体裁をチェッ
クしている。
- 8/13
- メイン掲示板の先頭にアイコンがたくさんあってごちゃごちゃしてい
るので、アイコンの数を減らして、短い言葉で説明するように変えま
した。
- 5/14
- 「趣味と実益のWWWリンク」が大
きくなって来たので、メニュー形式にしました。
トップページ
工学院大学
・
機械工学科
・
流体研
リンクはご自由に。でもメールをくれると嬉しいな。
金野 祥久
konno@researchers.jp
Last modified: Wed Nov 29 13:28:01 JST 2000