- 締切済み
レスポンシブデザインのCSSについて質問です。
H240S18B73の回答
- H240S18B73
- ベストアンサー率65% (190/288)
imgをblockにしちゃえばOK @media(max-width:720px){ .photo{display:block;float:none;} }
関連するQ&A
- レスポンシブデザイン？
cssで font-size: 0.85em; にしていて、スマホで見ると文字のサイズはちょうどいいのですが 同じサイトをＰＣで見ると文字のサイズが小さすぎて見づらいです。 一つのサイトを二つの媒体（スマホ・ＰＣ）で見る際に 文字のサイズを変える場合は レスポンシブデザインと言うのを学べばいいのでしょうか？
- ベストアンサー
- CSS
- ＣＳＳについて教えてください
ＣＳＳについて教えてください。二段組のボックスにおいて、左側が固定している場合、右側のボックスはfloat:right;にしてもfloat：left,にしてもどちらでも問題ないですか（左右の幅をきっちりとった場合）？？？ボックスを右寄せに指定しても、左寄せに指定しても・・・同じ幅であれば同じポジションになるはずですよね？
- ベストアンサー
- ホームページ作成ソフト
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- レスポンシブデザイン
スマホとＰＣで同一ＵＲＬにして レスポンシブデザインでｃｓｓを変えたいのですが それぞれどのサイズにすればいいのでしょうか？ 現在は @media screen and (max-width: 499px) { * { font-size: 1.0em; } } @media screen and (min-width: 500px) { * { font-size: 2.0em; } } の様にしていて ５００以上だと大きく表示されるようにしています。 私のスマホ（アンドロイド）・ＰＣなら問題ないのですが 一般的な幅を教えてください。
- ベストアンサー
- CSS
- レスポンシブデザインのフォントサイズの切り分け
Wordpressでレスポンシブデザインのテーマを使っています。 ひとつ困っていることがありまして、 ＰＣから閲覧するとちょうどよいのですが、スマホでみると、 タイトルのフォントサイズが大きいため、 スマホのみフォントサイズを小さくしたいと思っております。 要は、ＰＣとスマホのタイトルのフォントサイズを分けたいのです。 レスポンシブデザインのフォントサイズの切り分けがいまいちよくわかりません。 お手数かと思いますが、ご教授いただけると幸いです。
- ベストアンサー
- CSS
- レスポンシブデザインのjQueryの書き方
WEB初心者ながら、レスポンシブデザインに対応したホームページを制作したいと思っています。 スマホサイズのときのみ、ドロワーメニューにしたいのですが、jQueryをindex.htmlのheadに適応するとＰＣサイズの画面の時にも、そのjQueryが適応されてしまいます。 cssは、@media only screen and (min-width: 640px) { の書き方でひとつのファイルで行っております。 スマホサイズのときだけjQueryを適応させるにはどのような書き方をすればよろしいのでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- CSS
- HTML５とCSS３のレスポンシブデザインについて
今、wordpressでHTML５とCSS３のレスポンシブデザインに独学で、挑戦しています。 タグを手書きで書いているのですが、分からない点があります。 ▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。 display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。 どこか間違いのタグがあるのでしょうか？？ 教えていただけると嬉しいです（●＾o＾●） ↓ナビゲーションバーのタグ↓（PC） #menu ul{ width:100%; margin:0; padding:0; color:#000; background:#000; } #menu li{ list-style:none; border-top:2px solid #FFF; } #menu li a{ padding:16px 20px; display:block; text-decoration:none; background:#000; color:#FFF; } .togmenu{ padding:16px 20px; } ↓PCでは非表示になるはずのMENU↓（PC） .menubtn{ display:block; background:#000; color:#FFF; } ↓スマホで表示されるタグ↓ @media only screen and(min-width:500px){ .menubtn{ } .togmenu{ display:none; background:#000; } #menu li{ display:inline-block; border:none; } } ★上記のレスポンシブデザインで制作中のサイトURL★ http://fashioncode.jp/
- ベストアンサー
- HTML
- レスポンシブデザインでイメージマップ
レスポンシブデザインでウェブサイトを制作しています。 その中で、イメージマップ（クリッカブルマップ）を使おうとしているのですが、スマホ縦で表示しますと、画像の大きさが変わりますので、リンクエリアがずれます。 そこで、jQuery RWD Image Mapsというものを見つけましたので、これを取り入れることにしました。 https://github.com/stowball/jQuery-rwdImageMaps が、うまく動きません。 試しに、シンプルなレスポンシブデザインのサンプルページがあったので、そのソースを拝借して、そこでこのjQueryがうまく動作するかテストしてみました。 HTML http://wakabaya.main.jp/example-09.html CSS http://wakabaya.main.jp/responsive-09.css jQuery http://wakabaya.main.jp/js/jquery.rwdImageMaps.min.js シンプルなサイトですので、何か他のjQueryやスタイルシートが干渉するということもないはずなのですが、やはり動きません。 ロゴ画像のSのあたりをリンクエリアとして指定し、パソコンではそこがリンクエリアとなっていますが、スマホ縦ではロゴ画像のynの下あたりにリンクエリアがきています。 jQueryを使うのは今回が初めてで、何か、初歩的なミスをしているのではないか…、と思うのですが、その原因が見つけきれず、こちらで質問させていただきました。 どういった原因、解決策が考えられるでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- cssの書き方について
よろしくお願いします。 ＨＴＭＬに以下の記述をしました。 <img class="photo"> <a href="http://www.aaa.com" > <img src="img/techno.gif" alt="テスト画像" width="199" height="64" /> </img> <p>テキスト tekisuto</p> cssに以下の記述をしました。 img.photo {float: right } 実行したい内容は画像を右に寄せてその画像にリンクを貼り、左側に文字を挿入して、width800pxの枠で囲み背景を黄色にしたいと考えております。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- 特に指定する値がない場合のcssについて
現在作成しているホームページで、以下のようなソースを書きました <div id="wrapper"> <div class="box1 clearfix"> <div class="right1">floatで右寄せ</div> <div class="left1">floatで左寄せ</div> </div> <div class="box2 clearfix"> <div class="right2">floatで右寄せ</div> <div class="left2">floatで左寄せ</div> </div> </div> 初めは特にdivを入れ子にする必要はないと思っていたのですが clearfixの指定をかけるには必要だったので、<div class="box">で囲むことにしました。 ですが、box1やbox2に、特に指定する値がなくて悩んでいます。 特に指定することがない場合にはcssには何も書かなくてよいものなのでしょうか？ 今は取り敢えず何か指定してないと落ち着かない気がして width指定だけ書いているのですが、幅はwrapperで指定していますし特に必要ない気もします。 このような場合には何も指定をしないか、取り敢えずwidthだけでも指定しておくかどちらの方が良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML