サポートサイトのオープンのエントリーからまったく書いてないという現実。
いつまで新年の挨拶をしているのか。。。ブログ読んでます!って話を聞くと心が痛い今日この頃。
そして、PC漁ってたらとても懐かしいモノが出てきたので、記念上げ!
これは2006年頃に運営してた個人サイトなんで、デジパ入る前くらいのです。
CSSも覚え始めな感じが、infoの文言から伝わってきますね~。
IE7で崩れまくってるとか、もう笑うしかない(笑)
ちなみに、デザインやイラストもボクですから!
こんなデザインだから鷹野さんに女性っぽい言われるんですね・・・
何気に、このデザイン昔のエントリーでグローバルナビをサンプルに使ってたり。
さて、前置きはこのくらいで、主題に。
Twitterでブログのネタが無いってぼやいてたら、RedLine Magazineの中の人がプロパティ(宣言)の書く順番が気になるからそれネタにしてって事で、書かせていただきます。
プロパティの順序は別に決まっているわけでもなく、絶対こうしろってのは無いので個々の好きなように書いていただくのがいいような感じもしますが、少なくとも自分ルールは決めておくのがいいと思います。
まぁ例えば以下のような感じでしょうか。
.hoge1 { float: left; width: 350px; margin: 0 0 10px; padding: 10px; border: 1px solid #ccc; }
こんな感じで書いてるのに、別の規則集合だと、、、
.hoge2 { width: 350px; padding: 10px; margin: 0 0px 10px 0; border: 1px solid #ccc; float: left; }
こんな感じで書いてしまったら、美しくない!
統一性が無いですし、0の場合単位を省略するならしろよ!って思われてしまいます。
そんなのを避けるために自分ルールを作ると、同じプロパティの重複を防げたり見やすくなったり美しくなったりといい事ばかりです。
で、まぁ自分ルールは、Mozillaの順序がベースだと思うんですけど、あんまり覚えてないっす。
で、Mozillaのを見ながら自分の順番に並び替えてみたらこうなりました。
- * display
- * position
- * float
- * clear
- * vertical-align
- * width
- * height
- * margin
- * padding
- * background
- * border
- * list-style
- * color
- * font
- * text-decoration
- * text-align
- * white-space
- * other text
- * content
なんか、vertical-alignとか最初の方に書きたいらしいです。
zoomとか使う場合は最初に書くのが多いかも。
でも現実見るとborderから下の順序は意識してないかも。
ちなみにborderとbackgroundの値の並びは、
.hoge { background: #fff url(../img/bg.gif) no-repeat left bottom; border: 1px solid #ffff; }
っていう感じで書いてます。
何の参考になるかわかりませんけど、ボクの場合はこんな感じです。
(何か昔書いた気もするけどいいか)