記事本文
他所の CSS を適用してみる
どうやら原因は halt さん ( 武蔵流プログラマへの道 ) らしい antipop day ですが、賛同してやってみました。 ( トイレの落書き - うんけ！が発端という説もあります。 )
- hxxk.jp ( antipop day )
数日で元に戻しますが、現在は元に戻しています。
こうして手軽に模様替えできるのが CSS の強み、というのを再認識。
ちなみに細かい点が antipop と違いますが、その辺りは各要素の class 名の差異によるものか、または HTML の構造の違いによるものでしょう。
他所のページに hxxk.jp の CSS を適用してみる
ただ真似するだけでは単なる二番煎じなので、私なりに別の遊び方を。 逆に、 hxxk.jp の CSS を各人のソースに組み込んでみました。 なお、その際に以下のようなルールで組み込んでいます。
- 適用させるページは 2004-10-17T00:58:59+09:00 時点付近のもの
- xml 宣言や meta 要素の charset は EUC-JP に変更
- それ以外の部分はいじらない ( よって、デッドリンクや、 img 要素による画像の取得ができない可能性がある )
- 適用させるページは比較的親しい方のページのみ ( それを免罪符にするわけではありませんが、結果的に無断でテキストなどをコピーしています。快く思われない場合は撤回しますので、ご連絡ください。 )
- 2004-10-17T02:30:52+09:00 時点で私が祭参加を確認できたページに適用
hxxk.jp の CSS の適用結果
- antipop
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- トイレの落書き
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- 武蔵流プログラマへの道
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- YES I 液
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- Web Cafe' Weblog ( あんちぽまつり )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- ねこめしにっき ( あんちぽまつり )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- はてなダイアリー - love all ... personal memo ... ( あんちぽまつり )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- はてなダイアリー - kina_memo ( Antipop祭 )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- 回顧録？ ( ワショーイ )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- 朝顔日記 ( antipop スタイル )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- Short Communication ( 2004年10月17日 )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- A DAY IN THE LIFE ( あんちぽ祭り )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- Seven Deadly Sins. ( antipop祭 )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- 脱 三日坊主 宣言！ ( antipop 祭り )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
- Junkline ( Junkline - あんちぽまつり便乗中 )
-
- antipop および hxxk.jp の CSS 適用のスクリーンショット
-
適用して分かったこと
けっこうサイト……というか、ソースによって見た目が変わっているということ。 ということは即ち、hxxk.jp の CSS は、 hxxk.jp 内における HTML の構造や、各要素の class や id に依存したものになっている、ということです。
たとえばねこめしにっきへの適用結果を見ると分かりますが、太い border で囲まれたセクションが hxxk.jp に比べて多重構造になっています。 これは hxxk.jp の CSS において
div.section{
border: 10px solid #0055ff;
color: inherit;
background: #000000 url("../materials/index_section.jpg") right top no-repeat;
}
と指定しているためで、
<div class="section">
の入れ子を行わない、と自分の中で決めていることによります。
現在は
<div class="section">
の入れ子を行っています。
人によっては
<div class="section">
の入れ子を行うようにしている場合もあります。
そういった時に、自分の CSS を当ててみると少し予想と違った結果になるかもしれません。
ねこめしにっきへの適用結果が正に好例。
( <div class="section"> の入れ子がダメと言っているわけではありません、念のため。 )
そういった視点では、たとえば Appendix > CSS List - outsider reflex の strict.css はそういった現象が起こらない
( div, span, class, id 等に頼らないことを目標
にしているので、当然かもしれませんが )
ので、汎用性の高い CSS だと言えるでしょう。
あと最後に気付いたんですけど、これって要するに hxxk.jp の CSS をそのままユーザースタイルシートにして各サイトを見ている状態を形にしたという事みたいなものですねえ。
