(Original: Mon Sep 19 02:04:17 JST 2005)
Last modified: Sun Oct 06 11:27:32 JST 2019

CSS を使ってみる

1. CSS 以前

私は Meadow という UNIX では有名な Emacs(Mule) の Windows 版(?)を 使ってホームページを書いています. Meadow は HTML 記述のための 特別な機能を持っているわけではなく, 単なるエディタとして利用しています. つまり直接文章中に HTML のコード(マーク)を挿入しながら書いています.

このマークを入れながらという書き方は, 私の愛用している TeX(LaTeX) という組版ソフト(ワープロソフト)を使っているときと 同じであり, 不自由は感じないのですが, LaTeX が文書の階層構造を 用いて適切に文章を組み上げて行くことが出来るのに比べ, HTML は文章の構成機能が弱く, 文章自体が書きづらいと感じていました.

もしあなたがまだ LaTeX を知らないのであれば, 是非 1 度インストールして使って見てください. 文章を書くという作業と組版するという作業が分離されており, 文章の見栄えを気にせずに, 文章を書くことに専念できます. Microsoft Word のような WYSWYG タイプのソフトが, いかに文章を書きづらいかがわかります. 文章を書くと同時に その外見的な構成までをも, ユーザにやらせるというのは いかにユーザの負担を増やしているか... (私にとって MS-Word はポスターやラベルの作成ソフトです. でも会社ではこんなモンを使って文章を書く事を強要する... ああ情けない.)

2. CSS との出会い

上に書いた様に, 私は Meadow 使いでして, この細かい設定について インターネットで調べていると, kawacho さんの めどうさん (Meadow 入門) というページに出会いました. ここの内容もさることながら, 私を感激させたのはその体裁です. カッコイイ!!

これ, どうやって書いたんだろう. すぐさまアングラ世界の常套手段 "ソースを見る" の出番です. ナンか拡張子.css のファイルでスタイル指定しているようだ... さらに kawacho さんの ページを辿ってみると, CSS 関連のリンクがあり, CSS とは Cascading Style Sheets の略で, ホームページで使う文書の 表示やスタイルの定義ができるということがわかりました.

3. LaTeX 風スタイルシートの試み

いくつかの CSS についての説明を読んで行くうちに, CSS を使えば TeX のように階層的な文書構造を表現できそうな 気がしてきました. よーし!

という訳で何とか LaTeX 風のスタイルシートを作り上げ, それを利用して書いたのがこれらのページです. まだまだ満足できる出来とはなっていませんが, 何とか 使える程度にはなってきたと思います. 特にテーブル(表組)に 関してはデフォルトのテーブルより格段によくなっていると思います. (あくまでも私の主観ですが...)

現状のスタイルシートは次のようになっています. "uranov-article.css"

4. CSS についての疑問

まだ CSS を利用し始めてから数日ですが, わからないことが いくつか出てきています. もし, ご存知なら教えてください.

5. とりあえずごまかそう

前節に同じラインの両端に文章を置く方法は無いかと書きましたが, 取り敢えず 誤魔化す方法が見つかりました. align left で表示したラインに, align right の 表示を無理矢理重ねます. この無理矢理重ねる方法として margin-top の値に 負の値を与えています.

表示の具体例は, このページの最下端を御覧下さい. ここでは margin-top を -1.4em としています. 詳しくは css ファイルを参照下さい.

この方法はあくまでもイリーガルで付け焼き刃的なやりかたです. 試しに, お使いのブラウザの横幅をどんどん狭くして見て下さい. 左側に align した文字と, 右側に align したものが重なってしまいます. tex2html や latex2html で TeX 側でこのような配置が指定されている場合 どう処理しているのでしょうか... 時間があれば調べたいと思います.