• ベストアンサー

メディアクエリーの記載場所

メディアクエリーの記載場所を一番下にする人と、その要素のCSSはまとめるタイプとふたタイプありますが、現場やトップのコーダーは、どちらにしていますか？ また今後を考えるとどちらがよいと思いますか？ また、メディアクエリーをメディアクエリーズということもありますが、技術的にはどっちが正しいのでしょうか？

noname#226032
noname#226032
  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • uphome
  • ベストアンサー率63% (12/19)
回答No.1

規模や構造によると思います。 規模が大きいと分業する事もありますし、部分的にデザイン変更がある場合など、要素ごとにまとめて書いた方が便利な事も多いです。 規模が小さかったりサイトマトリクスが単純な場合は、クエリごとにまとめた方がわかりやすいです。 今後という意味では、色々な方面からシステム化が進むと思うので、単純な構造はコーディングする事がなくなるかもしれません。 なので、要素ごとに書く機会の方が多くなるのかな、という気はします。 Media queries を日本語でメディアクエリー(メディアクエリ)と書いているので、メディアクエリーズという表現はあまり見ない気がします。

noname#226032
質問者

お礼

ありがとうございます。 数十ページの小さいサイトなら、 下記のようにCSSを並べて記載する方が良いのですね。 header 320 640 960 div 320 640 960 futter 320 640 960

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

関連するQ&A

  • codePenでメディアクエリーは対応していますか

    cssの初心者です。ここ一週間位前からcodePenでHTML、CSS、Java Scriptの学習を開始したのですが、codePenはメディアクエリーに対応しているのか教えていただけますか。デスクトップファーストでコードを記載しており、class="gallery"はdisplay:flex; flex-direction:row;をしており、CSSコードの後半で @media(max-width:800px){ .gallery{ flex-direction: column-reverse; }} と記載してcodePenの画面を小さくしたら、その画面が小さくなるだけで、メディアクエリーは効かなそうでしたので質問しました。コーディングの学習はVS Codeで行っていますが、codePenに記載する場合にはgoogleフォント設定や、共有画像の読み込みの様に何か特別な記載の方法があれば、ご教示くださるようお願いします。

    • ベストアンサー
    • CSS
  • ie8メディアクエリによるcss分岐ができない

    ie8でメディアクエリによるcssの画面サイズ分岐ができなくて困っています。 環境は、windows XP Service Pack3です。 1.下記方法でIE8以下にもHTML5とメディアクエリを使えるようにしました。 　(HTML5はバリデータでチェック済みです。) <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 2.下記方法でデバイスの横幅に対応したcssを指定しました。 <link href="smartphone.css" media="screen and (max-width:480px)" rel="stylesheet" type="text/css"> <link href="tablet.css" media="screen and (min-width:481px) and (max-width:1024px)" rel="stylesheet" type="text/css"> <link href="pc.css" media="screen and (min-width:1025px)" rel="stylesheet" type="text/css"> 3.現象 a. firefoxではローカル上のページもサーバー上のページも適用されていました。 b. ipodではサーバー上のページしか見ていませんが、適用されていました。 c. しかし、ie8ではローカルでもサーバーにアップしてもcssが適用されません。 d. ie8では、media="screen"だけの場合は適用されていますが、and以降のサイズ指定が入ると適用されません。 e.type=などの指定もアリ、ナシどちらの組み合わせも適用されません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • Media Queries ってDBあるのですか？

    メディアクエリってジャバクエリみたいにデータベースがあるのですか？ ホームページを持っているのですが、リアルで知り合いの人に、スマホで見るときPC表示で見づらいといわれてしまいました。( ；∀；) 前々からメディアクエリというものがあるのは知っていたのですが、どう探してもDLページにたどり着けません。 一応それらしきサイトは見つけたのですがこちらであっているでしょうか？⇒（http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/）Media Queriesと書いてあるので、おそらくここなのかなと思いますがいかがでしょうか。 本題に戻りますが、Media QueriesってメディアごとにCSSを振り分けるやつらしいのですが、記述方法がよくわかりません。（ここ見ました：http://dev.classmethod.jp/smartphone/device-media-queries/） JQueryみたいにDB（データベース）は無いのでしょうか？あるとすると、どのサイトにあるか教えてください。DBが存在しない場合、http://dev.classmethod.jp/smartphone/device-media-queries/に書かれていた通り<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >でいいのでしょうか。また、下記のように書く際はどのように記述すればよいのですか？”セレクタ@media ～”でいいのでしょうか？ <style type="text/css"> <!-- //--> </style> よろしくお願いします。(´・ω・`)

    • ベストアンサー
    • CSS
  • css、スタイルシートの読み込み順について

    head内に<link type="text/css……>でスタイルシートを3つ読み込んでいて ①reset.css ②style.css ③content.css の順で上から下に並べてるのですが②が後で読み込まれます。 !importantはどのスタイルシート内にもついてませんし、リンクの指定ミス等もありませんでした、メディアクエリのミスもありません。 一体なにが原因として考えられるでしょうか…お知恵を貸していただけますと嬉しいです。

    • 締切済み
    • CSS
  • レスポンシブデザインにする方法、参考サイト

    現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。 こちらのスキルとしては通常のサイト制作は仕事で請け負っています。 現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。 例えばつまずいているのは基本的な部分なのですが、 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を３種類用意し、各cssに @media screen and (min-width:480px) { img{ max-width: 100%; height: auto; width /***/:auto;　 }・・・以下各要素省略 } とそれぞれ記述すると、<head>部分で一番下にリンクしたsmart.cssの内容が1024pxで設定してあるはずのPCでの表示に影響してしまいます。 リンクの貼り方はコリスさんのところで参考にしたと思うのですが、どこが問題でしょうか？ それ以外の画像や要素の%表示のことはわかるのですが、ここが肝心だと思うので..恐らく一番基本的なことなので調べても省略してあるサイトもあるのかもしれません。 一度覚えてしまえば使い回し出来ると思うのですが、この質問への答えでなくても、参考になるサイトがありましたらご教示下さい。ちなみに省略してるだけでreset.css等は設定してあります。

    • ベストアンサー
    • CSS
  • CSSセレクタの子孫要素について意味を質問します

    CSSセレクタや、JQueryのセレクタで E　F の意味は、 「Eの子孫要素にあたるＦに、スタイルシートを適用する。」 などと、よくサイトなどで記載があります。 使い方は理解しているのですが、 これって「子要素と孫要素」だけではなく、 「下の階層にある要素全て」が正しいと思っています。 （要は、ひ孫要素以下にもスタイルシートが適用されますよね？ってことです） それとも、「子孫要素」って下の階層全部のことを意味しているんでしょうか？ それはそれで、漢字の意味に疑問を持ちますが・・・ 自分が他の人に教える時に、しっくりこないので質問してみました。

    • ベストアンサー
    • HTML
  • リンクをクリック出来ない。

    http://www.1sshindo.com/ このページを作ったのですが、topページで その他のページというリンクにカーソルを合わせても 指のマークが出ません。 （MACでですが。 windowsを持っていません。） なぜでしょうか。 この要素をtable_top7と指定して cssで.table_top7 { border: thin solid #FF6600; position: absolute; width: 70px; top: 1705px; left: 70px; margin: 1px; } となっていますが、 要素を下に移動させたかったので top:1615px; から top: 1705px; としたらこのようになってしまいました。 1680pxぐらいまでならリンクが出るようです。 なぜでしょうか。 他の要素が影響しているんでしょうか。 初歩的すぎて 怒られそうですが。 お願い致します。

    • ベストアンサー
    • HTML
  • 同HTML内で2種のJ-Queryを使用したい

    複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、1つのみしか作動せずJavaScriptエラーがでてしまいます。 片方ずつで行うと作動するのですが、同じHTMLに2種組み込むとうまくいきません。 同じ質問があり参考にさせて頂いたのですが良くわかりません。 複数使う場合の記述方法があるということもサイトで知ってやってみたりしたのですがうまくできませんでした。 http://stacktrace.jp/jquery/with_other_lib.html 使用しているものは以下です。 -------------------------------------------- <!-- jQuery --> <script type="text/javascript" src='/js/J-Query/jquery-1.5.2.min.js'></script> <!-- ナビ --> <script type="text/javascript" src='/js/J-Query/jquery.color-RGBa-patch.js'></script> <script type="text/javascript" src='/js/J-Query/example.js'></script> <!--スライダー--> <script type="text/javascript" src="/js/J-Query/jquery.flexslider.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script> <script type="text/javascript" src="/js/J-Query/shCore.js"></script> -------------------------------------------- <!-- ナビ --> グローバルナビで使用 参照元 http://css-tricks.com/examples/MagicLine/ の下の方です。 <!--スライダー--> スライダーで使用 参考元 http://flexslider.woothemes.com/ お手数ですがどなたか教えて頂けると幸いです。

  • javascriptにてcss切り替え

    現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。

  • 更新クエリでエラー発生

    WinNTではうまく更新してたのですが、Win2000 + iis5　の環境に換えてから 下のようなエラーが発生しうまく処理できません。 どなたかＨＥＬＰ　お願いします 　　↓　 次のホームページ 192.168.0.5を開き、 必要な情報が記載されたページへのリンクを探します。 HTTP 500.100 - 内部サーバー エラー - ASP エラー インターネット インフォメーション サービス -------------------------------------------------------------------- 技術情報 (サポート担当者用) エラー タイプ Microsoft JET Database Engine (0x80004005) 更新可能なクエリであることが必要です。 /db/srceng/submit.asp, line 61 ブラウザ タイプ Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0) ページ POST 79 bytes to /db/srceng/submit.asp POST Data: title=fsdfgs&url=http%3A%2F%2Ffdsgd&category=%89%B9%8Ay%7CJAZZ&descript=fdgsdfg 時刻 2002年4月14日, 12:52:59 詳細 Microsoft サポート

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する