?D of K
はい！ こんにちは！！！！！ 今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね！ これだよ！ <style>*{position:relative}</style><table><input></table> → サンプル (IEだとブラウザが終了しちゃうよ！ 注意してね！) IE6とかIE6のコンポーネントブラウザだと確実に落ちちゃうみたいだね！ IE7は確認してないけど！ tableとかtrの直下に、inputとかselectがあって、 そのあたりにcssの全称セレクタでposition:relativeがあたっているとダメなかんじかな！ ちなみにinputにstyleで直接relativeあてても落ちなかったよ！ なにこれ！ よくわかんないけど面白いね…！ FirefoxとかOpera大好きっ子は、 これをたくさんバラまいてIEのシェアをどんどん下げちゃえばいいと思うよ！
使われていないCSSセレクタを発見することが可能なFireFox拡張「Dust-Me Selectors」 2007年08月03日- Dust-Me Selectors Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. 使われていないCSSセレクタを発見することが可能なFireFox拡張「Dust-Me Selectors」。 インストールするとFirefoxの右下に次のようなアイコンが表示されます。 クリックすると、次のように、表示中のページで使われていないCSSセレクタを表示してくれます。 (ファイル名、行数も表示してくれます) サイトを作っていると、CSSが次々と肥大化して使わないCSSもそのまま、ということがありますが、このツールを使えば不要なC
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
『CSSバグ辞典スレッド』の要約 ここは、2ちゃんねるweb制作管理板内のCSS/DHTMLのバグを扱うスレッドで挙げられた、各ユーザエージェントのCSSやDHTMLの実装上のバグをまとめているサイトです。 更新履歴 WinIE171, 172、NN031、Opera091を追加。WinIE151を修正。（2004-11-29） WinIE169, 170、Moz085を追加。WinIE030, 039、Moz070、Opera048を修正。（2004-10-09） NN029, NN030、Moz084を追加。Moz033を修正。（2004-08-23） WinIE168、Moz082, 083を追加。WinIE022, 166を修正。（2004-08-08） Moz081、Opera090、Safari022, 023を追加。（2004-07-26） 以前の履歴 本拠地スレッド CSS
CSSははじめこそきちんと定義しながら進めるのだが、修正が重なったり、日々の運用の中で徐々に肥大化していく。HTMLと同じで多少間違っていたり、不要な情報が紛れ込んでいてもそれなりに表示されるので気にならないのだ。 だが不要な情報が紛れ込んでいると、ちょっとした修正が全く無関係と思われる場所に影響を及ぼしたり、管理しきれなくなってくる。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Redundancy Checker、不要なCSSチェッカーだ。 CSS Redundancy CheckerはRubyで作られている、CUIベースで動作するアプリケーションだ。また、gemでhpricotをインストールする必要がある。そのため、若干敷居が高いかも知れないが、便利なアプリケーションだと思うのでぜひトライしてみて欲しい。 使い方は簡単で、CSSファイル
今まで var element = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(element); if (ie) { var sheet = element.styleSheet; } else { var sheet = element.sheet; } みたいにやっていた。 ところが dojo のソースを眺めていたら IE には createStyleSheet という関数があるみたい。 createStyleSheet を使うとこうなる。 if (ie) { var sheet = document.createStyleSheet(); } else { var element = document.createElement('style'); doc
2007年05月11日18:45 カテゴリiTech あなたのページを最速にする14の掟 人気Webサイトの管理人、必読。 紹介ページ: 14 rules for fast web pages (Skrentablog) PPTのスライド: http://www.web2expo.com/presentations/webex2007/souders_steve.ppt 実は、これらはYahoo!の"Chief Performance Yahoo!"(本当にそういう役職名)であるSteve Soudersによる以下のblog entriesをまとめたもの。 Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests Performance Research, Part 2:
Zoom Zoom Zoom Consectetuer adipiscing elit. Curabitur viverra ultrices ante. Aliquam nec lectus. ボタンでサイトの文字サイズを自由に変更するサンプル。 右上のボタンを押すことで文字サイズを変更できます。ニュースサイトでは標準実装されている機能ですが、自分のサイトにも埋め込みたい場合、このサンプルが応用できそう。 switcher.js というファイルを読み込んで表示しているようで、ボタンを押した際にスタイルシートをJavaScriptで書き換えているようです。 もっと良いサンプルは作れそうですが、手早く改造して利用する分にはこれでもよいかもしれませんね。
My experiments with .Net : Combine CSS with JS and make it into a single download! １つのファイルにJavaScriptとCSSをまとめて記述する方法。 まず、test.jscss というファイルを作って、次のように内容を記述します。 <!-- /* function t(){alert('test');} <!-- */ <!-- body { background-color: Aqua; } そして、次のようにJavaScriptとCSSを呼び出す際に先ほど作成したtest.jscssを指定することができます。 <html> <link type="text/css" rel="stylesheet" href="test.jscss" /> <script type="text/javascript"
Sky CSS Tool ・ky CSSallows you to create CSS classes almost without using manuscript code. ブラウザ上で簡単にCSSを作成できる「Sky CSS Tool」。 このツールを使えば、CSSのプロパティを詳しく覚えていなくても簡単にCSSを組み立てることが出来ます。 CSSを少ししっていれば、スピーディかつ、直感的に分かりやすい方法でCSSを完成させられるでしょう。 使い方は、(1) 左のボックスから、編集したいCSSのセレクタ(body等)を選択します。 そして、(2) 右上のFontやTextをクリックして編集したいプロパティを選択します。すると、(3) 右下のウィンドウに設定ボックスが現れるので個別に設定していきます。 この流れでプロパティを設定していき、最後に右上の方にある「CSS Code」をク
CSS HTML Converter / Stuff / Andy Langton's Website CSSとHTMLを相互に書き換えることができる「CSS HTML Converter」。 CSS HTML Converter を使って、CSSでのスタイル指定をHTMLに変換したり、逆にHTMLの<font>指定の記述をCSSによる記述に変換することが出来ます。 次がその変換例) HTMLのFONTタグをCSSに変換できてます。 CSSを知っている人には無縁のツールかもしれませんが、HTMLを知っていてCSSはこれからという人にはもってこいのツールなんではないでしょうか。 これからCSSを学ぼうという人には良いツールかもしれませんね。
Rater ? Robarov: Webdesign, zoekmachine optimalisatie, hosting 超クールなCSSデザインされたUIのレーティングシステムのサンプル。 サンプルを使って次のようなカッコいいレーティングシステムを実装することができます。 デザインその１ デザインその２ いずれも、CSSによってデザインされており、HTMLは次のようにシンプル。 <ul id="rating"> <li id="r1"><a href="#1" title="give this site a 1"><span>Abysmal</span></a></li> <li id="r2"><a href="#2" title="give this site a 2"><span>Terrible</span></a></li> <li id="r3"><a href="#3"
Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更
70 Expert Ideas For Better CSS Coding | Smashing Magazine CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. CSSコーディングの際に役立つエキスパートによる７０の方法。 最初にＣＳＳをリセットせよ、とか、デバッグ用 ( .floatLeft, .floatRight クラス等 )のクラスを定義しよう、といった有用なテクニックが７０も記述されて
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS＆JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ＆ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く