Current style: TagBox by TagBox Table design based on the fresh TagBox style.
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
Free Online CSS Beautifier / Formatter - Styleneat
What does Styleneat do exactly? It organizes and standardizes your CSS - selectors, sub-selectors and properties - in a structure that makes it easier to define page areas and see how they relate to each other. So, for example, it turns this: #id1 { property: value; } #id1 .class1 { property: value; } #id1 .class1 a { property: value; property2: value2; property3: value3; } #id1 .class1 a span { p
スタイルシートをすっきりと見やすくしてくれる『styleneat』 | 100SHIKI
シンプルで素敵なツールだったのでご紹介。 styleneatはCSSファイルを見やすく整形してくれるツールだ。 これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。 またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。 スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか。
インストール不要！Web制作者必見のCSS解析ツール
「優れたCSSレイアウトのマークアップを研究したい」「制作途中のWebページの表示不具合の原因を探りたい」――そんなときに使えるツールといえば「Firebug」や「Web Developer」がおなじみだ。これらのツールはCSSや（X）HTMLの確認だけでなく、その場で編集したり、JavaScriptのデバッグもできるスグレモノ。だが、もっと最低限の機能だけを手軽に使いたい、というケースもあるだろう。 （X）HTMLの構造やCSSのプロパティのチェックに特化したシンプルなツールが「XRAY」だ。Webブラウザーに登録して使うJavaScriptブックマークレットのXRAYは、アドオンをインストールする必要もなく、機能が絞られている分、動作も軽快だ。 事前準備は、作者・Westcivのページにアクセスし、「XRAY」と書かれたボタンをブックマークに登録するだけ。FirefoxやSafariな
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
CSS Gradient Text - by Web Designer Wall
jQuery prepend version Note: in this sample the <span> tag is prepended by jQuery (it is not in the source code). Apply on real design See, it is very practical. Try it on your design today. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, i
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla
作業効率を高めるDreamweaverの小技---目次：ITpro
制作会社に身を置きながら、テクニカルライターとして執筆をしている筆者が，リファレンスやチュートリアルなどの執筆を通して細かい機能を探る中でひらめいた，「日々の作業効率を高めるDreamweaverの小技」をご紹介します。 ・第1回 ひきついだサイトはdivでいっぱい！ ・第2回 特定の要素（タグ）を削除したい ・第3回 マークアップの高速化について考える（1) ・第4回 マークアップの高速化について考える（2) ・第5回 環境設定を見直そう（1） ・第6回 環境設定を見直そう（2） ・第7回 環境設定を見直そう（3） ・第8回 Office書類の活用 ・第9回 Dreamweaver CS3は使えるのか？
Pushpin Header
What is this? Pushpin Header Technique - Updated 3/20/2006 Shopper Name First Name Last Name User ID Status C2C Fishing John Doe C2C Fishing Enabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone Jane Joe X2X Guppy Disabled X2X Someone
colgroup / col 要素を活用してみる | WWW WATCH
table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 （縦方向） のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で
Stu Nicholls | CSS PLAY | CSS scrolling tables
Information If you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content. Method #1 This uses two outer containing divs and a single table. Internet Explorer has a scrolling 'caption' whereas Firefox has this fixed along with the column headings. Opera fails at the moment but I am
Cody Lindley | Front-end/Client-side/JavaScript Engineer | Boise,Idaho
Cody Lindley is a front-end/JavaScript developer and recovering Flash developer. He has an extensive background working professionally (25+ years) with HTML, CSS, JavaScript, and client-side performance techniques as it pertains to web development. If he is not wielding client-side code he is likely toying with interface/interaction design, Design Systems, and Component UI systems. When not sittin
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
AJAXを使った素晴らしいCSSフォームの47のサンプル | コリス
noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TableとCSSいろいろ - DesignWalker
http://www.designwalker.com/2009/01/table.html
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
ウェブデザイン・ギャラリーサイトまとめ - DesignWalker
CSS基本解説