- ベストアンサー
同じページでスマホでの表示とＰＣでの表示
同じページでスマホでの表示とＰＣでの表示で 文字のサイズを変えるスタイルシートを設定できますか？ 例えば、 スマホなら table[summary="table_A"] { font-size: 0.85em; } でPCなら table[summary="table_A"] { font-size: 1em; } のようなことがしたいです。
- vdvxhvzfnck
- お礼率95% (44/46)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSで、メディアクエリという機能を利用することでできると思います。 PC/スマホというデバイスごとに切り替えるのではなく、表示される画面の幅によって適用するCSSを制御する形になります。 たとえば以下のように指定するとブラウザの幅が 768px～990pxの場合にのみ適用されるCSSを記述できます。 @media (min-width: 768px) and (max-width: 990px) { ・・・ } 参考: https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=ja
その他の回答 (1)
- catpow
- ベストアンサー率24% (620/2527)
>>同じページでスマホでの表示とＰＣでの表示で 文字のサイズを変えるスタイルシートを設定できますか？ それがしばらく前から広まっている「レスポンシブ・ウェブデザイン」です。
お礼
ありがとうございます。
関連するQ&A
- すべてのテーブルの文字のサイズは設定したくない
table { font-size: 2em; ←tableタグに指定 } これで、ページ内のすべてのテーブルの中の文字のサイズが統一されますが、 ある複数のテーブルは、 font-size: 2em; ではないサイズで表示させたい場合、 スタイルシートはどのように宣言すればいいのでしょうか？ table { に名前を付けて宣言する方法と、 実際ＨＴＭＬでテーブルを書く時の文法を教えてください。
- 締切済み
- HTML
- thのスタイルを適用するにはどうすればいいでしょう
<table border=1 class="test1"> の部分にclassを設定するだけで thのスタイルを適用するにはどうすればいいでしょうか？ 理想としては添付画像の下のテーブルの様に thの部分だけスタイルを適用したいのですが 実際はテーブルのレコード数が多い為、 <th class="test2">を全てのthにつけるのを省略したいです。 なので、<table border=1 class="test1">の部分にthのスタイルを設定したいのですが table.test1 {font-size: 5em;} の部分はどのように記述すればいいでしょうか？ 現在の table.test1 {font-size: 5em;} だとテーブルすべてに適用されてしまいます。 理想の表示は下のテーブルで 理想のソースは上のテーブルです。 ------------------ 以下ソース <html> <head> <style type="text/css"> table.test1 {font-size: 5em;} th.test2 {font-size: 5em;} </style> </head> <body> <table border=1 class="test1"> <tr><th>No</th><td>a</td></tr> <tr><th>No</th><td>a</td></tr> </table> <br> <table border=1> <tr><th class="test2">No</th><td>a</td></tr> <tr><th class="test2">No</th><td>a</td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- 表示できないページ
社内のイントラを作成しています。 以下のソースのページを作成したのですが、 WIN95、IE5.00の端末で開くと「ページが表示できない」 というメッセージがでて、ページが表示できません。 原因として、なにがおかしいのでしょうか？ 宜しくお願いします。 ＜＜ ソース ＞＞ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY BACKGROUND COLOR="white" TEXT="#FF80C0" LINK="#FF80C0" VLINK="#009999"> <CENTER> <P STYLE="BACKGROUND-COLOR:00D9B2;"><FONT SIZE=3 COLOR=#CC0099>便利なリンク集</FONT></P> <BR> <FONT SIZE="4" COLOR=BLACK><B>～便利なリンク集～</B><FONT> <P><BR> </CENTER> <IMG SRC=""CLASS="PARAM1" ALIGN="right" width="100" height="90"> <BR><BR><BR> <CENTER> <TABLE BORDER="0"WIDTH="350"> <TR VALIGN="MIDDLE" ><FONT SIZE=3 COLOR=#000000><A HREF="html"> 情報・通信グループ ユーザ管理システム （ユーザ向け）</A></FONT></TR> <TR VALIGN="MIDDLE" ><FONT SIZE=3 COLOR=#000000><A HREF="soum2.html" >事故報告書の作成（ＳＥが対応した事故を対象とする）</A></FONT></TR> <TR VALIGN="MIDDLE" ><FONT SIZE=3 COLOR=#000000><A HREF="doc"> 東京インフラＧ 所有品の持出しについて </A></FONT></TR><BR> <TR VALIGN="MIDDLE" ><FONT SIZE=3 COLOR=#000000><A HREF="">ＰＧ制定要否決裁流れについて</A></FONT></TR> </TABLE> <BR><BR> <FONT SIZE="4" COLOR="RED"><A href=""><B>back</B></A></FONT> </CENTER> </BODY> </HTML>
- ベストアンサー
- HTML
- スタイルシート、ネスケで基本のフォントサイズが適用されない
スタイルシートを外部ファイルとして呼び出して、スタイルを下記の様に指定しました。 <style type="text/css"> <!-- body{font-size:13px;} table{font-size:13px;} --> </style> IEではページ全体のテキスト、テーブル内のテキストともに13pxで表示されるのですが、ネスケだとテーブル内の13pxは適用されてもページ全体のテキストに13pxが適用されません。emや%といった単位や相対・絶対値の違いではないと思うのですが、ネスケのページ全体のテキストの指定には他に記述があるのでしょうか？ できればスタイルシート1つでIEでもネスケでもある程度同じに見えるようにしたいのですが…お願いします。
- ベストアンサー
- HTML
- 外部スタイルシートがテーブル内に効かない
外部スタイルシートの設定が、テーブル内には効きません。 特に、フォントや行間を効かせたいのですが、どうしたらいいのでしょうか。 以下、大雑把ですが。 #main { float: none; margin-left: 132px; line-height: 1,5em; margin-top : 50px; } #main td, th { line-height: 1,5em; } と外部スタイルシートで指定していて、 <DIV id="main"> <TABLE cellpadding="10" background="image/003-002.gif" style="filter:Alpha(opacity=75);"> <TBODY> <TR> <TD> <H3>内容</H3> </TD> </TR> </TBODY> </TABLE> というようなテーブルを書きました。 テーブルがなければ、スタイルシートは効きます。 初歩的な質問だとは思うのですが、テーブル内に行間などを設定する方法をお願いいたします。
- ベストアンサー
- HTML
- 文字の大きさを固定する方法
Windows側でフォントサイズを"小さいフォント"にしても"大きいフォント"にしても文字の大きさが同じになるようにすることは可能でしょうか。 スタイルシートのTABLEで font-size : 12pt; という指定はしているのですが、Windows側で"大きいフォント"の設定をすると文字が大きくないり、横スクロールバーが表示されています。 どちらのフォントサイズを選択しても横スクロールバーが表示されないようにしたいのですが。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ＜css＞テーブルの中と外で同じフォントサイズにならない
WinXPproSP2＋IE6です。 HTMLで作ったページにテーブルがあります。 外部cssでbodyとtableのフォントサイズを別々の設定で20pxにしました。 このcssを前述のHTMLにリンクさせ、IEで表示すると、テーブルの中の文字とテーブルの外の文字の大きさが違います。 どうすれば同じになるのでしょうか？ HTMLでのフォントサイズは行っておりません。 ＜cssの記述内容＞ body{ font-size:20px; } table{ font-size:20px; }
- ベストアンサー
- CSS
- Macのieで文字がテーブルからはみ出て表示される
私は普段、Windowsでホームページを作成しているのですが、 テーブル内のテキストの文字間や行間をスタイルシートで調節すると、 Windowsではどのブラウザでも問題なく表示されるのですが、 Macのie（5.2）で見ると、テーブル内で改行されずに 文字がはみ出して表示されてしまいます。 文字がはみ出ないようにするにはどのようにすればよいのでしょうか？ よろしくお願いします。 （例） 【CSS】 td { line-height : 1.5 ; letter-spacing : 0.5em ;} 【HTML】 <table width="50%" border="1"> <tr> <td width="100%"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん。 </td> </tr> </table>
- ベストアンサー
- HTML
- テーブル内の文字のサイズを変更し携帯で表示したい
html文を勉強しながら簡単なホームページを作成しています。 <style type="text/css"> <!-- table { font-size: 20px ; } --> </style> を使ってテーブルの中の文字のサイズを変更していますが パソコン（ＩＥ）で見るとうまくできるのに携帯でみると文字の大きさが変わっていません。 <font size=1> </font> も入れているのですがテーブル以外の文字はちゃんと指定されたサイズになっています。 携帯で表示かつ文字の大きさを指定するのはどうすればいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- table[summary="table_1"]
table[summary="table_1"] td,th{ padding: 5px 10px; } とスタイルシートで設定した場合、 <table summary="table_2"> のthには、 padding: 5px 10px;は適用されないですよね？ 上記のcssでthタグにpadding: 5px 10px;が出来ようされるのは、 "table_1"だけですよね？
- ベストアンサー
- CSS
お礼
ありがとうございます。