- December 25, 2007 3:43 PM
- Movable Type | Vicuna | XHTML CSS
- 2007.12-30
-
Ninja Style 完成。(年内に間に合った!)
問題の修正とか、アイコンがついたりいろいろ変わっているので、新しいものを使ってください。
- 表示確認
- Download: Ninja Style
- 2007.12-27
-
当初配布していた暫定版のNinjaスキンに１箇所すんごい不具合がありました。
ボックスの高さを揃えるテクニックには、落とし穴があったようです。その不具合の表示と、原因を記事末尾に追記しましたので参照してください。
このテクニックを利用する際は皆様も注意してください。解決方法も模索しています。
僕が考える理想のCSSスキンとは、以下の条件を満たすものです。
- ユーザーが好みの形に変えやすい
- CSSに詳しくなくても1.が可能
- 適当に編集してもレイアウトが崩れにくい
- 少しの調整でイメージを大きく変えられる
- ユーザーのカスタマイズ意欲を掻き立てる
現在のVicunaのスキンはどうかというと、1.2.3 はモジュールによってある程度クリア出来ていると思うけど、色の調整などは膨大なCSSファイルから特定の部分を探さなくてはいけなく、細かな調整という点ではクリアできていません。
4.は、先の理由から、これも中途半端になっていて、例えば、VegaやOriginといった、カスタマイズされることを前提として用意したスキンでは、スキン自体は少しの編集でイメージを大きく変更できるようなつくりになっているけど、結局、変更したい該当箇所を探すのに苦労してしまうんですね。これは5.と繋がっていて、僕もあるのだけど、沸いてくるイマジネーションは即座に表現(反映)させられるべきで、その目的までの過程で苦労する要素が大きくなってくると、沸いてきたアイデアはどこかに消えてしまう。
「やりたいけど、面倒ならまぁいいか、きっと今浮かんだアイデアはたいしたことない」
なんて思ってしまったら、これは悲しい。Vicunaを使ってくれているユーザーがそう感じてしまったら、僕は2倍3倍に悲しい。技術的に難しいのならわかるけれど、一部分の16進数を変えたいだけで、この思考に陥らせてしまうのは、そんなものを用意する側が悪魔だ。(いや、小悪魔にしとこう。
そんなことを考えているうちに、カスタマイズしてくれているユーザーを見ると、すごいなぁと思うと同時に、ちょっと罪悪感も生まれてくるようになっちゃって、なんとかもっと簡単に冒頭の理想に近づける方法はないもんかと考え、しばらく前から試行錯誤していました。
構造と色彩定義を分ける
CSSは、文書(HTML)から装飾を切り離してデザインできる言語だけど、これと同じように、CSSの中でもまた、レイアウト構造と色彩を切り分けたらどうかと考えてみました。現在のVicunaの構成にあわせてると以下のようになります。
- Webサイト
- HTML
- CSS
- コアCSS (レイアウトや余白などの位置情報)
- element.css (各要素単位の装飾定義)
- class.css (特定の役割を持った要素に対する装飾定義)
- context.css (文脈で変更される装飾定義)
- layout.css (カラムレイアウト関連の定義を抜き出したもの)
- サブスキン (色彩情報と、レイアウトの設定情報だけを抜き出したもの)
- モジュールCSS
- コアCSS (レイアウトや余白などの位置情報)
複雑なものは可能な限りコアCSSに落とし、サブスキンには編集しても安全なレイアウト情報と、全ての色彩定義を記述する。これで、ユーザーは、カスタマイズのために無関係な行を目にすることなく、好みのデザインに近づけることができるようになるはずです。また、そこにはボックス関連の指定が無いので、各モジュールや2カラム、3カラムなどのレイアウトと相互作用することなく、完全に独立した設定ファイルになります。
サブスキン製作者
Vicunaを作ってから10ヶ月経つけど、未だVicunaのスキンを製作してくれるような人は出てきていないんですね。やはり、CSSファイルから目的の場所が見つ辛かったり、一般的なCSSの作りと違って全ページ共通のHTMLに対して作らなければならないのが、ちょっと大変だったかなと思います。でも、このサブスキンを使った方法ならば、スキンの製作も以前よりは比べ物にならないくらい簡単になるし、純正の他のモジュールにも対応するので、僕はちょっとだけ夢の世界を妄想しています・・・!!
以上を実践した新しい仕様のスキン
まだ作りかけですが、冒頭の理想に出来る限り近づけたスキンを暫定公開します。Vicunaのユーザーなら、ぜひぜひ適用して、サブスキンを編集して遊んでみてください。サブスキンは style-ninja/subSkin/subSkin.css にあります。
Vicuna を使っていない方でも、以下の方法でローカルでスキンを試すことができます。
サンプルページの表示は、
- mod_gNavi.css (グローバルナビ用スタイル)
- mod_eyeCatch-Short.css (短い画像を表示)
- mod_multiColuType2.css (本文が右にくる3カラム)
の、3つのModule CSSを読み込んだときの表示です。
Vicunaスキンの仕様説明
Vicunaのスキンを触ったことがない人に説明しておくと、最初から読み込まれるコアCSS+サブスキンのほかに、module.cssからコメントアウトではじめて読み込まれる定義ファイルがいくつかあります。例えば、特定の場所に任意の画像を表示するアイキャッチモジュールは、module.css内には次の用にコメントアウトされて読み込みが保留されています。
/*-------------------------------------- Eye Catch [Long] Module ---------------------------------------*/ /* @import url(module/mod_eyeCatch-long.css); */
この、@importの上下にある /* */を削除することでコメントとして扱われいた指定が有効になり、style-ninja/module/mod_eyeCatch-short.css が読み込まれ、画像が表示されます。他にも色々なモジュールを用意しているので、読み込ませて遊んでみてください。
サンプルページの表示は、
- mod_gNavi.css (グローバルナビ用スタイル)
- mod_eyeCatch-Long.css (長い画像を表示)
- mod_multiColuType1.css (本文が中央にくる3カラム)
の、3つのModule CSSを読み込んだときの表示です。
マルチカラムモジュール
各モジュールは複数同時に読み込むことが出来ますが、
- mod_multiCol-Type1.css
- mod_multiCol-Type2.css
はどちらか一方しか読み込ませることが出来ません。なので、片方を読み込むときは片方はコメントアウトしてください。
なお、このマルチカラムモジュールをページに反映させるには、ページのbody要素に付加されているclassを編集する必要があります。モジュールのインポート後、3カラムにしたいページ内のbody要素を以下のように変更してください。
<body class="xxx double">
を
<body class="xxx multi">
に。
詳しく仕様を知りたい方は、Vicunaのカスタマイズページ内、レイアウトの変更方法を参照してください。
丈夫なデザイン
Ninja Skinでは、CSSの定義を無駄なくシンプルに、そして柔軟にと、チョ→ 考えてつくりました。このスキンがどれだけ柔軟で頑丈を示すために、次のような無茶なデザインを試してみます。
module.cssから
- eyeCatch short モジュールの読み込み
- eyeCatch Long モジュールの読み込み
- eyeCatch Mini モジュールの読み込み
- eyeCatch Header モジュールの読み込み
- Global Navi Style モジュールの読み込み
- Calendar Style モジュールの読み込み
- Multi Column Type2 モジュールの読み込み
の、ほぼ全てのモジュールを有効にした状態のページが以下になります。
まだ調整中なので、Firefox, IE, Operaでしか確認していませんが、これらのブラウザではどのモジュールもバッティングすることなく、綺麗に(実用的ではないですが)反映されていると思います。
ちなみに、何もモジュールを読み込まないもっともシンプルな状態は次のページで見られます。
このほかにも、全てのカラムレイアウトでサイドバーの位置入れ替えができます。これらと切り離された、色彩設定サブスキンとの組み合わせこそ、今出来る僕にとっての最高のスキンの形でした。Vicunaユーザーも、そうじゃない人も、サブスキンをいじって良いものが出来たら、どうか僕にお恵み下さい。(
このスキンは、以下のCMSツールで利用できます。
ここまで読んでくれた人、ありがとう！ そしてメリークリスマス。じゃあの。
追記
Ninja Skinでは、Coliss.comさんで以前紹介された 「[CSS]高さの異なるカラムを揃えるスタイルシート」というテクニックを利用したのですが、フラグメント識別子を使ったリンクを利用したときに、そこまでの内容物が ovetlow: hidden された大元のボックスの中に隠れ、下に巨大な余白(テクニックで使用しているpadding)が出現してしまうという不具合を見つけました。
不具合は以下のページで再現しました。
- 正常な状態: 高さを揃えたページ
以下は、ページ内のコメント部分に付加したフラグメント識別子(#comments)を利用した同一ページ
- 不具合のある状態: 高さを揃えたページ
一見別ページのように見えますが、CSSを切ればわかるとおり、2つは同一ページです。
何でこうなっちゃうの?
高さを揃えるテクニックでは、親ボックスにoverflow: hiddenを指定します。
フラグメント識別子へとページが移動する際、overflow の指定のあるボックスでスクロールを内部ボックスへと切り替え、overflow: hidden のボックスが強制的にスクロールされ、内容物が見えない領域に移動されてしまうのが原因だと思います。
どうにか対処できないかと考えているのですが、今のところ解決方法は見つかっていません。できればこのテクニックを利用したいので、何かわかった方がいましたらコメントを頂けると有難いです。
ダウンロードできるNinja Skinは、このテクニックを削除したものと差し替えました。一部他の箇所の調整と、各ページのコメントを大幅に修正しました。
- Newer: ライセンスフリーのアイコン配付サイト
- Older: CSS 脳内裁判
