- ベストアンサー
htmlについて
htmlで質問です。 pcの画面では大きすぎるし、かといってｖｗを指定するとコンテンツの幅が非常に大きくなってしまうことがあるので、スマホの画面を基準の大きさに～ｐｘ以上の画面で表示する場合は端に余白をつけたいのですがどのように書けばいいですか？ また、調べるときはなんと検索したらいいですか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- androidのviewport設定
スマホのサイトを作ってみて、いまいち理解できない部分があったので、 教えてください。 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,target-densitydpi=medium-dpi" /> 上記設定で、ヘッダーとフッターがwidth:100%（各内部も%で要素の幅指定）、コンテンツ（section）が320px幅（各内部もpxで要素の幅指定）のサイトを作りました。 これで、だいたいのページでは縦の時320px、横にしたとき、コンテンツはそのままセンター、ヘッダーとフッターが伸びて表示される具合になったのですが、 よくわからなかったのが、アンドロイドの挙動です。 アンドロイドも縦横同じように（ただし、iphone画面をそのまま拡大したような）表示はしていたのですが、 一部ページで縦の時、コンテンツ左右に余白が発生してしまいました。 （コンテンツ自体は画面いっぱい、画面外に余白が発生、ヘッダーとフッターは余白含んだ幅いっぱいで表示） 見た目上は320pxに収まっていましたが、コンテンツが320px幅からはみ出ている可能性のあるページだったので、 要素にoverflow:hidden;をかけましたが特に変化ありません。 アンドロイドの自動計算かと思うのですが、 コンテンツの幅を確認しなおす他に、 見直したほうが良い箇所があればご教授頂けると嬉しいです。 （viewportが正直自信ありません・・・）
- 締切済み
- HTML
- 違うＰＣでの見え方
ＦＣ２でブログをしています。 先日、初めて違うパソコンから自分のブログを見たら、 表示のされ方が違う事に気づきました。 「明るさ」 まず、明るさ？と言えばいいのでしょうか・・・。 ブログに載せる写真は、いつも編集ソフトで逆光補正をし、 自分のＰＣ上で丁度良いと思う明るさに修正していました。 それが、他のパソコンから見ると写真が明るすぎるというか、 ひかり過ぎて色あせた様に見えてしまいます。 写真が一番目立ちますが、他の文字等も全体的に明るく、色が薄く見え、 とても見づらい画面になっていました。 「幅の表示」 あと、自分のＰＣ上で一番良いと思うバランスで、スタイルシートの幅、 #content { width: 800px; この箇所を指定していました。 それ以外の部分（バックグラウンド？）は画面上で、適度な余白になっている、と思っていたのですが、 それも別のＰＣで見ると、メインの800pxの幅はそのまま表示さていて一緒だけど、 周りの余白（バックグラウンド）がとても広くなっていました。 そのＰＣは自分の物より画面が大きかったので、 画面のサイズによって、バックの表示される幅が変わるという事でしょうか？ 大きな画面で見ると、ブログの記事部分が中心に小さくまとまってしまって見え、 とてもバランスが悪く思いました。 それで、単純に幅の数字を大きくすればいいのか？と考えたのですが、 それだと逆に小さなＰＣ画面の人が見る場合はどうなるのでしょう？ 他の方のブログをチェックすると、画面の大きさに関係なく、 バックの幅も同じように表示されているものもありました。 これはpxで指定せず、％で指定しているからですか？ 明るさ、幅の表示、ともにパソコンによって見え方が違うのは仕方ない事なのでしょうか？
- ベストアンサー
- ブログ
- レスポンシブのデザインについて
ポスポンシブのデザインを設計する際はどのように書いていますか？ iPhone5系などの320×568を基準に作っていますか？ それともシェアが多い375×667を基準ですか？ デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。 なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。 今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか？ 320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、 レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。
- 締切済み
- CSS
- iframeについて・・・
幅260pxの枠内に、別ページAに記載した幅230pxのコンテンツを表示させたいのです。 ページAのコンテンツは縦長のリストなので、iframeには縦のスクロールバーのみ表示するようにしているのですが、どうも、読み込み先のページAが幅230pxよりも右側にちょうどスクロールバー1本分程度の余白ができてしまい、パッと見はわからないのですが、iフレーム内でカーソルをドラッグして右にずらすと、その余白がでてきてしまいます。 いったいこの余白は何が原因でできているのでしょうか。 また、消すことはできるのでしょうか？
- ベストアンサー
- HTML
- tableで横幅を指定するとき。
説明が下手でわかりにくいのですが、 よろしくお願いいたします。 例えば、 td二列の幅を100px、100pxづつにした場合、 table全体の幅は200pxになりますよね…。 tdで幅を100pxに指定した上で、 cellspacingで枠の余白を10pxに指定した場合、 table全体の幅はそのまま200pxで良いのでしょうか…。 それとも、cellspacingで指定した値を足した230pxにすれば良いのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- レスｐンシブのＣＳＳについて
レスポンシブデザインのコーディングをしています。 CSS上で、スマホで参照した場合の表示として、以下のようにメディアクエリを書いています。 @media screen and (max-width: 640px) { ～ } Chromeで画面幅640pxまで縮めた場合、想定どおりの表示となるのですが、 Firefoxを640pxまで縮めても変化せず、625pxで初めてスマホ時の表示となりました。 縦スクロールバーが表示されているせいで、15px分の解釈の誤差が出てしまっている ようなのですが、ＣＳＳで回避する方法はありますでしょうか。 それともJavascriptなどでfirefoxを判別し、かつ画面幅をチェックして、専用のCSSを当て込む必要がありますでしょうか。
- 締切済み
- HTML
- Word2010 表示設定の保存
Windows７ Word2010を使用しています。 Word2010の表示画面で左右両端の余白を「ページ幅を基準に表示」ズーム162％で設定しています。※私のPCでは余白部分はグレイ色です。 操作画面の外側の部分。ページ設定の余白ではありません。名称はどう言うのでしょう。 私はステータスバー（下部）を表示させているのでこのズームスライダーからも余白の調整はできます。こ 質問はこの設定でテキストを作成して保存しますが次回起動させると画面表示倍率が180％に変ってしまいこのグレイの部分もなくなっています。表示タブのズームをみると「ページ幅を基準に表示」のチェックがはずれています。 この表示を設定した表示と変らないようにするにはどこか別に設定するところがあるのでしょうか。TemplatesにあるNormal.dotmも削除して更新してみました。 アドバイスお願いします。
- 締切済み
- Word（ワード）
- ブラウザ別の余白誤差って解消できないの？
IEとSAFARIでは画像を横一列に配置するとIEで最後に余白が生じます。これって解消できないのですか？ WEB幅は８５０PXです、画像幅１４０ＰＸの画像を横一列に６枚並べるとSAFARI画面では、殆ど余白が無く並ぶのですが、IE8画面では右に実寸で３センチ程度の余白が発生します。 例えば、この６枚の画像を決定してIEとSAFARIとも余白無しに均等に配置するCSS等はないのでしょうか？ そんな都合のいいものはないですかね？ ネットで検索しますが、全く見つかりません。ＣＳＳハックとかがそうなんでしょうか・・ 知って居られる方いませでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- HTML、CSS、スマホの時だけ全画面表示にしたい
パソコン向けにサイトを作成しまして、横幅800pxと指定しているのですが、スマホで表示すると全画面表示の方が見やすいので、スマホの時だけ全画面表示にできるHTMLかCSSの指定方法はありますか？ パソコンで表示させた時は、横幅800pxのままにしたいです。
- ベストアンサー
- その他([技術者向] コンピューター)
