CSS 作法

ブログのまとめ


5/15　追加
忘れていましたが、自分なりには、csstidyを使って、整形すればいいか。
とか、考えて、、、

cssの整形するやつおいているので、

いろいろ考えても、結局構想通りに行動が伴わない　私似の人には、いいかも。


スタイルシートは、どんな書き方をしていけばいいのか、表示の仕方は、たくさんに資料はあるんだけれど、手本になるようなものは、あるのだろうか？
mozilla.org content.cssでは、プロパティの出現順序は、以下のように、ページ先頭に表記されている。

他人の書いたCSS（例えば、movabletype)などのCSSを見るときには、全体の構成や、命名規則を呑みこむまでは、結構面倒で、特に、ブロックを装飾用に使っている場合などは、複製を作って、ブロックにボーダーをつけて、何とかやり始めることもある。

外部javascriptを利用するのにあわせて、CSSも増えてくるので、接頭辞などをつけたクラスやidの命名規則もあったほうがいいと思っている。

自分の好きなようにやればいいじゃんといわれれば、それでしまいなのですが、人様の様子が気になるので、備忘にメモっておく事にします。

mozilla

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup )
*/
/*
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/

w3c ホームページ

だいたい以下の順番で統一されているようだ。

@import url("home-import.css");

/* Copyright 1997-2005 W3C (MIT, ERCIM, Keio). All Rights Reserved.
The following software licensing rules apply:
http://www.w3.org/Consortium/Legal/copyright-software */

/* $Id: home.css,v 2.22 2005/05/16 15:59:14 slesch Exp $ */

/* ****************** body *************** */
h2.newsHeading {
background
color
border
border-top
width
font-weight
font-size
text-align
margin-top
padding
}

あるインストール型ブログの例

selector
{
float
overflow
width
margin
border
padding
text-align
}

プロパティの出現順序は、みんなそれぞれに、揃えて書いていることがわかる。

W3Cで公開しているサンプルスタイルシート

Appendix A. A sample style sheet for HTML 4.0にhtml4.0のベーシックスタイルシートが公開されている。スタイルシートの、分割などの時に、どのプロパティを、どうするか、参考になりそうだ。

で、どうしよう。

スタイル編集をする場合、ファイルが、長々としたものになっていて、500行超えると、スクロールは、ほぼあのあたりだ。というカンで、テキストエリアを操作するようになってしまう。
WEB上だけの操作では、結構つらい。Movabletypeも、Dreamweaber※ローカルエディタから操作できたほうがやっぱり便利。あの、セレクタが見つからないストレス感は、嫌いだ。

自分的には、W3Cのホームページのように、基本的な部分は、ベーシックなスタイルシートをインポートして利用するのが、いいのかもしれない。
　YUIなどを使って、ドキュメントの作成を簡単に済ませようという場合も今後はあるだろう。スタイルも、接頭辞つけたほうがいいのかな、、、。

プロパティの指定は、CSSの場合は、わたし手入力で行っているので、バリデーションでもよく怒られるが、background を指定しておいて、colorを明示しないのはおかしい。ということがある。
color:inherit;書くのがいやな人間が、順番に言及していいのでしょうか？

何かいい方法があるんだろうか?


※　ローカルエディタで、Movabletype　をコントロールする方法。
easyway

Movabletype によってパブリッシュされたファイルをを変更しても、再構築したときには、元のモクアミになると思います。リンクするファイルを指定して、そのファイルを編集する事で、変更が維持できるようになりますから、ローカルからの操作をしたい人は、やってみてください。

css の記述について、提案しているサイトを見つけた。

http://www.akiyan.com/css_beautifier

このページでは、プロパティごとに、スタイルの指定を書き換えてくれるサービスを行っている。

http://flumpcakes.co.uk/css/optimiser/ cssの整形サービスを行っているところもあるようだ。

csstidy というWEBで整形可能な、スクリプトも公開されている。
このサイトで行っているサービスは、今現在(20061122)サービスがうまく動いていないようだ。

調べてみると、気にしている人はいるものだ。

TOP