sccを一つにまとめる方法とは?
- ブラウザのデバッグ画面で見ると、異なる@media screen and (min-width: 500px) が3回出現する。
- これらのスタイルを一つにまとめる方法はあるのか?
- 要約すると、ブラウザのデバッグ画面で確認したところ、異なる@media screen and (min-width: 500px) が3回出現しており、これを一つにまとめる方法が知りたい。
- ベストアンサー
このsccを一つにまとめることはできますか?
@media screen and (min-width: 500px) { * { font-size: 2em; } @media screen and (min-width: 500px) { p.p_1{ font-size:2em; } @media screen and (min-width: 500px) { th { font-size:2em; } このsccを一つにまとめることはできますか? ブラウザのデバッグ画面で見ると @media screen and (min-width: 500px) @media screen and (min-width: 500px) @media screen and (min-width: 500px) th { font-size: 2em; } になっています。
- KFRERXJETVP
- お礼率92% (127/137)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
《@media screen and (min-width: 500px) {}》を3回も書くのは無駄ですから、ここはひとつにまとめられます。 @media screen and (min-width: 500px) { * { font-size: 2em; } p.p_1 { font-size: 2em; } th { font-size: 2em; } } なお、ご質問の書き方だと《}》の数が足りないです。《{》が2回出てきたら《}》も2回出てくるはずなのに、1回しか書かれていません。デバッグ画面も少しおかしくなっているため、くれぐれも最後の《}》を書き忘れないようにしてください。また、そもそも《*》で《font-size: 2em;》と指定しているのですから、自動的に《p》や《th》も2emになるはずです。 そう考えると、下記の書き方でも十分だと思います。 @media screen and (min-width: 500px) { * { font-size: 2em; } }
- 参考URL:
- http://htmq.com/csskihon/
その他の回答 (1)
- akauntook
- ベストアンサー率19% (295/1481)
技術者ではなさそうですね。 技術者向けと言うのは技術者の疑問と言うことではないでしょうか。 sccって何? こちらが間違えに思えてなりません。 そうすると、少しは勉強したら良い。 答えたところで理解できない。 と、なります。 技術者が回答すると考えても、技術者は、努力や経験の上で技術者となったわけで、何の努力も感じられないような人は嫌いな人が多いんじゃないですかね。 努力も感じられない。 何を教えても理解できる見込みがない。 となると、教える人はなかなかいないのではないでしょうか。
お礼
回答ありがとうございました。
関連するQ&A
- レスポンシブデザイン
スマホとPCで同一URLにして レスポンシブデザインでcssを変えたいのですが それぞれどのサイズにすればいいのでしょうか? 現在は @media screen and (max-width: 499px) { * { font-size: 1.0em; } } @media screen and (min-width: 500px) { * { font-size: 2.0em; } } の様にしていて 500以上だと大きく表示されるようにしています。 私のスマホ(アンドロイド)・PCなら問題ないのですが 一般的な幅を教えてください。
- ベストアンサー
- CSS
- レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 1:左右中央寄せのcss記述について iPhone(320px)とAndroid(推定360px)の実機で表示確認をしながら Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か cssの書き方が悪いのか、画面の左右中央寄せにしたくて 片方のスマホサイズに合わせると、片方ずれてしまいます。 cssでどの画面サイズでも左右中央に寄る書き方はありますか? 2:Media Queriesについて 1のcssの書き方がわからないので、画面サイズによって Media Queriesを書き分ければ早いかなと思い、 iPhone用とAndroid用で別で記述してみたのですが、 画面サイズを指定してるにも関わらず、片方のMedia Queriesが 両方のスマホに反映してしまいます。 下記、Media Queriesの記述内容です。 iPhone用(幅320px) @media screen and (max-width: 320px) { Android用(幅:360px) @media screen and (max-width: 360px) and (min-width: 321px) { 上記の書き方は間違っておりますでしょうか。 以上、2点について教えて頂けると助かります。 初心者なため、これで何時間も調べたり試行錯誤してしまっています。。 ちなみに、実機はiPhoneはiPhone4S、AndroidはF-01F です よろしくお願いします。 よろしくお願いします。
- 締切済み
- CSS
- レスポンシブ 横1080px高解像度スマートフォン
レスポンシブに挑戦しようとしていますが、 ちょっとよく分からくなってきたので質問させてください。 レスポンシブWEBデザインは、 例えば、次のようにデバイスの横幅によって異なるデザインのサイトを表示させるわけですよね。 @media screen and (min-width: 769px){PC向け} @media screen and (max-width: 768px){タブレット向け} @media screen and (max-width: 640px){スマートフォン向け} しかし、横幅が1080pxもあるスマートフォンが発売されてきましたので、 もはや、横幅ではどんなデバイスなのか分からなくなってきたと思います。 また、スマートフォンが高解像度になっても、 画面自体は小さいので、 スマートフォン用にサイトデザインを最適化する必要は変わりません。 そうすると、ユーザーエージェントで切り分ける旧式のやり方を少なくも併用しなければ、 結局、うまくいかないような気もするのですが、どうなんですかね? そのあたりについて、どのようにお考えでしょうか? ご意見お聞かせいただきたくお願い申し上げます。
- ベストアンサー
- CSS
- CSS media queryについて
下記のcssで疑問があります。 @media all and (min-width:500px)と@media all and (min-width:1000px)に それぞれ違うスタイルがあります。 (min-width:500px)にはfloatがあり、(min-width:1000px)にはありません。 しかし、(min-width:1000px)にもfloatされているのですが仕様でしょうか? もしこれが仕様であれば... floatさせないようにするには(min-width:1000px)にも 設定をしなければならないということでしょうか? 宜しくお願いします。 -------------------------------------- @media all and (min-width:500px) { #box01{ float:left; width:240px; height:400px; background:#334467; } #box02{ float:right; width:240px; height:400px; background:#ffff00; } } @media all and (min-width:1000px) { #box01{ width:400px; height:400px; background:#334467; } #box02{ width:400px; height:400px; background:#546789; } }
- ベストアンサー
- CSS
- widthでcss,js切換可能でしょうか。
【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- レスポンシブデザインのjQueryの書き方
WEB初心者ながら、レスポンシブデザインに対応したホームページを制作したいと思っています。 スマホサイズのときのみ、ドロワーメニューにしたいのですが、jQueryをindex.htmlのheadに適応するとPCサイズの画面の時にも、そのjQueryが適応されてしまいます。 cssは、@media only screen and (min-width: 640px) { の書き方でひとつのファイルで行っております。 スマホサイズのときだけjQueryを適応させるにはどのような書き方をすればよろしいのでしょうか? 宜しくお願いいたします。
- ベストアンサー
- CSS
- 文字サイズについて教えてください。
文字サイズをユーザー側で変更できるように、 指定をemにしているのですが、 ユーザー側で、文字のサイズを 「中」から「大」にすると、いきなり大きくなって しまいます。 ほんの少しだけ、大きくなってほしいのですが。 そのようなことをコントロールすることは可能でしょうか? 文字サイズのCSS font { font-size: 0.75em; line-height: 1.4em; font-family: "MS Pゴシック" } .font4 { font-size: 1.15em; line-height: 1.3em; font-family: "MS Pゴシック" } .font3 { font-size: 0.9em; line-height: 1.4em; font-family: "MS Pゴシック" } .font2 { font-size: 0.65em; line-height: 1.3em; font-family: "MS Pゴシック" } .font2n { font-size: 0.65em; font-family: "MS Pゴシック" } .font1 { font-size: 0.55em } textarea,input,select { font-size: 12px } .search { width: 124px; } よろしくお願いいたします。
- 締切済み
- HTML
- htmlについて
このコードでスマホ画面の際、画像を右横に表示しテキストを画像の真横に表示させたいのですが、どうすればいいですか? <div class="parent"> <div class="child"><img src="image/t1.png"><p class="text">あ</p></div> <div class="child">い</div> <div class="child">う</div> <div class="child">え</div> <div class="child">お</div> </div> 以下css div { font-size: 2rem; text-align: center; margin: 10px; padding: 10px; } .parent { background: lightblue; display: flex; } .child { background: lightgreen; width: 150px; } .child>img { width:100%; } @media screen and (max-width: 800px) { .parent { flex-wrap: wrap; } } @media screen and (max-width: 400px) { .parent { display: block; float:right; } }
- ベストアンサー
- HTML
- レスポンシブデザインにする方法、参考サイト
現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。 こちらのスキルとしては通常のサイト制作は仕事で請け負っています。 現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。 例えばつまずいているのは基本的な部分なのですが、 htmlの<head>部分に <link rel="stylesheet" media="screen and (min-width:1024px)" type="text/css" href="css/layout.css"> <link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/tabletcss"> <link rel="stylesheet" media="screen and (min-width:480px)" type="text/css" href="css/smart.css"> と記述し、cssを3種類用意し、各cssに @media screen and (min-width:480px) { img{ max-width: 100%; height: auto; width /***/:auto; }・・・以下各要素省略 } とそれぞれ記述すると、<head>部分で一番下にリンクしたsmart.cssの内容が1024pxで設定してあるはずのPCでの表示に影響してしまいます。 リンクの貼り方はコリスさんのところで参考にしたと思うのですが、どこが問題でしょうか? それ以外の画像や要素の%表示のことはわかるのですが、ここが肝心だと思うので..恐らく一番基本的なことなので調べても省略してあるサイトもあるのかもしれません。 一度覚えてしまえば使い回し出来ると思うのですが、この質問への答えでなくても、参考になるサイトがありましたらご教示下さい。ちなみに省略してるだけでreset.css等は設定してあります。
- ベストアンサー
- CSS
- CSS) emでのサイズ指定
CSS初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか? また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?
- ベストアンサー
- CSS
お礼
回答ありがとうございました。