キーワード検索「セレクタ」
1513
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 そもそもCSSセレクタが何かというと、スタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 ieが対応しきれていないCSS3のセレクタもありますが、IE6〜8でもCSS3セレクタが利...
778
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてこと...
759
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下...
843
続・ハイパフォーマンスWebサイトを呼んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。セレクタは右から左に解釈されるこれは正直知らなくて、結構衝撃でした。#foo .bar {}これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#foo...
631
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値と...
583
札幌でホームページ制作をする社会人ハムの勉強ブログ。 JavaScriptやjQuery、XHTMLやCSS、その他思ったことなどについてなどを気ままに書きます。jQueryのpluginなども公開中。jQueryplugin自作pluginJavaScript(X)HTMLCSSSEO日記プロフWebコンWebサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxの...
403
jQueryを高速化するためのTipsがまとまっていましたよ。jsPerfなるツールを使ってちゃんと計測している点が素晴らしいですよ。 jQuery Proven Performance Tips & Tricks View more presentations from Addy Osmani 全部で10個（+Bonus）紹介されていますが、どれもサンプルコードがわかりやすいのでおすすめです。 ...
408
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰセレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。で、先日サーバサイドJavaScript...
340
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点...
354
![[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-equalbox.html)
Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfs...
327
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使...
363
HTMLテンプレートを作るのは簡単？赤の他人が作ったHTMLテンプレートを簡単に編集できるか？新人に数千ページのサイトのコーディングを任せられるか？HTML, CSS, JavaScriptを覚えればコーディングは楽勝？そこまで簡単じゃないかもしんないブラウザのバグ？ まぁそれもありますCascadingという仕組みは素敵ですが あっという間にコードが大変なことになりますCSSには素敵なセレクタが...
265
![14のjQueryベストプラクティクス[to-R]](http://capture.heartrails.com/200x130?http://blog.webcreativepark.net/2010/09/13-104636.html)
原文:14 Helpful jQuery Tricks, Notes, and Best Practices良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しく原文を参照してください。1.メソッドはjQueryオブジェクトを返すほとんどのメソッドがjQueryオブジェクトを返すのが重要です。これにより次のようなメソッドチェーンが可能になっています。$someDiv ....
199
モバイルデバイスのレンダリングエンジンとして事実上の標準になっているWebkitに特化し、iOSやAndroidに最適化したJavaScriptフレームワークの「jqMobi」が、正規版となる1.0を公開しました。 jqMobiは、jQuery Mobileと同様にHTML5をベースにモバイルアプリケーションを開発できるJavaScriptフレームワークのコアモジュール。jQueryと同様の文法を...
215
これでなくなった。jQueryを使わない理由が。DHTMLを利用する全ての人、必携。特にHTMLやCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。 まえがき - John Resig はじめにjQueryの基礎HTMLページでjQueryライブラリコードをインクルードするページの読み込みが完了する前にjQuery/JavaScriptコードを実行す...
178
jQuery でスクレイピングできたらセレクタ使えるし便利かなーと思ったりしたんですが、Rhino と env-js を使うと超簡単にできたのでレポートしてみます。Rhino と env-js って何ぞい？Rhino ってのは Java で書かれた JavaScript エンジンです。Rhino を使うとコマンドラインから JavaScript を実行できます。Rhino には DOM が無いので...
177
CSS, JavaScript CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。先に書いておくと、この元ネタのMozillaの記事には、in the Mozilla UIとあ...
120
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスを...
97
![[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css-centered-heading-horizontal-line-by-impressivewebs.html)
紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像...
109
08:02 | jQueryヘビーなアプリケーションの問題点と、MVCによる構造化の必要性jQueryは、ブラウザ上で動くJSアプリケーションの開発生産性を劇的に向上させました。DOM操作による動的なページ書き換え処理などは、セレクタを使ってちょろっとコードを書くだけで、ほんの数行で記述できてしまいます。しかし、この方法の延長で、大規模なJSアプリケーションを構築することは果たして現実的でしょうか...
