記事本文
TuneDoc とか作る前にお返事を優先しましょう
他所の CSS を適用したり適用させたりしてみるについて多くの助言をいただいたので、それに対するお返事を。 だいぶ間が空いちゃいましたが……。
div.section と div.subsection
まず、最初に自分の設計の甘さを晒すことになりますが、 hxxk.jp 内の記事などの文章のグルーピングの意味で
<div class="section"> 〜 </div>
で囲み、その中でまた細かく分かれる際に
<div class="subsection"> 〜 </div>
としていることに、確固たる信念や設計思想はありません。
現行のスタイルでは div.section に border プロパティや background プロパティを指定していますが、 div.subsection については、何のプロパティも指定していません。 次にスタイルを変えるときに、違う class 名にしておいた方がラクかなあ、といった安易な見通しで subsection という class 名になっています。 ということは、先に CSS ありきで class 名を付けているということであるので、そもそもの順番が間違っているということにもなります。 ( まず HTML で論理的な構造を示すために class 名を付けるべきであって、それの後に CSS をあてていくのが正しい順番 )
ウチのサイトの HTML における
とあったので、 XHTML2 の div.section 入れ子構造は、 XHTML2 の <section> / <h> 構造を睨んでのモノ。
<section> / <h> 構造を初めて見てみたんですが、 ( section と subsection の差異はあれど ) 現行の hxxk.jp の構造もこんな感じだなあと思いました。
私の場合は XHTML 2 を視野に入れていたわけではなく、単に hn 要素に対して id を振るという形式がしっくりこなかったので、
<div id="entry-yyyymmdd-hhmm" class="section">
ないし
<div id="sub-yyyymmdd-xx" class="section">
としていたということなんですが。
「ある見出し要素に暗幕的に従属する範囲の明示化」というこの
というくだりに納得したので、近々予定している Movable Type のテンプレート書き換えの時に、
div の使命は、見出しレベル (あるいは div 入れ子の深さ) に依存しないワケだから、いつも同じ section という class であるベシ
<div class="section"> 〜 </div>
で統一しようと思います。
狭義の HTML の構造と id と class
hxxk.jp の真琴たんは、
HTML の構造や、各要素の class や id に依存したものになっていると述べているけれども、classやidの差違も「構造差違」と言ってしまって良いと思う。
私が 他所の CSS を適用したり適用させたりしてみる - 適用して分かったことで言っていた HTML の構造という言葉ですが、これは HTML 文書内に各種の要素をどのように配置するか、という意味で使っていて、 id や class などの属性は別物だろう、と無思慮に決め付けていました。 よくよく考えると、 Descendant selectors も Child selectors も Adjacent sibling selectors も Class selectors も ID selectors も、どれもセレクタとして扱われているし、 class や id によって意味付けされるものも構造であるということは確かです。
多くの場合、 CSS は任意の HTML/XML 群に適用される事のみを前提に作られていて、それは至って正常な営みで、何も問題ない。
というのも充分に頷ける話で、たしかに hxxk.jp の CSS は hxxk.jp の構造に適用させることを前提に作っているわけです。
ありみかさん ( 娘々飯店しるきぃうぇぶ ) も私がそういったことを今回の件で再認識しているのを見てそういうことを言っていただいたのだと思います。
まあ、他所の HTML に自分の CSS を適用してみたら
「かなり見た目がバラバラになった !! もう少し汎用性のある CSS を作らねば !! 」
といった思いを抱いたわけではなく、「バラバラになるもんだなあ」と単純な感想を抱いただけというのがあの記事の締めなのですが。
もう少し時間と根気があれば、単に現行の CSS をあてるだけでなく、逆にそれぞれの HTML において見た目が同じになるように、それぞれのサイト用に CSS を書き換えてみるという
モノヅクリのタノシミ
方もあったかもしれません。
HTML/XML の構造のほうを CSS に合わせて変化させる
ある特定用途向け CSS を、どうにもその構造上ムリのある HTML/XML にすんなり自然に適用したいと思い、そのためにどんな手段もいとわないとするならば、 HTML/XML の構造のほうを CSS に合わせて変化させるなんてのがよくあるパターン。 この場合、「 HTML ありきの CSS 」という大事な大事なお題目が大ピンチ (笑) なので、なるべく避けたいバイアスがかかるのが普通の信者 (誰)。
私は知らず知らずにこのバイアスを持ってしまっていたのかもしれません。 antipop の CSS を適用する際も、 HTML の構造をいじらないという自分向けの縛りを科していましたし。
逆に、そういったバイアスをかけずに、柔軟に対応した例がタイミングよく作られたので紹介。
やたー！うんちぽ捨てて hxxk.jp スタイルになったよー！
とのことです。
まさか逆に向こうから適用されるとは思っていなかったので、ちょっとびっくりしました。
最初は前述の
div.section に指定している border プロパティや background プロパティがうまく再現されていなかったのですが、 HTML の構造を変えて見事に再現するようにしたそうです。
ちなみに、本筋とは関係ないのですが、現行の hxxk.jp のスタイルには
h2{ text-transform: uppercase; }
と指定しています。
そのせいで、本来だったら (`・ω・) らくがきである見出しが、(`・Ω・) らくがきになっていて激しく脱力します。
思わぬ副産物。
( か ? )
