Home‎ > ‎WebDev‎ > ‎

CSS

Cascading Style Sheet = CSS についてのあれこれ

DreamweaverでWeb標準(XHTMLとCSSでサイト構築)より

http://blog.mag2.com/m/log/0000169311/108220592.html

今回は、clearfix ハック について、ちょっとだけ。
http://css-happylife.com/log/css-hack/000078.shtml

CSS3についてのセミナー資料
http://www.cybergarden.net/revolution/20070201/

装飾的定義をClass名に割り当てることの是非

http://www.akatsukinishisu.net/itazuragaki/html/i20070126.html
この記事には、ちょっとだけ否定的かも。

基本的な文書構造は、htmlのタグ付けで行うことに異議を唱える人はまれだと思う。
また、ページ構成やコンポーネントやモジュールのような構造にIDやClassを振るのもオッケーですね。
ここまでは文書構造のお話。

しかし、文書構造と装飾的定義を常に一致させようとすると、内容的には同じ物が入る、装飾的要素が少しだけ違うモジュールを別のClassとして扱わなければならないと言うことになるんじゃないの？
これは、DRYじゃないよなぁ。
そうでなければ、内容的に同じ物は常に同じ装飾的要素にしばられるか、文書構造中の位置によって装飾的要素が決まると言うことになる。
前者はあまりに柔軟性に欠けるし、後者はCSS内の定義が増えるし、依存関係や優先度をいちいち考慮しなければいけないので面倒。
(そういう指定の仕方そのものが駄目というのではなくて、全部そうしなくてはならないと縛るのが駄目だとおもう。)

なので、装飾的定義だけのClassは、補完的に使われるのであれば、別に定義されたほうが、CSS内の定義も少なくて済むしすっきりするように思う。

例えば、こういうこと。
<img class="photo floatRight" …/>
<img class="figure floatLeft …/>
<ul class="linkList floatRight">…</ul>
構造的な意味としては、タグのリスト。スタイルとしては、インライン要素。
まぁ、構造化のためのClassのスタイルを一部OverWriteする、汎用装飾Class的なイメージ。

単独で濫用されると気持ち悪いし、定義の数も少ない方が良いと思うけど、自由度を低くしすぎるのも考え物じゃないかなと。
Blogとかのシステムで、完全に固められるなら別にかまわないけど。

DreamweaverでWeb標準(XHTMLとCSSでサイト構築)より

http://blog.mag2.com/m/log/0000169311/108160391.html
（1）プリントアウトの際、ページが途切れてしまう。
　
　A4横幅は21cm。プリンタのマージンを左右2cmと考えると印刷可能な幅は17cm。
　1インチ=96ピクセルなので、17cmでは643ピクセルが印刷可能な横幅です。

（2）サイドバーを表示しているユーザーがいる
　
　ブラウザの左側のサイドバー（Windowsでは「エクスプローラバー」が正式名称）に、
　「お気に入り」を表示しているユーザーを想定すると、
　200〜250ピクセル程度を確保しておく必要があります。
　
IE6以下でmin-width, max-widthを実現するスクリプトもあります。
　CSS minimum and maximum sizes
　http://doxdesk.com/software/js/minmax.html


正式版完全対応! Internet Explorer 7 CSS攻略法

http://journal.mycom.co.jp/special/2007/ie7/
全18pに渡って、IE7における変更、修正点などについてまとめられている。
内容は、Firefox、IE6との比較、バグ回避方法、CSSハックにまで解説されており、IE7のCSSについては、これだけきちんと読んでおけばよいという感じ。

CSS勉強会というのが行われたらしい

http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting

勉強会のスライド

http://usrb.in/amachang/static/cssstudy/200701/
CSS勉強会のスライドだそうである。
前振りというかつかみが長い。^^;
内容は、下記がメイン。CSSというよりはjavascriptの話し。
  • JavascriptからCSSを操作する方法
  • Firebugをつかうとこんなに便利

スライド自体がhtml+javascript+cssでできているので、実際に実行できるサンプルが付いているのがよい。

考えない CSS

http://lowreal.net/2007/0117-css/pp.html?content.txt

まぁ、実際のCSSテストの話しは、その通りだと思う。テスト、テスト、テスト。
リロードツールは、参考になった。真面目に考えてみようかな。

参考になったこと
■リキッドレイアウトの注意点
  • どこを繰り返すか／フェイドアウトさせるか
  • 引き延ばしたときに違和感がでないか (普通出る)
  • 画面が小さい環境でどうなるか (まじむずい)
■クラス名の参考資料として
  • microformatsつかえるかも
とか、クラス名・ID名は何か考えておきたい。
まだ、これという方針たってない。

Wii + CSS = Wss ??

http://miniturbo.org/sample/presentation/wss/#(1)
WiiのOperaのお話。流してしまった。
スライドは、Slidyを使って作られている。
DHの資料は、おいらもSlidyつかったっけなぁ。

Pattern Driven CSS

http://d.hatena.ne.jp/ZIGOROu/20070118/1169089995

これ、やりたかったんだよなぁ。
ちゃんと読み込んで、自分なりに咀嚼して使っていけると良いな。

CSSセレクタ対応表

http://usrb.in/amachang/static/cssstudy/200701/haihu.html
http://usrb.in/amachang/static/cssstudy/200701/haihu2.html

CSSnite

http://kyosuke.jp/portfolio/seminar/2006-08cssnite/cssnite.html

リンクを辿ってて、めっけた資料。
CSSだけでなくて、Javascript、PhotoShopなどの作業効率化にも触れていて、うれしい。


サブページ (4): CSS3 CSSHacks CSSLayout CSSNaming
Comments