- ベストアンサー
css スマホ対応
css スマホ対応 cssスマホ対応 現在デザイン初心者のものです。 簡単なwebページを作り pc用 スマホ用のデザインをしているのですが 問題はスマホの機種によって （アンドロイド iphone4 iphone5） 微妙にスタイルが崩れます。 スマホのデザイン全ての機種を一律に合わす方法などないものでしょうか ご教授お願いします。
- a7a7a77a7a74
- お礼率97% (48/49)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
「微妙にスタイルが崩れます」では、何を指しているか分からないので、なかなか回答がつかないと思いますよ。明確な問題について、明確な解決策が生まれます。その逆も然り。
関連するQ&A
- CSS3の対応
CSS3ってどれくらい皆さんはどれくらいつかっていますか教えてください 質問1 スマホサイトでCSS3は全力で使えるんですか?（アンドロイドも） 質問2 スマホサイトはCSS2.1のセレクタだけでつくってもいいですか？（かっこ悪いですか？） 質問3 みなさんはパソコン用webサイトでCSS3はどのくらいつかっていますか？ 質問4 パソコン用WEBサイトで隣接セレクタと子供セレクタなどIE6が表示できないセレクタはつかっていますか？ ブラウザIEの対応なのですがIE9が丸角とbox-shadowくらいですよね？ IE6～IE8が亡霊のように残っているので困っています
- ベストアンサー
- CSS
- CSSでPC用、他のスマホ用、PC用を扱うには？
こんにちは。 html5を準拠するようにサイトを構築している者です。CSSでPC用、スマートフォン用、iPhone用に分けようと考えています。 http://mnemoniqs.com/web/one-css-smartphone/ 上記のサイトにて、 1 <!--メインCSS--> 2 <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> 3 <!--スマホ用CSS--> 4 <link media="only screen and (max-device-width:480px)" href="css/smartphone.css" type="text/css" rel="stylesheet"/> この様に書いてありますが、私はauのAndoroidスマホを使用していまして、widthが481px以上になる環境です。それで自サイトをみると、PCでは3ペイン、スマホでも縮小された左右のペインがあります。iPhone、他のスマホでは左右のペインをなくして、メインだけを表示したいのです。 例として http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html では、スマホで見ると左右のカラムが消えて、文字が大きくなり見やすく見やすいです。ですが私のサイトではそれが出来ていないのでそうはいきません。 ちなみにPCブラウザで http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html を表示するとリダイレクトでPC用サイトに行ってしまいますので調べることが出来ませんでした。 どなたか1ページをCSSを使ってPC用、iPhone用、普通のスマホ用にする事が出来ないでしょうか？ お導きの事よろしくお願い申し上げます。
- ベストアンサー
- CSS
- PIXUS MG6330 スマホwebの印刷
2012年発売のPIXUS MG6330について、紹介ページには「スマートフォンからのダイレクトプリントができます」と書いてあります。そしてアプリ「スマホdeプリント」を使えばスマホのwebページもプリントできる、と書いてあります（Androidの場合）。 しかし、この機種に対応している「スマホdeプリント」はメーカーが既に配信を止めているらしく（新機種を売るため？）、ダウンロードができないそうです。そもそもwebページには対応できないと言う人もいます。 いずれにしても、この機種で対応できるアプリは開発されていないでしょうか。ちなみにスマホはAndroidです。今年発売の新機種は完全に対応しているようですが、デザインがあまり気に入らないため購入をためらっています。 ご存知の方、アドバイスをお願いいたします。
- ベストアンサー
- プリンター・スキャナー
- 静的なPCサイトをスマホ対応にする手法
まだスマホもCMSも流行っていない時期に作成した、 単純なｈｔｍｌとcss構築のPCサイトをスマホ対応(デザインやレイアウトの最適化)しようと思います。 以下のような条件の場合、どういった手法が最善でしょうか？ ・PCサイトの全体のページ数は100P以上。ほぼ静的なhtmlで、一部aspによる更新システムあり。 ・すべてのページを最適化しようとは考えていない。トップページと主要なコンテンツ数ページのみ最適化したい。 ・頻繁に修正の入るコンテンツ内容については、PC版を修正したらスマホも同様に変わるようにしたい。(修正の二度手間を無くすため) ・メインナビゲーションなど、ほぼ固定の箇所についてはPCとスマホそれぞれ別ソースでもかまわない 更新の二度手間がかなり気になる箇所なので、できればワンソースでcssによる切り替え対応したいところですが、もともとスマホのことなんて全く考慮していないhtml設計なので、正直cssだけでどこまで最適化できるのか微妙なところです。 希望の形としては、 PCサイト用の大枠のhtmlと、スマホ用の大枠のhtmlがそれぞれ存在していて、 その中のパーツパーツをワンソースで管理できたらベストだなーと思っています。 (PHPファイルとかで部分的なソースをインクルードして使う、みたいな感じでしょうか。) 上記のような方法は可能なのでしょうか？ 可能であるとしたら、どのように実現すれば良いでしょうか。 参考URLなどでも結構ですので教えていただきたいです。 また、上記手法が一般的ではない場合、どういう手法がベストなのでしょうか。 ご教授いただけますと幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- PCかスマホか判別し、CSSを振分ける方法はあるか
いくつかサイトを持っていますが、現在のPCサイトをスマホにも対応させたいと考えております。 <私の認識><やりたいこと><質問>に分けましたので、よろしくお願いいたします。 <私の認識> １．現状、まだHTML5に対応していないブラウザがある。 ２．PC用サイトとスマホサイトをHTMLレベルで作り分けると、アクセス数が分散してしまう。 ３．.PC用サイトとスマホサイトをHTMLレベルで作り分けると、更新作業が煩雑になる。 <やりたいこと> 「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分けたい。」 １．.PCサイトの画像数や表現力は維持し、スマホサイトは画像量を抑える為に、画像をCSSのbackground-image:url(xxx.png)で表示させれば、PCには大きい画像、スマホは小さい画像を使った表現ができるのではないか。 ２．PCサイトは幅固定、スマホサイトはリキッドデザインにして各画面幅に対応させられるのではないか。 <質問> 1.上記<認識>で間違っている部分はありますか？ 2.上記<やりたいこと>の、「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分ける」方法はありますか？ 調べたところ、画面の幅に応じてCSSを振り分けることはできようですが、各幅毎にCSSを作るというのも難しいので、スマホはリキッドデザインで各幅に対応したいと思っています。 よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- デザインビューでCSSのスタイルが全く表示されなくなりました。
初めまして、質問させて頂きます。 ファイルを開いたら、昨日までは表示されていたCSSのスタイルが、デザインビューで 全く表示されなくなりました。 （テキストの色を赤など…全てのCSSスタイルが反映されない） 他のページや、新規で作ったページも表示されません； DWを終了、PCを再起動してもダメでした。 IEや他のブラウザでは表示されるので、CSSのリンクの問題ではないと思うのですが、 特に環境設定等も触ってないのですが、Dreamweaverでこういう機能があるのでしょうか？ （デザインビューでスタイルを非表示にするetc…） ブラウザでは問題ないのですが、DW初心者なので、デザインビューで確認できないと困ってしまいます。 すみませんが、よろしくお願いいたします。 システム環境：Mac DWのバージョン：8
- ベストアンサー
- ホームページ作成ソフト
- PCとスマホでデザインを変えたいのですが
http://iro-color.com/design/web/optimized-smartphonesite.html を見ると ＞CSSは複数の外部CSSを用意して画面サイズごとに振り分ける方法と、 1つのCSSファイルの中ですべて指定する方法があります。 PCサイトとスマホサイトでがっつりデザインを変えたい場合は外部CSSを、 部分的に替えるなら1つのCSSで管理した方が使い勝手がいいと思います。 とあるのですが 色はＰＣとスマホで同じで 文字のサイズやテーブルの幅だけを変えたい場合は 「PCサイトとスマホサイトでがっつりデザインを変えたい場合」 と 「部分的に替える」 のどちらに該当するのでしょうか？
- ベストアンサー
- CSS
- iphoneとスマホの対応オーディオ機器
極超初心者ですので優しく教えてください。 現在auスマホ1年使用してますが、機械的劣化（コネクタの接触不良等やスライド部のガタツキなど）のため機種変更しようと思っております。 iphoneも検討しておりました。理由はオーディオミニコンポやカーオディオ等iphoneに対応したものが家電量販店に数多く陳列されており、心くすぐられます。 しかし、auスマホもやっと使えるようになり、このままauスマホ機種変更にしようか迷っています。 auスマホでもオーディオミニコンポやカーオーディオに接続使用し音楽等楽しむ事は出来るのでしょうか？ それから、iphoneとauスマホ（アンドロイド）の違いや、長・短所等ありましたら、教えていただければ非常に助かります。 よろしくお願いします。
- ベストアンサー
- iPhone・iPad・iOS
- スマホとPCの表示をクリックで切り替える方法
初心者でスマホ対応に困っております。 同一ページ（ワンソース）で対応できるようにしようと javascriptのuserAgent（※以下参照）でPC用とスマホ用の 表示CSSが切り替わるページを作成しています。 スマホサイトのフッターによくある「PC」へのリンクをクリックすると スマートフォンでもPC用のスタイルが適用されるようにしたいと思っております。 また、PC用CSSからスマホ用CSSへ戻るリンクも設置したいと思っております。 環境は「.htaccess」と「php」が利用できないサーバです。 できればウィンドウサイズで表示が切り替わるのではなく、 リンクをクリックするだけで PC用とスマホ用のCSSを切り替えたいと思っております。 色々と探してみたのですが、なかなか思うソースが見つからなかったので、 実現可能かどうかも踏まえてご教授いただけますと幸いです。 以下、こんな感じでCSSを切り替えております。 if (navigator.userAgent.indexOf('iPhone') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); } else if (navigator.userAgent.indexOf('iPad') != -1) { document.write('<link rel="stylesheet" href="css/iPad.css" />'); } else if (navigator.userAgent.indexOf('Android') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); }; どうぞよろしくお願い申し上げます。
- 締切済み
- CSS
- ホームページ作成のCSS活用で出来る範囲
現在会社のホームページを手がけております。 基本的にビルダー９を使ってのデザインをしているのですが、是非使いたい技術の中にCSSがあります。 そのCSSで出来ることの範囲を教えてもらえないでしょうか？ 具体的には 外部スタイルマネージャーによってスタイルを一律に決めることができるとありますが、この一律に決めれる範囲はどの辺りまで出来るのでしょうか？ 望みとしてはフレームのような効果まで狙っています。 つまり色、フォント、場所だけでなく 図やファイルまで当てはめて、新しいページを作る際には内容だけ変えればよい、そしてメニューが増えたら外部スタイルマネージャーで編集すればよい。 よくフォントや色などの説明は良く出ているのですが、 それくらいまで出来るのか、いろいろなサイトを見ても良くわかりません。 良く知っている方からしてみればかなり初歩的なことだと感じられますが、どうか教えてください。
- ベストアンサー
- ホームページ作成ソフト
お礼
回答ありがとうございます nav リンクを横並びに設定すると 画面の大きいアンドロイドでは 横一列に綺麗に並びますが 少し画面の小さいアイフォンだと 中途半端に二列になっていたり アイフォンだとログイン画面のsubmitボタンが大きい枠組のdiv要素からはみ出していたりです。