cssとjquery

質問

WEBデザインド素人です。
とんちんかんな質問だったらごめんなさい。

単刀直入に質問させていただきます。

div#likebox_container　.fbcomments,
div#likebox_container　.fb_iframe_widget,
div#likebox_container　.fb_iframe_widget[style],
div#likebox_container　.fb_iframe_widget　iframe[style],
div#likebox_container　.fbcomments　iframe[style],
div#likebox_container　.fb_iframe_widget　span{
　width: 100% !important;
}

以上のように一括設定したスタイルを、jquery にて、状況に応じて width の設定を替えられないものだろうか、、、と悪戦苦闘中でございます。
ピンと来た方もいらっしゃるかもしれませんが、とあるHTMLページに、自分のfacebookのタイムラインと『いいね！』を配置し、その横幅をレスポンシブにしようとした場合の設定方法（有名？）とのことでした。

確かに、上記スタイルを追加すると、気持ちいいくらい横幅がレスポンシブになってくれますが、ただ１点だけ気になることがあり、iphone5(width=320px)で表示した場合のみ、右側に変な余白が出来てしまいます。
（横幅が320px以上のandroidだと大丈夫とのことで、どうやらタイムライン表示部の横幅が292pxで、加えて両サイドのpadding？margin？が邪魔してズレテしまう、、、みたいです。 それはさておき、、、）

これを何とかしようと、２日ググってみましたが解決せず、じゃ最後の砦のjqueryで何とかしたいなと、そこでも色々調べてみましたが、上手く行かず、でした。

width: 100% !important

の部分を、iphone 判定の場合のみ

width: 320px

に変更できないのでしょうか？

$("div#likebox_container　.fbcomments").css("width","320px");
$("div#likebox_container　.fb_iframe_widget").css("width","320px");
$("div#likebox_container　.fb_iframe_widget[style]").css("width","320px");
$("div#likebox_container　.fb_iframe_widget　iframe[style]").css("width","320px");
$("div#likebox_container　.fbcomments　iframe[style]").css("width","320px");
$("div#likebox_container　.fb_iframe_widget　span").css("width","320px");

と動かしてみましたが、どうも上手く行きませんでした。というより無反応。。。

query にこだわってるわけではありませんが、そのCSSスクリプト内の数値をパラメータ化して可変にできるのなら、それでも良いのですが、、、聞いたことないので、どうしたものかと考えております。

何か妙案お持ちの方、あるいは小生の愚問を一蹴・叱責して頂ける方いらっしゃいましたら、ご教示頂けると幸いです。

よろしくお願いいたします。

※ 上記ソース内のブランク部には、分かりやすいようにと、全角スペースを使用しております。

回答No.1

ORUKA1951 · ベストアンサー

結果だけを求めて、適当と思われるソースをひっぱってきて・・
なんて最悪です。
$・・はSassの書き方ですよね。CSSもHTMLもその段階でSassまで飛躍しても役に立たないです。
jaquery、mediaqueryも混同されているような・・
さらに!importantの意味はごぞんじないと思われます。

レスポンシブデザインとは、CSS2.1の時代に存在した、media別スタイルシートの拡張で、端末のscreenの幅によってスタイルシートを切り替える手法です。
　その前提として、サイト自体はリキッドで製作してあることが前提と言っても良いでしょう。

1) まずブラウザ間の誤差をなくするためHTML4.01以降ではstrictを使用(XHTML1.1,HTML5にはstrictdかない)
2) DOCTYPEをブラウザが標準モードで動作するよう適切に記述する。
　　・・・これでブラウザ間の誤差はほとんど解決する。
3) HTMLには文書構造以外書かない。
　　・・・デザインに合わせてHTML書くとスタイルシートで困る。
4) それをスタイルシートを用いてリキッドで製作する。
　　・・・
たったこれだけです。必要なら
5) mediaqueryを使ってディスプレイサイズに合わせてスタイルを変更する。

mediaquery( http://www.w3.org/TR/css3-mediaqueries/ )は、media( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/media.html#media-types )の拡張です。
!importantは最重要宣言と言われ、
6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )
6.4.2 !important規則( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#important-rules )
　を読まれたら分かるように、示されたような用途に使用するものではありません。

単純にリキッドでデザインし、その上にmediaquery(jqueryじゃない)でスタイル鋪切り替えれば済む話です。

・つぎはぎではなく、ちゃんと基礎から順を追って身につけましょう。そうしないと応用はできません。それは、HTMLから必要なように見受けます。

お礼

そもそもHTML不慣れな私に対して、とある既存のサイトを作り直してほしいという依頼があり、ですが元ソースは頂けなかったので、見た目のデザインとそのサイトのレスポンシブ的な動き、あとはその表示サイトを右クリックしてソース表示させ、それを元に見よう見まねで書いておりました。
その中には、flexsliderやgoogleマップ、で今回問題になったfacebookプラグインとか、とまぁ私にしてみれば新しいことづくめでしたので、ご指摘の通り、それぞれの良いとこ取りをしながらのコーディングでした。

もう少し、HTMLなり、レスポンシブの基礎知識なり、mediaquery、jquery、、、それらをある程度理解したうえで構築しないと痛い目にあいますね。

ただあまり悠長に構えて勉強する時間がない事案だったため、今回はOKWaveに頼らさせていただきました。

まだ解決には至っておりませんが、一旦示させていただきます。

ありがとうございました。

補足

ORUKA1951 様

ご叱責ありがとうざいましたm(__)m
何もかもがおっしゃる通りで、HTMLすらままならないところに、レスポンシブなぞに手を出すからこのようなことになっているのは否定できません。申し訳ございません。

ただ、記載させて頂いた前半のソース(important宣言部分)は、適当ではございませんで、当方で直面している問題をググった結果の、行きついたソースでした。（そもそも他力本願なところでアウトなのかもしれませんが(汗)）

直面している問題というのは、facebookプラグインを、他のWEBページに載せたい場合、基本は固定幅でしか表現できないところを、如何にレスポンシブにするか、、、とググったら、こぞって紹介されている有名？な追加ソースのようでした。
（検索word：facebook プラグイン like box レスポンシブ）
お陰様で、facebook表示部の横幅は、見事レスポンシブになってくれはしましたが、ただ、iphoneだけどうも思うようにいかなくて、、、100% important! の記載を外し、プラグイン内の指定可能パラメータにある幅320pxを残してレスポンシブを外して動かしてみたら、きっちり320pxのiphoneでも表示が改善されました。
ただ320px固定だと、PCページではちょっと寂しいので、、、加えてfacebookプラグインだったため、細かいスタイル変更が効かなかったので、ではそこの切り替えをどうしようかと、悩んでおった次第にございます。

ゆえに、後半部のjquery部のソースは、、、当方の独自です。すみません。

ただ、同じような構造(divやclassを配置)で、色を替える程度の簡単なjqueryテストを実施したら、なんとなく希望通り色が変化していたので、あながち独自ソースは間違っていないようにも思えるのですが、OKURA1951様がおっしゃる通り、やはり、important をあまり理解していないせいでしょうかね。 (優先されて適用される、くらいにしか考えてませんでした(汗))

と、iphoneのレスポンシブ表示にこだわる必要が、実はあまりないので、ただ気になると他の作業が手に着かなくなる性格なもので、どうしてもなんとか解決したく、OKWaveに質問させて頂いた次第にございます。皆様におかれましては、目の毒でした。申し訳ございません。

mediaquery は初耳の単語でしたので、勉強してみたいと思います。

OKURA1951様、ご教示ありがとうございました。