汎用CSS - tikeda's blog

先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画

[t32k]

- Tags: #webTips

[webmarksjp]

css

[drumsco]

はてなのCSSをいじる際に

[anhelo]

はてな汎用スタイルシートの構成

[ziguzagu]

命名規則

[retlet]

パーツごとに再利用可能なスタイル指定。参考に。

[fbis]

はてなの汎用CSS

[hiro_y]

CSSの構成方法、参考に。

[stilo]

機会無いけど、参考までに。

[denken]

「赤ラインの角丸ボックスは、利用シーンは定かじゃないので、.box-curve-rdといった形で見た目を現します。」←この命名規則は厳密にはダウトくさいけど、メリットのほうが大きいんで

[wacky]

はてな汎用スタイルシートの構成や命名規則について、はてなデザイナーid:tikeda氏が解説。

[another]

テケダさんが地味にえらすぎる。↓いや、xnissyさん、ここは素直に褒めてあげるべきところです。

[sst]

classの命名規則は「機能名＞見た目＞記号」といったような重み付け

[lovely]

カスタマイズの参考にぶくま

[akky_cc]

はてなの汎用CSS。参考に

[hando]

かしこい

[adramine]

後でローカルに落として、中身を見よう。

[disable]

これからもがんばってください！

[d4-1977]

どうやって、汎用させようか考え中だったので参考にしました

[xnissy]

１ユーザの勝手な感想としては、あるセレクタのデザインがどのファイルのどこで指定されているか調べるのが大変になった。