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のタイムラインと『いいね!』を配置し、その横幅をレスポンシブにしようとした場合の設定方法(有名?)とのことでした。
確かに、上記スタイルを追加すると、気持ちいいくらい横幅がレスポンシブになってくれますが、ただ1点だけ気になることがあり、iphone5(width=320px)で表示した場合のみ、右側に変な余白が出来てしまいます。
(横幅が320px以上のandroidだと大丈夫とのことで、どうやらタイムライン表示部の横幅が292pxで、加えて両サイドのpadding?margin?が邪魔してズレテしまう、、、みたいです。 それはさておき、、、)
これを何とかしようと、2日ググってみましたが解決せず、じゃ最後の砦の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ベストアンサー
- 回答日時:
結果だけを求めて、適当と思われるソースをひっぱってきて・・
なんて最悪です。
$・・は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/CSS … )の拡張です。
!importantは最重要宣言と言われ、
6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6.4.2 !important規則( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
を読まれたら分かるように、示されたような用途に使用するものではありません。
単純にリキッドでデザインし、その上にmediaquery(jqueryじゃない)でスタイル鋪切り替えれば済む話です。
・つぎはぎではなく、ちゃんと基礎から順を追って身につけましょう。そうしないと応用はできません。それは、HTMLから必要なように見受けます。
この回答への補足
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様、ご教示ありがとうございました。
そもそもHTML不慣れな私に対して、とある既存のサイトを作り直してほしいという依頼があり、ですが元ソースは頂けなかったので、見た目のデザインとそのサイトのレスポンシブ的な動き、あとはその表示サイトを右クリックしてソース表示させ、それを元に見よう見まねで書いておりました。
その中には、flexsliderやgoogleマップ、で今回問題になったfacebookプラグインとか、とまぁ私にしてみれば新しいことづくめでしたので、ご指摘の通り、それぞれの良いとこ取りをしながらのコーディングでした。
もう少し、HTMLなり、レスポンシブの基礎知識なり、mediaquery、jquery、、、それらをある程度理解したうえで構築しないと痛い目にあいますね。
ただあまり悠長に構えて勉強する時間がない事案だったため、今回はOKWaveに頼らさせていただきました。
まだ解決には至っておりませんが、一旦示させていただきます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?↑
-
テーブルの行を折りたたみたい...
-
htmlの文字が縦書きになる
-
HTML入門でもう躓いてしまった。
-
アコーディオンメニューが思う...
-
goo は、放置?
-
パソコンのマイク機能
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
Duolingo のソースコードの名前...
-
、URL化させるにはどうしたらい...
-
CSSについて教えてください。 ...
-
HTMLで画像をポップアップで表...
-
HTMLです 画像のように表せます...
-
12月のカレンダーを表すHTMLを...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
CSSのホバーエフェクト
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報