テーブルに指定するといいCSS

テーブル関連をネットで調べているうちに、よさげな記事を見つけた。

「understandard」さんというブログには、テーブルに指定するとかなりいいCSSが記述してありました。

下記がそれ。理由は「understandard」さんのブログに書いてあります。

かなり便利そうなので、プロパティの記述順番などカスタムして、
今後使用する可能性大です。

table {
width:auto;
border-spacing:0;
border-collapse:separate;
/border-collapse:collapse; /* ie6,7 */
border-right:1px solid #333333;
border-bottom:1px solid #333333;
table-layout:fixed;
word-break:break-all;
word-wrap:break-word;
}

th, td {
border-top:1px solid #333333;
border-left:1px solid #333333;
padding:5px;
}

HTML5、CSS3

HTML5、CSS3による第2回 コーディング コンテスト(現在は終了)というのがあったみたいで、デザインをダウンロードしてやってみようかなと思い挑戦。
結果、挫折ｗ。
HTML5 のタグは別に問題ないですがCSS3を主体にするとなると、
むちゃくちゃダルい事に気づいた。
背景指定のRGBAとかがいい例。
色の指定は16進数でやっていたので、それを慣れないRGB指定で記述しなければならなかった。

Dreamweaverのコードヒント機能がCSS3に対応していないのが、拍車をかけた。
色の細かいRGBなんて、おぼえてねーお。
#ff0000とかにならんかねえ。

気が向いたら、再開するかも。

ヌルぽなオイラには出来なかったと言うわけですよｗ

あと、CSS3がまだ正式勧告されてないせいなんだけども、CSS3を使用する場合にプロパティの前に接頭辞のベンダープリフィックスをつけなきゃ いけないのもめんどいのだ。

「-moz-」とか｢-webkit-｣とかさあ。

今はCSS3のオイシイ、プロパティをつまみ食いするぐらい。

CS5とかはHTML5とかCSS3に対応してるといいなあ。
Webとかの記事や、サンプルとかしかあまりみてないので、
本とかほしいなあ。買うか。
CS5とかは個人では・・・無理ｗ。
もっと勉強しないとやべえ。

改行をコントロールするword-wrapプロパティ

昔はword-breakするのに、jsを仕様したものですが、今では、「word-wrap: break-word;」が主流らしい。divで検証してみた。

例

<div class="word_break">
    abc048779
</div>

.word_break {
  word-wrap: break-word;
}

Win IE6、IE7、IE8、Firefox 3.6、Safari 5、Opera10.60。
Mac Firefox 3.6、Safari 5、Opera10.60。

以上で英数字の強制改行を確認。

便利になったものですね。

CSS Sprite Generator、オンラインCSS自動整形

CSS　スプライトを自動で作成(画像とCSSを出力)してくれるサイトがあったので、記載。
数あるSprite Generatorサイトの中でも、一番使いやすいかな。

http://ja.spritegen.website-performance.org/

んで、出力されたCSSの整形は以下のサイトで。

http://www.akiyan.com/css_beautifier

まさに黄金パターンかと。