?D of K
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 ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
今まで 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
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! 1つのファイルに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"
Rater ? Robarov: Webdesign, zoekmachine optimalisatie, hosting 超クールなCSSデザインされたUIのレーティングシステムのサンプル。 サンプルを使って次のようなカッコいいレーティングシステムを実装することができます。 デザインその1 デザインその2 いずれも、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"
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
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo!やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
前回はクロスサイト・スクリプティングのぜい弱性を突く攻撃の対策としてのHTMLエンコードの有効性を述べた。ただ,HTMLエンコードだけではクロスサイト・スクリプティング攻撃を完全に防御することはできない。そこで今回は,HTMLエンコードで対処できないタイプのクロスサイト・スクリプティング攻撃の手口と,その対策について解説する。 HTMLエンコードで対処できない攻撃には,次のようなものがある。 タグ文字の入力を許容している場合(Webメール,ブログなど) CSS(カスケーディング・スタイルシート)の入力を許容している場合(ブログなど) 文字コードを明示していないケースでUTF-7文字コードによるクロスサイト・スクリプティング <SCRIPT>の内容を動的に生成している場合 AタグなどのURLを動的に生成している場合注) 以下では,HTMLタグやCSSの入力を許容している場合と,文字コードを明
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい25のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
Flash&FlexからYahooのウェブAPIを利用できる公式ライブラリ「Yahoo! AS3 API ... 次の記事 ≫:サイトに使えるCSSベースのクールなメニューナビゲーション8個 lalit dot lab Javascript code to Detect available Fonts using Javascript and CSS. I wrote a Javascript code which can be used to guess if a particular font is present in a machine. JavaScriptでマシンに特定のフォントがインストールされているか知る方法。 Firefox 2 , IE6, Opera9/10 でテスト済みらしいです。 ダウンロード可能な形では提供されていませんが、ソースを見ると、Detectorという
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Smashing Magazine Blog Archive Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby… Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめが紹介されてます。 チートシートって印刷して貼っておくとほんとに便利でお世話になってます。 Ajax関連 What’s Ajax? Cheat Sheet - PDF Prototype Dissected - Cheat Sheet PNG scriptaculous Combination Effects - Cheat Sheet - PDF Apache関連 Apache Cheat Sheet Apache 1.3 Quick Reference Card - free quick reference cards - PDF htacc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く