[B! CSS] tskmryのブックマーク

ウノウラボ Unoh Labs: CSSを書くときに使っているツールの紹介

yamaokaです。今回は、ぼくが普段CSSを書くときに使っているツールを紹介します。 Firebug 入手先: Firebug :: Firefox Add-ons Firebug posted by (C)フォト蔵もはやJavaScriptの開発には欠かせなくなった感のあるFirebugですが、CSSを書くのにも使えます。ボックス要素を調査（inspect）、CSSを書き換えてレイアウトを考える参考にしたり、 HTMLを書き換えてid属性やclass属性を書き換えて適用するスタイルを変更した場合の変化を試してみたりします。 IE Develper Toolbar 入手先: Download details: Internet Explorer Developer Toolbar IE Developer Toolbar posted by (C)フォト蔵前述のFirebugと同

tskmry 2008/08/07

[ツール] [エディタ]

CSS

リンク

丸角・角丸CSSジェネレーター各種 - VIVABlog

簡単にサイトのイメージを変えてくれる丸角。その丸角CSSを生成してくれる便利なジェネレーターのまとめです。 Spiffy Box 有名どころですが、固定のみ。 Spiffy Corners こちらは可変対応。 CSS Rounded Box Generator 画像使用もの。 SitePoint Tools 画像使用。DIV入れ子多用してなくて、タグが綺麗なのでよさげ。 Sweet Rounded Corners ボーダー丸角。JavaScript使用。 RoundedCornr 普通の可変丸角の他に、グラデーション、ボーダー、丸角画像も生成できる。

tskmry 2008/04/02

CSS
角丸

リンク

画像とかの横にあるテキストを上下中央に

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。デモページ画像とかの横にあるテキストを上下中央にする。のデモページヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;

tskmry 2008/03/17

画像の横のテキストを中央縦揃え

CSS

リンク

hxxk.jp - CSS の記述ルール記事のまとめ

いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。それと、取り上げた記事は順不同です。書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お