ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
第10回 JavaScriptとCSS | gihyo.jp
こんにちは、太田です。前々回と前回はHTMLの操作について解説しました。今回は、CSSの操作を中心に解説していきます。 CSSとJavaScript JavaScriptからCSSを扱うとは、JavaScriptから要素に適用されているスタイルを変更して見た目を変化させる、ということを意味します。その具体的な方法にはいくつかの種類があります。 styleプロパティの操作 class名の操作 CSS自体の操作 では、styleプロパティの操作から順番に見ていきます。 styleプロパティの操作 要素のstyleプロパティを直接操作する方法は、その要素だけに影響するので1回あたりの処理コストは低く済むというメリットはあります。しかし、複数のプロパティの操作に加え、多くの要素のスタイルを変更する場合には、スタイルを変更するたびに描画への影響の計算が行われる（この計算をreflowと呼びます）ので
JavaScriptによるスタイルシート(CSS)の操作
スタイルシートには、CSSファイルに記述されたスタイルルールと、各タグに記述されたスタイル属性があります。スタイルルールは、タグ名やクラス属性やID属性などを使ったセレクタによって、適用されます。 そこで、JavaScriptを使って、スタイルシートに関する各種データを操作する方法を紹介します。 このプログラムは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。 スタイルシートは、document.styleSheets で取得できます。 ファイル毎に、配列として格納されています。 各スタイルシートには、スタイルルールの配列として格納されています。 スタイルルールは、セレクタとプロパティ＋値の形式に分かれて取得できます。
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
普通の検索ボックスを作りました - 最速チュパカブラ研究会
The JUI 2009 Returns で Paul が CSS Transforms をプッシュしていたので、それにつられてデモを一つ作ってみました。 http://gyu.que.jp/giftbox/google/ 見てのとおり、普通の検索ボックスです。 普通にクエリ入力できます 普通に検索結果を見られます 箱の中にまた箱があることもあります。 …という感じで、また3Dネタですが、単なる画像ではない「生きている」HTML要素がグリグリ画面上を動き回れるというのは、何か新しいことができるんじゃないかという可能性を感じます。Canvas のほうは環境マッピングとかやって見た目は派手でしたが、いずれ O3D やら 3D Canvas やらが普及するまでの「つなぎ」です（だから、ライブラリ化したりする気がおきなかったんですが） しかし、IFRAME を変形させながらネストしてもしっかりレン
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた(2日目) - latest log
若干修正しました。 コンディショナルセレクタ搭載してみました。 あー、良く考えたらコンディショナルな仕組みは必要なのかも。 レンダリングエンジンでスタイルを適用したり/しなかったり、代替スタイルを用意するって仕組みはあってもいいのかもしれない CSSハックは、ぐっちゃぐちゃなCSSになるのがアレだけど、バンドエイドとしては上手く機能しているもんね。 function autoexec() { var node = _query.tag("html")[0], cn = [node.className, "js"]; _ie && cn.push("ie ie" + _uaver); _mm.opera && cn.push("opera opera" + _uaver); _mm.gecko && cn.push("gecko"); _mm.firefox && cn.push("fx f
JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net
最終更新日 Sun, 19 Apr 2009 20:27:25 +0900 最後のコメント Mon, 14 Jul 2014 08:14:00 +0900 ブックマーク 先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。 ご参加頂いた皆様、ありがとうございました。 JavaScriptからCSSを扱う それ程難しくはないので、簡単にまとめておきます。 はまりがちな事 Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。 僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。 <style> #foo { background-c
大量に同じ画像を表示したいとき - os0x.blog
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
GM_addStyleの実装と最適化 - os0x.blog
GreasemonkeyのGM_addStyle関数は呼び出すたびにhead内にstyle要素を作る。 Greasemonkey 0.8.20080609.0のソースより。 function GM_addStyle(doc, css) { var head, style; head = doc.getElementsByTagName("head")[0]; if (!head) { return; } style = doc.createElement("style"); style.type = "text/css"; style.innerHTML = css; head.appendChild(style); } これは、はっきり言って効率が悪い。 補足:CSSをミスったときの影響が自分だけに留まるというメリットはある。 補足2:効率悪いと書いたけど、体感できるような話ではないと思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
