引き続き、jQueryの学習を進めるのであった。

道のりは遠いような近いような感じですが、本日も進みます。
今日はCSSへのアクセスと操作です。

■CSSメソッド
CSSへアクセスするには、専用のメソッドを使用する。
それがCSSメソッド。

パラメーターの数で動作が違うので要注意!!

• パラメーターが1つの場合
  css(“プロパティ”)で対象プロパティの値を読み込む
  $(“p”).css(“color”)

  pタグのcolorの値を取得

• パラメーターが2つの場合
  css(“プロパティ”,”値”)でスタイルシートの値を設定する
  $(“p”).css(“color”,”#000000″)

■プロパティを一括で書き換える

cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。

この様に複数のプロパティを同時に操作する場合、以下の記述で対応できる。

ちょっとCSSのような、じゃ無いような不思議なcodeですね(汗
codeの冗長化は避けたいので必須ですね。

■クラスの追加/削除

クラスの追加はaddClass()メソッド、削除はremoveClass()メソッドを使用する。

ex.class=”sample”をpタグに追加する

ex.class=”sample”をpタグから削除する

■スタイルシートの交互切替

スタイルシートの切替を交互に行うtoggleClass()メソッドを使用する。
ex.通常⇒heightクラス⇒通常

ふむふむ。

1. CSSへのアクセスはCSSメソッド
2. ＣSSクラスの追加=addClass()メソッド
3. CSSクラスの削除=removeClass()メソッド
4. CSSクラスの交互切替=toggleClass()メソッド

よっしゃ。ちぃ覚えた!!（違

どうでもいいのですが、
$(“p”) ←ヨダレ垂らしているみたいですねwww

久しぶりにWebデザインの作業をしてみると、やはりInternet Explorerに泣かされる展開にはまりました。

今更な気もしていますが、CSSの実装バグについて調査しています。

『CSSバグ辞典スレッド』の要約：Internet Explorer (Windows) CSSバグリスト

結局は、トラブルに遭遇したら回避するしか学習法としてはない気がしています(汗
ただ、今回のblogのリニューアルで1つ学びました。

paddingを使ってデザインするな!!

グリッドデザインで構成した場合に、width＋paddingを組み合わせると
IEの時だけ表示が崩れ、意図したとおりに配置されません。

FirefoxとSafari、Operaの場合には問題がありませんが、IEの時だけ崩れます。
Firefoxで作業していて、この点をすっかり忘れていた場合に痛い目を見ます。
( 痛い目をみました>< )

CSSに準拠して書いているはずなのに、このようなバグが出るのはIEの使用によるとの事です。

コンニャロー。

修正して、w3cのCSS検証サービスで確認しましたが問題ない状態まで持って来れたのでヨシとします。
一応、IE,Firefox,Safari,Operaで確認を取っています。

これ全てを一瞬で確認できれば便利なんですがね。

今日もこれからGoogle発のブラウザが発表されるようです。
ブラウザ戦争はまだまだ激化していく模様です。

そんな時、一社だけCSSにバグがあるって非常に・・・