• ベストアンサー

%、rem、vmどれを採用するべきでしょうか？

レスポンシブでサイト制作をする際のmarginやpaddingは%、rem、vmどれを採用するべきでしょうか？ 使えるのならvmを使っておけば何の問題もありませんが、アンドロイド4.4以降でないと使えないようなので微妙な状況だと思います。 すでに使われているでしょうか？ 無理な場合、完璧に再現するなら毎度計算をして%（ブレークポイントだけあっていれば良いでしょうか？） しかしこれもとても大変です。 remでブレークポイントだけ合わせれば計算がいらないので助かりますが、仕事で許されると思いますか？

  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

期限付き利用者アンケート調査を実施するとか。android4.4以前ユーザーの生存性は低いですが、念押しが要ります！ すみません。分からずに回答しました><

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • レスポンシブメニューIE7以降対応のJQueryプ

    レスポンシブメニューIE7以降対応のJQueryプラグインということで紹介されていた下記のFlexnavを実装したのですが、実際はIE7,8は対応していません。 具体的に言いますと、横幅800pxのブレイクポイントに縮めても、表示が切り替わりません。 そのままのメニューが横に小さくなるだけです。 自分で実装したものだけでなく、サンプルサイトをIE7.8で確認しても同じです。 このプラグインをいじってIE7.8にも対応させられるのなら、その方法をご教示いただきたいのですが、他に、「本当に」レスポンシブでIE7.8対応のこういった多階層ドロップダウンメニューのプラグインがあればオススメを教えてください。どうぞ宜しくお願い致します。 ちなみにモダンブラウザやIE9以降は正しく表示が切り替わります。 http://jasonweaver.name/lab/flexiblenavigation/

  • HTML(レスポンシブ)画像の均等方法

    レスポンシブ機能による、３枚の画像の間隔を均等にする方法を教えて下さい。 <section id="link_down" class="clearfix"> <h4>Web Site Link</h4> <figure class="link"><a href="#"><img src="img/icon_4.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_5.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_6.png" alt="#"></a><figcaption>example</figcaption></figure> </section><!--contact end--> コードはこちらです。 画像サイズは固定でお願い致します。 ブレイクポイントは600pxです。（600px以上で横並びに均等にします) marginやpaddingを%で設定したのですが、700pxまでは均等なのですが、1000以上となると、 左寄りになって均等になりません。 よろしくお願い致します。

  • REMのドラマーは何故辞めたの？

    こんにちは。 REMのオリジナルメンバーでもある、眉毛つながりのドラマーは人気絶頂期にいなくなってしまいました。彼は何故辞めたのでしょう？ もしくは首になったのでしょう？

  • CSSレイアウトについて

    はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright&copy;2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }

  • CSSのみでプルダウンメニューを作りたい

    こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。） 恐れ入りますが、どなたかご教授いただきたくお願い致します。

  • デバッグに関して質問です。

    プログラム超初心者です。 eclipseでデバッグが出来ない状態についてご教授願います。 「10日でおぼえるAndroid アプリ開発 入門教室」という書籍の、 「LESSON10Androidプロジェクトをデバッグしよう」という項目で、 何もいじらずに作成したAndroid projectに対して、 setContentView(R.layout.main);にブレークポイントを付けて、 デバッグ、ステップオーバーしてみましょうという内容です step overした後、一番最初のスタック、 ActivityThread.performLaunchActivity(ActivityThread$ActivityClientRecord, Intent) line: 1647 からSource not found.が赤文字で出力され、その下にある 「edit source lookup path」のボタン以降もどれを選んでよいか分かりません。 デバッグAVDは2.3.3(API10）で、sourceｓ for android sdk は入って無い様です。只、sourceｓ for android sdkが インストールされている4.0.3で実行しても同様のエラーが出ました。 本では『「ステップオーバー」を選択して次の行に進みます。』としか 書かれておらず、エラーが正しいのか、不正なのかさえ分からない状態です。 お手数ですがご教授願います。

  • moreタグの中にCSSを反映させるには？/WORDPRESS

    はじめまして、この記事をご覧頂きましてありがとう御座います。 早速ですが、質問をさせて頂きたく思います。 現在、WORDPRESSにてウェブページを制作している最中なのですが、当方、記事をあげる際に<more>のタグをよく使います。 そこで問題なのですが、<more>タグを使っている記事自体には、CSSを指定しているのですが、何故か<more>タグを使用した以降の記事（同記事内）にはCSSが反映されないという現象が起きてしまい、困っております。 説明が下手で大変申し訳御座いませんが、この現象の解決方法などを知っている方が居られましたらアドバイスを頂けますと幸いです。 下記、問題部分のcssタグを表記させて頂きます。 ＊＊＊ 【CSSを反映しているタグ/index】 <div class="storycontent"> <?php the_content(__('(more...)')); ?> </div> 【CSS】 .storycontent { line-height: 130%; padding-top: 1px; margin-right: 5px; width: 568px; overflow: auto; } ＊＊＊ どうぞ宜しくお願い致します。

  • clearfix の後marginが効かない

    はじめました。web制作初心者です。 ご教授お願い致します。 グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。 すると次の<div>以降のmargin-topが効きません！！ 今のブラウザはIEです。 <div id="wrapper"> <div id="navi"> <ul> <li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li> <li class="drink"><a href="" title="ドリンク">ドリンク</a></li> </ul> </div> </div> <!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ --> <!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ --> <div id="contents" class="clearfix"> <div id="left"> 　 <div id="kodawari"> <img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" /> </div> </div> </div> </div> #wrapper { width: 900px; } #navi ul, #navi ul li{ float: left; } /* afterに対応したブラウザ向け */ #contents .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* IE6 */ * htm .clearfix { height: 1%; } /* IE7 */*:first-child+html .clearfix { height: 1%; } #contents { width: 900px; padding-top: 5px; padding-right: 13px; padding-left: 12px; } #contents #left { width: 660px; margin-top: 15px;　←これが効かない } ごめんなさい。このCSSでわかりますでしょうか？ よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • vmの７でvmの７を動かすときdirectxは？

    windows7の上でvmwareを使ってwin７を動かしてその中のvmwareでwin７を動作させるとき最も内側のwin７でDirectxは動作しますか？

  • CSSのみでプルダウンメニューを作りたい

    CSSのみでプルダウンメニューを作りたい こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。） 恐れ入りますが、どなたかご教授いただきたくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する