• ベストアンサー

レスポンシブデザインのフォントサイズの切り分け

Wordpressでレスポンシブデザインのテーマを使っています。 ひとつ困っていることがありまして、 ＰＣから閲覧するとちょうどよいのですが、スマホでみると、 タイトルのフォントサイズが大きいため、 スマホのみフォントサイズを小さくしたいと思っております。 要は、ＰＣとスマホのタイトルのフォントサイズを分けたいのです。 レスポンシブデザインのフォントサイズの切り分けがいまいちよくわかりません。 お手数かと思いますが、ご教授いただけると幸いです。

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

＞ＰＣから閲覧するとちょうどよいのですが、 　font-sizeを指定している。・・・どんな方法で？ 　マルチユーザーエージェント対応ならfont-sizeはすべて相対サイズで指定されているはずなので、そうはならないはずですが？？ 　どこかで、pt,ps,inchi,mm,pxなどの絶対サイズで指定しているのではないですか？ pxはCSS2.1で絶対サイズに訂正されました。

9uestion55
質問者

お礼

どうもありがとうございます。 >pxはCSS2.1で絶対サイズに訂正されました。 勉強になりました。 使用しているレスポンシブデザインのテーマは、pxで指定されていました。 問題の方は解決しましたので、解決済とさせてもらいます。

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

関連するQ&A

  • レスポンシブデザイン？

    cssで font-size: 0.85em; にしていて、スマホで見ると文字のサイズはちょうどいいのですが 同じサイトをＰＣで見ると文字のサイズが小さすぎて見づらいです。 一つのサイトを二つの媒体（スマホ・ＰＣ）で見る際に 文字のサイズを変える場合は レスポンシブデザインと言うのを学べばいいのでしょうか？

    • ベストアンサー
    • CSS
  • レスポンシブデザイン

    スマホとＰＣで同一ＵＲＬにして レスポンシブデザインでｃｓｓを変えたいのですが それぞれどのサイズにすればいいのでしょうか？ 現在は @media screen and (max-width: 499px) { * { font-size: 1.0em; } } @media screen and (min-width: 500px) { * { font-size: 2.0em; } } の様にしていて ５００以上だと大きく表示されるようにしています。 私のスマホ（アンドロイド）・ＰＣなら問題ないのですが 一般的な幅を教えてください。

    • ベストアンサー
    • CSS
  • webデザインのフォントサイズについて

    こんにちは、現在WEBサイトを作っています。 macとwinでフォントの種類やサイズなどの表示が変わるのは分かっていたのですが、同じmacでも画面が大きいデスクトップと画面が小さいノートパソコンで文字サイズが全く違うので、困っています。同じサイズで表示させるにはどうしたらいいでしょうか。 （現時点ではレスポンシブデザインはしていません。これから別にスマホ用のサイトを作る予定です。） ちなみに、フォントサイズは、ピクセルで指示しています。 分かる方いらっしゃったら、どうぞ宜しくお願いします。

    • 締切済み
    • Mac
  • レスポンシブデザインのjQueryの書き方

    WEB初心者ながら、レスポンシブデザインに対応したホームページを制作したいと思っています。 スマホサイズのときのみ、ドロワーメニューにしたいのですが、jQueryをindex.htmlのheadに適応するとＰＣサイズの画面の時にも、そのjQueryが適応されてしまいます。 cssは、@media only screen and (min-width: 640px) { の書き方でひとつのファイルで行っております。 スマホサイズのときだけjQueryを適応させるにはどのような書き方をすればよろしいのでしょうか？ 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • ワードプレスのページタイトルのフォント変更

    Wordpressの「Onetone」テーマを使っていますが、 ページタイトル（PageTitle）のフォントサイズの変更ができなくてこまっています。 「外観」＞「カスタマイズ」＞「Onetone:Pages&Posts」＞「Page Title Bar」から編集するのか、と推測しているのですが、フォントサイズを変更する欄がありません。 かといって、style.cssを直接編集して、h1タグにフォントスタイルを追加しても、変化がありません。 「Onetone」テーマの場合、ページタイトルのフォントサイズは変更できないのでしょうか？

    • ベストアンサー
    • HTML
  • レスポンシブデザインのCSSについて質問です。

    レスポンシブデザインのCSSについて質問です。PCで閲覧した時は、文章を左寄せ、画像を右寄せで表示させて、スマホで閲覧した時は、文章の下に画像を配置する方法を教えて下さい。 ちなみに私の場合はPC用サイトを以下のように作成していますが、スマホではどのようなCSSにすればいいのか、わからずに悩んでいる状況です。可能であれば、簡単なサンプル・ソースを教えていただけると嬉しいです。よろしくお願いします。 ■html <p><img src="gazo.png" class="photo">このページはサンプルです。</p> ■css .photo { float: right; width: 230px; position: relative; }

    • 締切済み
    • CSS
  • IE6でどのフォントサイズも同じ大きさに

    ふと、ブラウザIE6の表示を見ていて気が付いたのですが、どのホームページを表示しても、通常のHTMLで書かれたページの<FONT SIZE>タグが無視されているようなのです。 例えば次のようなHTMLを表示しても同じ大きさの文字しか表示されません、ブラウザの表示-文字サイズによる変更はできますが、やはりそれぞれの文字のサイズは同じです。 <HTML> <HEAD><TITLE>TEST</TITLE></HEAD> <BODY> <FONT SIZE="3">A<BR></FONT> <FONT SIZE="5">B<BR></FONT> <FONT SIZE="7">C<BR></FONT> </BODY> </HTML> 他のPCでは正しく表示されるので、このPCの問題だと思っています。プラグインとか他のソフトが悪さしているのでしょうか？ OSはWin2000ProSP4です、どなたかご存知の方がおられたらアドバイスお願いいたします。

  • インラインで設定したフォントサイズを相対的に

    今既にあるPCサイトのスマホ用テンプレートを作っています。 例えば <span class="hage" style="font-size:20px">hoge</span><br /> <span class="hage" style="font-size:18px">hogege</span> こういうHTMLが既にあったとして スマホで見ると20pxや18pxがでかい！と思ったときに 相対的に全体のサイズを下げることは不可能でしょうか？ hogeはhogegeより大きくしたいのですが CSSで.hage{font-size:14px;}などとしてしまうと 当たり前ですが全部14pxになってしまいます。 PCで見たときは上記の通りで スマホで見たら <span class="hage" style="font-size:14px">hoge</span><br /> <span class="hage" style="font-size:12px">hogege</span> こう表示される、なんてことは出来るんでしょうか？ JSなどによる動的な操作は重くなりそうなのでそれ以外にありましたら お知恵をお貸し下さい。

    • ベストアンサー
    • CSS
  • HTML５とCSS３のレスポンシブデザインについて

    今、wordpressでHTML５とCSS３のレスポンシブデザインに独学で、挑戦しています。 タグを手書きで書いているのですが、分からない点があります。 ▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。 display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。 どこか間違いのタグがあるのでしょうか？？ 教えていただけると嬉しいです（●＾o＾●） ↓ナビゲーションバーのタグ↓（PC） #menu ul{ width:100%; margin:0; padding:0; color:#000; background:#000; } #menu li{ list-style:none; border-top:2px solid #FFF; } #menu li a{ padding:16px 20px; display:block; text-decoration:none; background:#000; color:#FFF; } .togmenu{ padding:16px 20px; } ↓PCでは非表示になるはずのMENU↓（PC） .menubtn{ display:block; background:#000; color:#FFF; } ↓スマホで表示されるタグ↓ @media only screen and(min-width:500px){ .menubtn{ } .togmenu{ display:none; background:#000; } #menu li{ display:inline-block; border:none; } } ★上記のレスポンシブデザインで制作中のサイトURL★ http://fashioncode.jp/

    • ベストアンサー
    • HTML
  • CSS {font-size:数値px}の指定について

    こんにちわ。 外部CSSにて、以下のような記述を読み込んでいます。 .12 {font-size:12px} 参考書を見た所、IE6とNN7は対応と書いてありました。 WindowsXPSP2にて、IE7で閲覧した所問題ありません。 同環境にて、NN7とFirefox1.5では文字が指定しない場合と 同じ大きさで表示されてしまいました。 指定箇所は、様々でDivやFontに入れても、TableやTDに 指定を行っても表示が全く変わりませんでした。 例：<td class="12">のように 私の指定や記述が間違いなのでしょうか。 ％でのフォントサイズは、環境によって拡大縮小が異なると 思い、出来るだけ数値指定で表示をさせたいです。 ご存知の方おりましたら、ご教授頂けると幸いです。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する