JavascriptでCSSを、 a.style.width = x+"px"; b.style.height = y+"px"; . . のような感じで動的に定義した時に、適用済みのstyle一覧を、 #a { wi…
JavascriptでCSSを、 a.style.width = x+"px"; b.style.height = y+"px"; . . のような感じで動的に定義した時に、適用済みのstyle一覧を、 #a { width: 250px; . . } #b { height: 150px; . . } のような標準的なCSSのフォーマットでtextarea内に表示できないかと考えています。どなたか実現方法をご存知の方はいらっしゃいませんか。 特に、a, bなどのidが10個以上になり、それぞれ複数のスタイル（font-size, width, heightなど）が定義されている場合でも、問題なく実現できる方法が望ましいです。
CSSだけでイメージマップを作る有用サンプル:phpspot開発日誌
CSS Image Maps - Flickr-like Technique? Below is a sample image map that's built entirely using CSS and XHTML. CSSだけでイメージマップを作る有用サンプル。 画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。 JavaScript を一切使っておらず、CSSだけで実現されているところがすごいですね。 JavaScript が要らず、次のような綺麗なHTMLで実現できるところも嬉しいですね。 実装も簡単そうです。 <dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#"><span>Here's my 17" M
[暴満館] JavaScriptによるCSSの操作
また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 ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
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
固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
miniturbo::Blog background-position のサンプル
数ヶ月前に、習作として作っていたbackground-position のサンプルがあったのを思い出したので、ここで書いてみます。 background-position のサンプルページ で、このサンプルをなんのために作ったのかというと、background-positionをパーセント指定したときに、その位置から背景画像が描画されるのではなく、background-positionを指定した要素のその位置と背景画像のその位置が同じ位置になるという、てんぽさんの記事に影響を受けたためだと思います。 サンプルの三つ目にある「background-position: 25% 75%;」の指定がわかりやすいです。ボックスの左から25%、上から75%の位置と、背景画像の左から25%、上から75%の位置が重なっていると思います（わかりやすいようにドットをつけました）。 間違っている解説サイトが多い
stu nicholls | CSS PLaY | experiments with cascading style sheets | home page
What it's all about... "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents." The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dynamic Drive CSS Library- Practical CSS codes and examples