■

改装を始めて数日、未だに文章構造について悩んでおります。このところ、妹研究会のメンバーが続々とMSNでBlogを公開し始めており、Opera付属のRSSリーダーが以前にも増して大活躍しております。水面下でじわじわと普及している感があるRSSですが、つい最近になってはてなダイアリーもRSSに対応したそうで、早速試してみました。…が、やはり普段から使い慣れているOperaだけで十分な感じでした。
ところで、今日はHTML講座がありました。先週はお休みだったので、前回の講座は先々週(2005-05-11)になります。そこではCSSの「総則」についてお話をしましたので、今回はもっと具体的なCSSの記述方法についての解説を行いました。いわば「各論」のような感じです。前回解説し忘れた項目もあったので、併せて解説させて頂きました。
今回の講義内容は、以下のような感じになります：

擬似クラスについて

CSSによるデザインを行う場合、通常のセレクタによる要素の指定だけでなく、擬似クラスと呼ばれる概念を利用することで、さらに選択肢が広がるということをお話しました。ただし、この方法はUserAgentの実装状況に依存しているため、擬似クラスに依存したスタイルは一部のユーザーに歓迎されないということも付け加えておきました。ただ、この講座を聞いてくれている人のほとんどが、これまでにInternetExplorerしか使ったことがない、という感じだったので、UserAgentによるCSSの解釈の差異を実感できていなかったようにも見えました。

スタイルの指定（色と背景、フォントとテキストの修飾）

ここからはプロパティに関する具体的な説明となります。本当はBox概念などのレイアウトに関する説明から入ったほうが良いという考えもあったのですが、物理マークアップを用いたデザインと似通った個所が多い領域（つまり直感的にわかる領域）から解説を始めることで、CSSの書法に馴染んで頂くことにしました。ここでCSSの重要な概念の一つである「継承(inherit)」についての解説もしました。

まず、色と背景に関する指定ですが、特に説明することもなかったので（既に親要素から子要素への値の継承に関しては説明済みなので）、背景色(background-color)がとり得る特殊な値、transparent（透過）について言及しておきました。あと、色指定の際に利用可能な値についても簡単に解説をしました。16進法による指定、WebSafeColor、システムカラーなどです。背景画像については説明を省略してしまいましたが、背景色と背景画像の関係についても後々説明したいと思います。ここで言及したプロパティは、以下の通りです：

• color(inherit)
• background-color(transparent)
• background-image

次に、フォントに関する指定方法について解説しました。ここで重要なのは、フォントファミリー(FontFamily)の概念なのですが、DTPなど、PC上でフォントを本格的に利用した作業を経験したことのない人には、わかりにくい分野の一つであると思います。とりあえず、実際にブラウザに解釈させるとどうなるかという実例を示しながら、5つのフォントファミリー(serif,sans-serif,cursive,fantasy,monospace)の特徴に関して説明しました。また、フォントサイズの指定の仕方にも言及し、いわゆる絶対指定と相対指定の違いを解説しました。ここで言及したプロパティは、以下の通りです：

• font-family(serif,sans-serif,cursive,fantasy,monospace)
• font-size

文字の装飾の解説は、物理マークアップによって行うデザインの例と比較しながら進めていきました。すなわち、bやiやuやsを使った表現をCSSで再現するにはどうするか、ということです。「HTMLの裏技辞典」などといったような怪しい解説サイトで良く見かける「リンクの下線を消す方法」の原理について触れ、noneという値の意味も解説しました。ここで言及したプロパティは、以下の通りです：

• font-weight
• font-style
• text-decoration(underline,overline,line-through,none)

BOXについて

CSSによるデザインを行う際、最も重要な事項の一つである、BOXという「領域」の概念についての解説を行いました。これも、実際にブラウザを用いて、画面上に実例をレンダリングさせながら話を進めました。とりあえず、大前提となるmarginとborderとpaddingの3つの概念から解説を始め、次に領域のサイズを指定するwidthとheightについて解説しました。ここでも、値の絶対指定と相対指定の違いについて触れ、絶対指定がユーザーの選択肢を奪ってしまうことになりかねないことも述べておきました。borderの指定方法については、いきなり省略的な指定方法（いわゆる一括指定）を用いるのではなく、それぞれを無省略で表した場合どうなるか、というところから解説しました。ただ、先に述べた通り、この講座を受講している人間のほとんどがIE固定ユーザーなので、ブラウザによる解釈の違い（marginの相殺など）に関する説明が上手く出来なかったかもしれません。まあ、それは後に行うであろう実践的な作業の中で触れていきたいと思います。ここで言及したプロパティは、以下の通りです：

• margin
• border-style(solid,dashed,dotted,double,groove,ridge,inset,outset,none)
• border-color
• border-width
• padding
• width
• height

displayに関して

要素の表示方法を指定するプロパティ、displayに関する解説を行いました。ここは、論理面を取り扱うHTMLの考え方と一部分を共有しいる分野でもあり、領域の概念と並んでCSSの最重要事項にあたると思われます。とりあえず、最初はインライン要素とブロック要素を「論理面から」比較し、その上でブラウザのデフォルトのレンダリング方法がどうなっているかを見ていきました。すなわち、文章の構造（段落や見出しやセクションなど）を明示するのがブロック要素であり、文字列の意味（強調や引用や省略語など）を明示するのがインライン要素である、というような説明の仕方です。これらを踏まえた上で、CSSによるdisplayの値の変更がどのような作用を及ぼすかについて解説しました。また、インライン要素とブロック要素のどちらにも分類されない要素についても解説を行う予定でしたが、講義時間の関係上、リストアイテムに関する説明だけに留めておきました（ここで、余談としてリスト系に関する指定の仕方も解説してしまいました）。また、display:noneとvisibility:hiddenの違いについても触れておきました。ここで言及したプロパティは、以下の通りです：

• display(inline,block,list-item,none)
• list-style(disc,circle,square,none)
• list-style-image
• visibility(hidden,visible)

ここで、時間切れというか、講義時間延長の限界が来てしまいました。

今回の講義は、こんな感じだったと思います。こうして改めて文章にしてみると分かるのですが、かなり多くの要素について解説をし忘れてしまっております。floatやpositionなどは最初から講義時間が足りなくなると思って言及を避けましたが、例えばtext-alignやoverflowなどについては、領域の解説をした時点で触れておくべきだったと思います。このHTML講座、何を思ったか今まで一回もレジュメなどの講座資料の類を作成しておりません。そろそろ、今までのまとめと総復習を兼ねて、何かHTML文章を作成してみようかな、と思います。