早いもので、もう6月です。ここでの文章の公開を再開してからもう2ヶ月。まだ30回も更新が行われていないあたり、やはり「日記」という名を冠するのは不適切に違いありません。まあ、私が継続的に文章を公開し続けた記録としては3ヶ月が最高でしたので、もう記録更新への折り返し地点は越してしまっているようですが、ここからが怪しいものです。
さて、本日も水曜恒例となったHTML講座を開きました。前回(2005-05-25)CSSの各プロパティについて解説しましたが、時間の関係で中途半端に終わってしまったので、今回はその続きということになります。時間の関係とはいっても、一回の講座につき3時間などというかなり長い時間をかけてしまっているので、聴いて下さっている方には本当にご迷惑をおかけしていると思います…。このような反省を踏まえ、今回は事前に講義内容の順序を決定し、文章化してみました。手書きでですが。今まで、一度もこのような計画表を作らなかったので、無秩序に近い順序で講義が進んでいましたが、これでそのカオス状態から救われるかも知れないという期待を込めてのものです。しかしながら、結局のところ今回の講座も大幅に延長して3時間という結末になりました。本当にごめんなさい…。
さて、今回の講義内容は以下の通りです:

position系プロパティについて
CSSによるレイアウトを行う際、複雑なものを作る場合に必要不可欠なプロパティである、positionについて解説しました。今回は事前に部室のPCにOpera8.0をインストールしておいたので、ここでブラウザ間でのCSSの解釈の違いについて、実例を示す機会が出来たと思います。まあ、それならばOperaなどという比較的マイナーなブラウザよりも、FirefoxなどのGecko系エンジンを積んだブラウザを入れておいたほうが適切だったかも知れませんが。とりあえず、positionの値となるabsolutefixedrelativeの違いについて解説し、同時にz-indexという「奥行き」の概念についても解説しておきました。ただ、不可解なことになぜかz-indexによる指定が反映されず、上手く実例を示すことが出来ませんでした。ちゃんとpositionを指定したブロック要素に対して指定したのですが…。仕方がないので、妹研究会のデザインを持ち出して解説する羽目になりましたとさ。なお、ここで言及したプロパティは、以下の通りです:
  • position(absolute,fixed,relative,static)
  • left
  • top
  • right
  • bottom
  • z-index
float系について
段組を自然な形で行う時に便利な、floatclearについて解説しました。これは私もよく使うプロパティですので比較的簡単に実例を示すことが出来たと思います。float系を用いる際に注意すべきなのは、同時にwidthも指定しないと、不具合が起こってしまうということです。また、tableを用いたレイアウトと、divとfloat系を用いたレイアウトでは、どのような長所と短所があるのかについても触れておきました。ここで言及したプロパティは、以下の通りです:
  • float(left,right,none)
  • clear(left,right,both)
CSSのその他のプロパティについて
ここでは、あまり使われることがないというか、凝ったデザインをする場合や、複数のメディアについて考慮して設計する場合、あるいは特定の要素にのみ使われるプロパティについて、解説しました。なお、「あまり使われることがない」という判断基準は、私の独断と偏見によるものです。ちなみに、音声に関するプロパティを解説する意図もあってOpera8.0を部室のPCに導入したのですが、読み上げ機能を実現するためのボイスライブラリを用意できず(オンラインアップデートで追加する機能なので)、結局実例を示すことが出来ませんでした。ここで言及したプロパティは、以下の通りです:
  • overflow(visible,hidden,scroll,auto)
  • table-layout
  • border-spacing
  • border-collapse
  • cursor
  • page-break-before,page-break-after
CSSの文法について
これまで解説してきたのは、基本的にselector{property:value;}という、デザインをするためだけの文法でしたが、ここではCSSにおけるこれ以外の文法について解説しました。前回(2005-05-25)前々回(2005-05-11)と続けてきたCSSの解説も、ここで一区切りが付くことになります。基本の文法以外にもCSSには多くの文法が存在するわけですが、全てを取り上げて解説するのは時間的に難しく、またブラウザ側の実装もほとんど追いついていないのが現状で実例を示すことも出来ないので、例によって私の主観で取捨選択してしまいました。ここで言及した規則・書法は、以下の通りです:
マークアップ実践
さて、HTML講座Iも佳境を迎えたわけです。今までの総復習も兼ねて、実際に文章をマークアップし、その完成したHTML文章に対してCSSを適用、デザインも含めて一つのHTML文章を作ってみよう、という実践的な講座を行いました。
(執筆途中)