あなたの映画力を試せる!POPLETA映画検定(無料) >>

私も一度レスポンシブサイトを作成したことがあります。その時は、モバイルファーストで記述しました。
書き方としては、モバイル用を列挙し、その後、タブレット用とPC用とそれそれをひとまとまりにしました。

しかし、最近のサイトを見ていると、CSSの1つの指定に対して、タブレット用とPC用を記述しているサイトを良く見ます。(saaaのmixinを利用しているようです)
これだと、コード量が無駄に多くなり、モバイルの表示速度に影響があると思うのですが・・・

そこで、質問です。
メディアクエリのそれぞれの指定は、どの端末でもとりあえず一度は読み込まれるのでしょうか?それとも、モバイル端末の場合、タブレット用とPC用は読み込まれないのでしょうか?


アドバイスをいただける方よろしくお願いいたします。

A 回答 (1件)

>>コード量が無駄に多くなり、モバイルの表示速度に影響があると思うのですが・・・



その通りです。
ですので、多くのレスポンシブサイトではhtmlのCSSメディアクエリで読み込むCSSを変える様にしています。

例:2個を振り分ける例

<link rel="stylesheet" media="screen and (min-width: 641px)" href="style-css-pc.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="style-css-smart.css" />
    • good
    • 0
この回答へのお礼

こういうことをしているんですね。
ありがとうございました。

大変参考になりました。

お礼日時:2017/09/09 09:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QHTML,CSSで自分のブログ、ホームページのWebページに今見ているWebページのURLをボタンで

HTML,CSSで自分のブログ、ホームページのWebページに今見ているWebページのURLをボタンで取得出来るボタンを付けたいと思います。

どうやれば、いまWebブラウザで見ているURLを取得できますか?javascriptを使わないと無理ですか?

やり方を教えてください。

Aベストアンサー

<script type="text/javascript" language="javascript">
var urlInfo = location.href;
</script>

urlInfoの中にurlが格納されている。これを表示したいなら、

<script type="text/javascript" language="javascript">
document.write("<p>今日は" + urlInfo + "です。</p>");
</script>

と書いた位置に、<p>今日は○○○です。</p>が生成される。
○○○は取得したurlになる。

Qプログラムエラー

大学で情報システムの勉強をしているのですが、テスト工程におけるエラーは論理エラーが一番多いのですか?もしそうだとして、なぜ一番多いのでしょうか?人為的なミスが原因で起こると習いましたが、構文エラーも人為的な入力ミスで起こりますよね?

Aベストアンサー

>>テスト工程におけるエラーは論理エラーが一番多い

一番多いのはケアレスミス、つまりウッカリミスです。
1とiの間違い、0とoの間違い、;と:の間違い、.と,の間違い、変数の綴りミス、変数のクリアミスなど。

ロンリミスは直ぐに発見できるが、ケアレスミスは発見に時間がかかる。

特に当事者が発見するのは相当難しい(そう思い込んでいるから)。

Q教えて下さい。 phpで作成しています、データ一覧表示の画面があります。 画面表示の時点でデータを全

教えて下さい。
phpで作成しています、データ一覧表示の画面があります。
画面表示の時点でデータを全件表示しており、それに対するページング(js)の機能もつけています。

検索ボタンで入力条件通りのデータをajaxを使って
非同期(画面リロードなし)で表示していますが
ページングが動きません。(最初の全件データ分の
ページングが表示されたままの状態です)

一般的なJQeryのページングを使っているのですが単純にリロードされていないから読み込まれていないということなのでしょうか?

また、ページのソースを見ても(右クリックでソース表示)最初の全件がHTML上では表示されています。
そもそも非同期で取得したデータはソース上は表示されないものなのでしょうか?(innerhtmlで記述)

初心者でわからないことだらけで申し訳ありません。
何かとっかかりがあればと思いますのでご教授下さい。

非同期でのページングのやり方など教えてもらえると助かります。

長々と書いてしまいましたがよろしくお願いいたします。

リロードしていないからjsが動かないのかと思うのですが

教えて下さい。
phpで作成しています、データ一覧表示の画面があります。
画面表示の時点でデータを全件表示しており、それに対するページング(js)の機能もつけています。

検索ボタンで入力条件通りのデータをajaxを使って
非同期(画面リロードなし)で表示していますが
ページングが動きません。(最初の全件データ分の
ページングが表示されたままの状態です)

一般的なJQeryのページングを使っているのですが単純にリロードされていないから読み込まれていないということなのでしょうか?

ま...続きを読む

Aベストアンサー

こんにちは


通常の「ページのソース表示」は、サーバから送られたHTMLのソースを表示します。
その後スクリプト等でDOMを変更しても、それは「ソース」ではないので、反映されることはありません。
実際に表示されているDOMの状態を知りたければ、スクリプトでinnerHTMLなどを取得して表示すれば見られます。
最近のブラウザであれば、デバッグツールが付属していると思いますので、そちらから参照するのが簡単ではないでしょうか?
(ツールのHTMLタブなどから参照できると思います)


実際の内容がわからないので、以下は、単なる推測にすぎませんが・・・

>一般的なJQeryのページングを使っているのですが~~
多分、ライブラリか何かを利用しているのではないかと推測します。
最初に初期設定を行っていると思いますが、設定がそのままなので、ajaxで内容が変わってもライブラリにとってはもとの状態のままと認識して、その後の処理ではエラーが発生していたりするのではないでしょうか?
対象データが変わった時点で、再度、初期設定をしてあげれば動作する可能性が高いと思います。


一方で、
>画面表示の時点でデータを全件表示しており~~
とのことなので、全件を一括読み込みしているのなら、検索といっても単に「絞り込む」だけでしょうから、わざわざajaxで通信処理などをしなくてもローカル側で直接絞り込めば(javascript利用)済みそうに思います。
データ件数分の表示/表示のフラグを持つだけで実現できそうなので・・・

利点としては、レスポンスが速くなるであろうことと、サーバ側の負荷が減ることぐらいでしょうか。
件数が膨大な場合はajaxが有効とは思いますが、その場合は、最初に全件読み込みは行わないであろうと思います。(膨大なので)

こんにちは


通常の「ページのソース表示」は、サーバから送られたHTMLのソースを表示します。
その後スクリプト等でDOMを変更しても、それは「ソース」ではないので、反映されることはありません。
実際に表示されているDOMの状態を知りたければ、スクリプトでinnerHTMLなどを取得して表示すれば見られます。
最近のブラウザであれば、デバッグツールが付属していると思いますので、そちらから参照するのが簡単ではないでしょうか?
(ツールのHTMLタブなどから参照できると思います)


実際の内容がわからない...続きを読む

Qfooter を横幅いっぱいに広げるがのうまくいかない

ヘッダーと同じようにフッターをcontainerなどで、囲まず、
メイン部分と切り離し、以下のように設定しましたが、1000pxで
途切れてしまいます。

HTML
<div id="footerWrap">
<div id="footer">
フッターに表示させる部分
</div>
</div>

CSS
#footerWrap{
width:100%;
background-image: url(images/footerback.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
z-index:1;
}
#footer{
width:1000px; /* フッター幅を指定*/
margin:0 auto;
}

それで以下のようにも試みましたが、横幅いっぱいに伸びるのは
いいのですが、横スクロールが出てきて、右側にスクロールすると
ヘッダーとメインが途切れて、フッターだけびろーんと右側に伸びた状態になります。

#footerWrap {
margin: 0 -500%;
padding: 0 500%;
}
はみ出た部分を消そうと、
これを
html {
overflow: hidden;
}

にすると今度は横スクロールが消えるのはいいのですが、縦スクロールも聞けて
上下にスクロールできなくなってしまいます。

いい方法はないのでしょうか?

ヘッダーと同じようにフッターをcontainerなどで、囲まず、
メイン部分と切り離し、以下のように設定しましたが、1000pxで
途切れてしまいます。

HTML
<div id="footerWrap">
<div id="footer">
フッターに表示させる部分
</div>
</div>

CSS
#footerWrap{
width:100%;
background-image: url(images/footerback.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
z-index:1;
}
#footer{
width:1000px; /* フッター幅を指定*/
margin:0 auto;
}

それで以下の...続きを読む

Aベストアンサー

単純に
#footer {
width:1000px; /* ← width:100%; にすればいいのでは? */
margin:0; /* ← 横いっぱいになるので、左右の「auto」はいらない */
}

上記ではなく、後者の横スクロールバーだけを消すのは
html {
overflow-x:hidden;
}

Q自分のアドレスに送信用のメールホームが 自動で立ち上がるプログラムを教えてください。

基本んパソコンですが、スマホも対応すれ光栄です。
メーラーは基本アウトルックです。
HTMLプログラムかJavaScriptで自分のアドレスに送信用のメールホームが
自動で立ち上がるプログラム教えていただけないでしょうか?
 資料をなくしてしまいました。
 よろしくお願いします。

Aベストアンサー

No.1です。ついでです。
2.スマートフォンでこちらの電話番号を自動で入力する方法
弊社の電話番号を例にすると、下記のスクリプトになります。
<p>携帯電話:<a href="tel:090xxxxxxx1">090-xxxx-xxx1</a></p>
「携帯電話:」や「090-xxxx-xxx1」は単なるテキストなので何でもかまいません。

QHTMLについて質問です。 いまホームページを作成しています。 ホームページは完成したのですが、誰が

HTMLについて質問です。
いまホームページを作成しています。
ホームページは完成したのですが、誰がそのホームページに入ってきたかを名前を入力させ、誰が何時にログインしたかを確認できるようにしたいと考えています。
テキストフォームと送信ボタンを用意して名前を入力させてから送信ボタンを押してそのテキストの内容をテキストファイルでも、エクセルファイルでもいいので名前と時刻が反映するようになるにはどのようなソースを作っていけばいいのかどなたか教えてください。
ものすごく大雑把な説明なのでわかりにくいかと思いますが、みなさんの知恵をお貸しください。

Aベストアンサー

そういう動的な仕組みはHTMLだけでは実現出来ません。
昔ながらの方法としては、CGIと呼ばれるサーバサイドスクリプトを使うことです。
言語で言うとperlやphpになりますね。

例えばこういうCGIですね。

http://www.kent-web.com/pwd/protect.html

エクセルなんてハードル高い真似は止めておきましょう。苦笑。
せいぜいcsv出力にする程度が妥当です。

お気づきかとは思いますが、CGIを十分に利用するには、
ある程度WEBサーバの知識が必要になります。
(この程度ならウェブ製作者なら半日あれば理解できると思いますが)

Qhtmlでjpg画像をアップロードして、相手のパソコンかスマホにダウンロードさせたい。

お疲れ様です。
写真(同窓会)を郵送するには費用がかかります。
そこで、ホームページをから、相手がダウンロードできるようなに
プログラムを組みたいのですが!忘れてしまいました。
 現在作成中のホームページは、写真の閲覧のみです。
どんなプログラムを組めば相手のパソコン、スマホへダウンロード
できようになりますか?

Aベストアンサー

ダウンロードさせる?

無理ですよ、相手の人にダウンロードしてもらうようにしましょう

https://30d.jp/
写真共有サービスを利用して、画像をアップロード
参加した人にしか見えないようにパスワードを設定して、URLとパスワードをメールで送ってダウンロードしてもらいましょう


既にHPを持ってるのなら、そこにアップロードして、その画像のURLを教えて右クリックで保存してもらえばいいですよ

QWEBページがIEだけ文字化けして困っています

文字コードがUTF-8で作られたテンプレを使ってWEBページを作成しておりましたが、IE11で文字化けして困っています。他のブラウザでは問題ありません。

まず文字化けするページをIEで表示し、表示→エンコード→その他→UTF-8で行うと
文字化けせず正しく表示されます。つまりブラウザがUTF-8であることを認識して
くれないことになります。

なおFFFTPでサーバー(ロリポップ)にアップする前にIEで表示させると文字化けは起こりません。
アップした後にIEで表示すると文字化けします。

FFFTPの設定はローカルの漢字コード、ホストの漢字コードを共にUTF-8BOMにしています。
HTMLファイルをBOM付、なしに保存して試しても文字化けします。

どなたか至急アドバイスいただけませんか?よろしくお願いいたします。


●文字化けするページのヘッダー情報
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.14.0 for Windows">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/script.js"></script>
<title>〇〇〇〇</title>
</head>

文字コードがUTF-8で作られたテンプレを使ってWEBページを作成しておりましたが、IE11で文字化けして困っています。他のブラウザでは問題ありません。

まず文字化けするページをIEで表示し、表示→エンコード→その他→UTF-8で行うと
文字化けせず正しく表示されます。つまりブラウザがUTF-8であることを認識して
くれないことになります。

なおFFFTPでサーバー(ロリポップ)にアップする前にIEで表示させると文字化けは起こりません。
アップした後にIEで表示すると文字化けします。

FFFTPの設定はロー...続きを読む

Aベストアンサー

上の階層は下に伝播しますが、下の階層(カレント)自体の.htaccessが優先されるので
上の階層の設定はあまり関係ないかもしれません

Qcss hiddenとvisibleを組み合わせて、表示非表示を切り替える

通常時、文字が非表示。
マウスを乗せたとき文字を表示させるため、以下のようなcssを設定しました

.answer {
visibility: hidden;
}
.answer:hover {
visibility: visible ! important;
}

しかし常に非表示にされ、マウスを乗せても表示されません
なにがいけないのでしょうか?

Aベストアンサー

:hover 対象要素の子孫に対して、表示を切り替えましょう

<style>
.answer p { visibility:hidden; }
.answer:hover p { visibility:visible; }
</style>
<section class=answer>
<p>通常時は非表示の文字</p>
</section>

Qアコーディオン仕様の中の ul li の中にリンクタグを付けると勝手に改行される

ホームページ制作中です。
アコーディオン仕様の中の ul li の中にリンクタグ(a href=)を付けると勝手に改行(折り返し)されてしまいます。
対策として ul の display を none から block に変更すると、アコーディオン機能が働かなくなります。
どなたか、解決方法を教えて下さい。
宜しくお願いいたします。

Aベストアンサー

私はslimmenueを使ってドロップダウンメニューを作りました。
CSSだけで作っている下記サイトは参考になりませんか。
li aにdisplay:block;を設定しています。
http://weboook.blog22.fc2.com/blog-entry-408.html


人気Q&Aランキング