- 締切済み
スタイルシートでの文字サイズ指定について
ホームページの文字表示サイズについての質問です。 私は全てWindows Vistaのメモ帳で作っているのですが、文字サイズを <Font Size="サイズ"> で指定するやり方では、ＭＡＣで有効ではないと分かり、スタイルシートの外部から引き出すやり方で、まずs.cssに、 BODY { font-size: 13px } と書き、index.htmlに <head> <style Type="text/css"> <!-- body,td {line-height:15pt;} --> </style> <link href="s.css" rel="stylesheet" type="text/css"> </head> と打ち込んでみました。 しかし、こうするとMacX10.5では文字化けを起こしてしまいました。 <link href="s.css" rel="stylesheet" type="text/css"> を挿入するやり方がどこかおかしいのでしょうか。 または、文字サイズの指定のやり方が、他にもあるのでしょうか。お手数かと思いますが、どうかお助けください。
- akira0127
- お礼率25% (1/4)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- metametamu
- ベストアンサー率51% (153/295)
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> これをhead内に追加してはどうでしょうか
- metametamu
- ベストアンサー率51% (153/295)
フォトサイズの指定法でのオススメです。 html { font-size:medium !important; font-size:small; } body { font-size:100.01%; } これで大抵のブラウザでは16px相当で表示されます。(ブラウザの初期設定の値が大抵16pxなので) あとは個別に%で指定していきます。htmlとbodyには上書き指定しないようにしてください。 以下指定サイズと%の関係。 10px 62.50% 11px 68.75% 12px 75.00% 13px 81.25% 14px 87.50% 15px 93.75% 17px 106.25% 18px 112.50% 19px 118.75% 20px 125.00% 21px 131.25% 22px 137.50% 23px 143.75% 24px 150.00% 25px 156.25% 26px 162.50% 27px 168.75% 28px 175.00% 29px 181.25% 30px 187.50% 31px 193.75% 32px 200.00%
補足
metametamuさん、ご丁寧な回答ありがとうございます。さっそく試してみたところ、ＷＩＮでは問題なく表示されました。 しかし、Ｍａｃで確認してみたところ、文字化けを起こしてしまいました。 以下Ｍａｃで見た私のＨＰの上部のソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>KUI-TIME! *** ƒNƒCƒ^ƒCƒ€</title> <meta name="description" content="‚­‚錫‚½ 「・「・‚Ì。ニn・#236;ƒCƒ「・#402;XƒgƒTƒCƒg 。"> <meta name="keywords" content="‚­‚錫‚½,KUI-TIME,ƒNƒCƒ^ƒCƒ€,‚­‚ 錫‚½‚錫‚Þ,食ŽžŠÔ,KUITAIMU,kuitaimu,KUITIME,kuitime,Kuita,Kuitaimushi,Kuitaimusi,‚­‚ 錫‚½‚錫‚Þ‚µ,食‚ 錫‚½‚錫。ヌŽ,ƒNƒCƒ^ƒCƒ€ƒV"> <meta name="ROBOTS" content="NOFOLLOW"> <style Type="text/css"> html { font-size:medium !important; font-size:small; } body { font-size:81.25%; } <!-- body,td {line-height:15pt;} --> </style> 以下がＷＩＮのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>KUI-TIME! *** クイタイム</title> <meta name="description" content="くいた運営の創作イラストサイト。"> <meta name="keywords" content="くいた,KUI-TIME,クイタイム,くいたいむ,食時間,KUITAIMU,kuitaimu,KUITIME,kuitime,Kuita,Kuitaimushi,Kuitaimusi,くいたいむし,食いたい虫,クイタイムシ"> <meta name="ROBOTS" content="NOFOLLOW"> <style Type="text/css"> html { font-size:medium !important; font-size:small; } body { font-size:81.25%; } <!-- body,td {line-height:15pt;} --> </style> やはりどこか命令ミスを起こしているのでしょうか。
- uriboar
- ベストアンサー率15% (143/916)
・文字サイズの指定について http://www5e.biglobe.ne.jp/~access_r/hp/css/css_exp_008.html#1 単位は使えるものは自由に使って良いのですが、例えば13pxと指定してしまった場合、高解像度のモニタを使っている人から見たら豆粒でしょうし、逆に携帯端末などで見ている人にとっては大きすぎて大変だったり、およそ見る人に親切とは言えません。 最近のブラウザは、文字サイズの変更機能も充実していますが、それを知っている方ばかりとは限らないですし。 文字に限らず、サイズの指定は、可能な限り"%"などの相対的な指定をすることをおすすめします。 ・文字化けについて No.1の方の回答の通りです。
お礼
uriboarさん、ご回答ありがとうございます。 単位はpxだと見てくださる方に不親切だったのですね。今後は%などの指定にすることにします。 本当にありがとうございます。
- bakakyatap
- ベストアンサー率38% (115/299)
＞font-size: 13px 間違いではないが、通常 pt を使います。単位は正確に。 ＞こうするとMacX10.5では文字化けを起こしてしまいました しかし、文字化するとは思えません。設定が効くか、効かないかだと思いますが？ 別な要因があるかと思います。 文字化けとは、具体的にどのような状態になっていますか？ 例を挙げてください。 またDOCTYPEとかどうなさっているのでしょうか？ ブラウザは何で、エンコードはどのようになっています？ また、HTMLファイル等はShift_JISですかユニコードで書いていますか？ さらにそれらを、ちゃんと指定していますか？ 特に文字コードが混じっている場合、文字化けを起こしやすいですが？
補足
bakakyatapさん、ご回答ありがとうございます。 文字化けは、おそらく命令文の挿入位置がおかしいだとか、設定がおかしいためと思われます。 文字化けは、Ｍａｃ OS X 10.5.8ではローマ字と記号、そしてロシア文字？に変換されてしまっていて、テキストエンコーディングをデフォルトから日本語（Ｓｈｉft ｊｉｓ等）に変更すると、ちゃんと表示されます。 例を挙げようと今ＭａｃでＨＰを開いたのですが、最初は文字化けしていたのに、今は普通に表示されています…デフォルトでもです。謎です。 テキストエンコーディングを日本語（ＥＵＣ）にしてみたとここ、これだけ nCXgu ↑創作イラストサイトです が 化けた このように化けました。 DOCTYPEは全く存在を知りませんでした。お恥ずかしい限りです。<html>より上に、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">を挿入してみました。 ブラウザはＩＥで、エンコードは自動選択にチェックが入っており、点が入っているのは日本語シフトＪＩＳです。 ＨＴＭＬファイル等は、何で書いているのか分かりません。申し訳ありません。検索をしてみたのですが、私の能力では無理でした。どうすればそれが分かるのか、大変申し訳ないのですが、お教え頂ければ幸いです。 文字コードについては、勉強不足ゆえによくわかっていません。本当に至らないばかりで申しわけないです。
関連するQ&A
- スタイルシートのフォント指定
他の人が作成した外部スタイルシートをベースにしてホームページを作っています。スタイルシートと同じ階層、またはその１つしたまではちゃんと指定通り表示されるのですが、のフォルダから2つしたの階層になると文字の大きさがそれ以外の所と違うサイズになります。まったく外部スタイルシートを読んでいないわけでもないようなのですが、、、。分かりません。 どなたか分かる方、どうかよろしくお願いします。 <link href="../../css/link.css" rel="stylesheet" type="text/css"> <noscript> <link href="../../css/winie.css" rel="stylesheet" type="text/css"> </noscript>
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートの設定
スタイルシートをリンク設定したく、文頭に下記の記述をしました。 ++++++++++++++++++++++++++++++++ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ++++++++++++++++++++++++++++++++ まったく、反映されません・・ どうして何でしょうか？ どなたかお助けください。
- 締切済み
- ホームページ作成ソフト
- CSSで、外部スタイルシートを2つ指定した場合。
たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように２つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。
- ベストアンサー
- HTML
- HPの文字の大きさを変えるCSSがうまくいきません
ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシート
こんばんは。HPを独学で作っている超初心者です。 スタイルシートが反映してくれないのです。下記の記述で 何が違うのでしょうか？？？ ---01.css--- <sytle type="text/css"> a:link{text-decoration:none;} <style> ---index.html（抜粋）--- <head> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうしても index.html のリンク部分に下線が出てきます。 どうして消せないのかが分かりません！！！ どなたか教えてください！よろしくお願いいたします！
- 締切済み
- その他（インターネット・Webサービス）
- スタイルシート２
１．スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか？ <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ！！ といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような（くどい＾＾）気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ ２．さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル（省略できない）。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか＾＾ リンクできるのは、見やすく便利ですが・・・
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートが反映されない。
htmlに <link rel="stylesheet"type"text/css" href="style.css" media"all"> と記入 style.cssに <style type="text/css"> <!-- body{ text-align:center; padding-top:20px; h1{ text-align:center; font-size:1.5em; color:♯800000; backgraund-color:♯FFFFFF; padding-top:20px; padding-bottom:20px; } --> </style> と記入 bodyは反映されるのにh1が反映されません。 原因がまったくわかりません。 なにが悪いのでしょうか？。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- フォントのサイズが変わってしまいサイトが崩れる
IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか？ http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか？最優先なら下記のような感じでよいのでしょうか？ <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか？ 教えてください。
- ベストアンサー
- HTML
- スタイルシートのリンクをはる時・・・
<link href="css/common.css" rel="stylesheet" type="text/css">と <link href="/css/common.css" rel="stylesheet" type="text/css">の違いを教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが
記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。
- 締切済み
- JavaScript
補足
ご回答ありがとうございます。 head内に追加してみましたが、効果はありませんでした。