現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。
通常のIEではデフォルトでフォントを表示すると非常に大きな文字になるので-1のフォントを使用しています。しかしNNだと(特にお年寄りには)見づらいページになってしまうような感があります。
そこでスタイルシートでIEでもNNでもMacでもWinでも10ptの文字にして、文字にふれたときに下線がつくなどの処理をしました。

<style type="text/css">
<!--
a:link {font-size: 10pt; text-decoration:none; color:#000000; }
a:visited {font-size: 10pt; text-decoration:none; color:#000000; }
a:active {font-size: 10pt; text-decoration:none; color:#000000; }
a:hover {font-size: 10pt; text-decoration:none; color:#FF0000; }
-->
</style>

しかし、全く見られないなど(おそらくブラウザのバージョンにも依存するのだと思いますが)の意見もあり、困っています。

個人的には一番いい形で見てほしいし、多くの人にも見てもらいたいのでどうすればいいだろうと悩んでいます。
そこでご存じの方に教えていただきたいのですが

(1)あまり負担にならない程度にそれぞれのマシンごとの識別させたい、もしくは、対応できないブラウザの場合は、通常のデフォルトサイズのフォントで見てもらうようにする方法はないでしょうか?
(2)cssやjavascriptなどは外部ファイルとしてhtmlファイルからリンクさせることが可能かと思いますが、実際の場合、htmlに埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか?(ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか?)

お手数おかけしますがよろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

まず、お年寄りのことまで考えるのでしたら、フォントサイズの固定はかなりまずいです。

(フォントを大きくできないからです)

そこで、以下のようにしてみてはどうでしょう。
趣旨:IE4以降であれば、ベースフォントサイズを2にする。
   (ただし、IEでもMAC版は大きくないので、普通の3にする)
   NN4であれば、ベースフォントサイズを3にする。
   NN6はIEと同じっぽいので同じにする。

<SCRIPT LANGUAGE="JavaScript"><!--
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac")!=-1) {
document.write("<BASEFONT size='3'>");
// マックであれば、ブラウザに関係無くデフォルトサイズ(不要だが後日の調整のため記述)
} else if (agt.indexOf("win")!=-1) {
if (document.getElementById || document.all) {
// ウィンであれば、NN6 や Mozilla M14 及び IE4 以降はフォントを少し小さくする。
document.write("<BASEFONT size='2'>");
} else {
// そのほかのブラウザなら、デフォルトサイズ(不要だが後日の調整のため記述)
document.write("<BASEFONT size='3'>");
}
}
//--></SCRIPT>

(1)の答え。
こんな感じで良いのではないでしょうか? この程度であれば1k程度。負担にはならないでしょう。

(2)の答え。
 さて、私はここで、「不要だが後日の調整のため記述」と書いています。後日フォントのサイズを全体的に大きくしたいと思ったときには、「読み込みcss」にしておくと、ひとつのcssを修正するだけで、全てのHTMLのフォントサイズを修正することができます。
 また、共通に読み込んでいるcssはキャッシングされるので、各々に埋めこんだ場合よりも、(初めて読み込みcssを読むとき以外は)はやくHTMLを表示させることができます。
 WEBサイトのフォントや色合いには統一性があることが、一般的には望ましいと言えます。CSSを適切に使用すれば、「Aという統一性」を持たせていたWEBサイトを「Bという統一性」に全て切り替えたいときに、たった一つのファイルを修正するだけで良いということになります。
 WEBサイトが巨大であればあるほど、共通の読み込みcssにしておくことは、後日すばらしいメリットにつながると、私は思います。
    • good
    • 0
この回答へのお礼

ありがとうございます。CSSはまだまだ難しいことがいっぱいありますよね。教えていただいたことを参考にしながらちょっとずつためしていきたいと思っています。これからもいろいろと教えてくださいね。よろしくお願いいたします。

お礼日時:2001/01/29 00:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCS1とCS2で無料な放送はどれ?

CS1とCS2で無料な放送は何チャンネルでしょうか?
有料放送しか無いのでしょうか?

Aベストアンサー

CS1
・e2メイト 001ch プロモチャンネル
・イーピー 055ch 3/31で放送終了
 http://www.epep.jp/
 その他、適時無料放送があるチャンネルもある。(番組プロモーションなど)

CS2
・e2プロモ 100ch
・宝塚プロモチャンネル 101ch 宝塚プロモチャンネル
・ワンテンポータル 110ch 
・シネマステーション 123ch 各映画プロモチャンネル
・CS日本チャンネルガイド 147ch 日本テレビ系チャンネルガイド
・C-TBSウェルカム 160ch ショップチャンネル
・QVC 161ch ショップチャンネル
・ショップチャンネル 177ch ショップチャンネル
・プライム365. 185ch ショップチャンネル
・アクティブ!スポーツ 250ch スポーツチャンネルガイド
・ジャスト・アイ 361ch ショップチャンネル
 その他、適時無料放送があるチャンネルもある。(番組プロモーションなど)

QCSS {font-size:数値px}の指定について

こんにちわ。

外部CSSにて、以下のような記述を読み込んでいます。

.12 {font-size:12px}

参考書を見た所、IE6とNN7は対応と書いてありました。

WindowsXPSP2にて、IE7で閲覧した所問題ありません。
同環境にて、NN7とFirefox1.5では文字が指定しない場合と
同じ大きさで表示されてしまいました。

指定箇所は、様々でDivやFontに入れても、TableやTDに
指定を行っても表示が全く変わりませんでした。

例:<td class="12">のように

私の指定や記述が間違いなのでしょうか。

%でのフォントサイズは、環境によって拡大縮小が異なると
思い、出来るだけ数値指定で表示をさせたいです。

ご存知の方おりましたら、ご教授頂けると幸いです。

Aベストアンサー

どの程度の範囲をそのpxフォントで表示したいのかが、
わかりませんが、例えば全体のフォントサイズを12pxで固定したい場合は、<body></body>のBODYに対してCSSを定義すればそのフォントサイズになります。
CSSのソースは、
body {
   font-size: 12px;
}
こうなります。

質問者様が使われている<td class="12">のようなものは、クラスと言って、繰り返し使うであろう、特定のタグに対してのサイズ指定となります。

前述した<body>に対してのCSS設定は全てに対してのフォントサイズ固定ですが、<body></body>内にある他の要素のフォントサイズを変更したい場合は質問者様の方法で指定できます。
参考URLにお勧めCSS学習サイトを記載致します。
ご参考になりますと幸いです。

参考URL:http://www.stylish-style.com/index.html

QIllustratorのCS2 というバージョンは無料で使えると聞きましたが 今はもうダウンロードで

IllustratorのCS2
というバージョンは無料で使えると聞きましたが
今はもうダウンロードできないんですか??
やっぱり正規で契約しかないですか??

Aベストアンサー

最初は誰でもダウンロード出来て、インストール用のシリアルがついていました。
その後、adobeの登録ユーザーしかダウンロードできないように変わりましたので
今では「誰でも」ではなくなりました。
もちろん、そうした手続きを経れば無料で使えます。
ダウンロードしたファイルとシリアルナンバーがあれば誰でもインストールできるようですが
それがいいのかどうか?は分かりません。お勧めもできないです。

Q*{margin:0px;padding:0px;}

*{margin:0px;padding:0px;}

という風に、スタイルシートで設定をしているのですが、
テーブルに余白を付けようとしても、できません。
どうすればいいのでしょうか?

Aベストアンサー

*{margin:0px;padding:0px;}を利用しても良いと思いますが(賛否両論)
HTML,CSSを理解しない内は利用しない方が勉強になり、
正しいマークアップも直感で理解できますので、
一旦デフォルトで表示してみて、お好みで個別指定する方が良いかも知れません。
例えば、
html,body{margin:0px;padding:0px;}
を書いてから、後付けでその都度追加するとか。
html,body,h1,h2,ul,ol,li,dl,dt,dd{margin:0px;padding:0px;}
慣れてから使う方が良いかも。
デフォルトのままで、レイアウトやブラウザ間の差異などが困るのなら指定すれば良い。
--------------------------------

テーブルの外側の指定なのか、
内側の指定なのかはわかりませんが、
外側でfloatで意図通りに解釈されていないのでは?
その場合には、色々手法がありますが、tableをdivで囲うのが簡単。

<div style="width:280px; border:red solid;">
<table border="1" style="margin: 20px 0 10px 30px;">
<tr><td>無指定</td><td>無指定</td></tr>
<tr><td style="padding:1em 2em;">
padding指定</td><td>無指定</td></tr>
<tr><td style="line-height:3;">
line-height指定</td><td>無指定</td></tr>
</table>
</div>

幅の解釈も標準か否かで違う。

*{margin:0px;padding:0px;}を利用しても良いと思いますが(賛否両論)
HTML,CSSを理解しない内は利用しない方が勉強になり、
正しいマークアップも直感で理解できますので、
一旦デフォルトで表示してみて、お好みで個別指定する方が良いかも知れません。
例えば、
html,body{margin:0px;padding:0px;}
を書いてから、後付けでその都度追加するとか。
html,body,h1,h2,ul,ol,li,dl,dt,dd{margin:0px;padding:0px;}
慣れてから使う方が良いかも。
デフォルトのままで、レイアウトやブラウザ間の差異などが困るのな...続きを読む

QAdobe CS2にバージョンアップできるCS?

AdobeのCS2を購入しようと思っています。
ところが、CS2はまだ売っておらず、予約の受付、というかたちですね。で、今すぐ手に入れたいならCSを買え、ということになるようです。ということは買い方には2通りあって、
・CS2を予約購入
・CSを買って、CS2に無料バージョンアップ
ということですよね?
だとすると、私にとって前者の選択なんてありえないと思うのですが(価格もいっしょだし)、なにか前者を選択するメリットってあるのでしょうか? 後者を選んでよくないことはありますか? 教えてください。

ちなみに、私は今はAdobe製品を持っていません。購入はアカデミックパッケージを店頭でするつもりです。

Aベストアンサー

>ユーザ登録していれば、数千円(送料程度)と破損CDがあればサポートセンターが相談に乗ってくれます。

交換もしてくれませんし相談にも乗ってくれません。
交換してくれるのは最新版ですから、CS2が出ればCS1は対象外、またバージョンアップをすればCS1のライセンスは切れますから、ライセンスの無いユーザーの相談には乗ってくれません。
私がデメリットと書いているのはここで、CS2のフルバージョンを買えば、割れてもフルバージョンが手数料だけで交換可能ですが、CS1のフルバージョンでは今後そうしたことが不可能と言う点です。
私自身アクロバット3.0→5.0で来ましたが、その後4.0を購入しました。(3.0→5.0はFAX認証なので)
4.0に関しては5.0を買ったことで、3.0のライセンスが切れたことを理由にサポートなども一切断られてます。
5.0をインストールする時に、旧バージョンの認識用のみに使用してます。

Premiereの立腹ですが、バージョンアップを重ねて、最初に購入したフルバージョンを捨ててしまったのです。
PremiereのMac版の廃止に伴い、AppleがFinalCutと無料で交換してくれるキャンペーンをやったのですが、フルバージョンCDとの交換で、古くからのユーザーは持っているはずも無く、私は対象外で、そのままPremiereのWindows版に移行しました。
バージョンアップ版の価値はそんなものですが、機能は変わりません。
CS2にバグがあるかどうかは分かりません。

>ユーザ登録していれば、数千円(送料程度)と破損CDがあればサポートセンターが相談に乗ってくれます。

交換もしてくれませんし相談にも乗ってくれません。
交換してくれるのは最新版ですから、CS2が出ればCS1は対象外、またバージョンアップをすればCS1のライセンスは切れますから、ライセンスの無いユーザーの相談には乗ってくれません。
私がデメリットと書いているのはここで、CS2のフルバージョンを買えば、割れてもフルバージョンが手数料だけで交換可能ですが、CS1のフルバージョンでは今後そうし...続きを読む

Q【CSS】_font-size: 84%;ってどういう意味の記述?

CSSの勉強のために、

http://cdn.oshiete.goo.ne.jp/css/oshiete-base.css

をながめていたのですが、

font-size: 12px;
line-height: 1.4em;
/*\*/
_font-size: 84%;
/**/

という記述がありました。

この、最後の3行はなんのための記述なのしょうか?

よろしくお願いいたします。

Aベストアンサー

ブラウザバージョンによるCSSハック(これはアンダースコア、下にスターハック)です
古いブラウザ(おもにIE6以前)での表示をfont-size: 84%とする指定です。

詳しくは
http://d-lover.com/css/hack.shtml

QCS2からCS5にアップグレードで疑問 OS問題32~64bit?

CS2からCS5にアップグレードするにあたり
CS4へのアップグレード版B(CS5無料アップグレード)を購入しようと
思うのですが
現在winXPをつかっていますが新しくPCを購入しwin7の64bit環境に
変えようと思ったのですが
そこで疑問がCS2がwin7=64bitで動作するのでしょうか?
動作すればそこからアップグレードも可能だとは思うのですが、
いろいろネットで調べた結果、動くと不具合がでて動かないが両方でてきます 
詳しい方いらっしゃいましたらご教授ください
よろしくお願いいたします。

Aベストアンサー

CS2を64bit-Win7でうちは動いています、何ら問題ありません

質問者の環境で動作しなくてもCS5のインストールは可能ですよ

Qbody font-size:13px; IE6

CSSライブラリ YUIの
font-size:13px; からの font-size:100%; のセットで、

/* YUIのCSS */
body{
font-size: 13px;
*font-size: small;
*font: x-small; }
div{font-size: 100%;}

この場合の以下は、
-------------------
*font-size: small;
*font: x-small;
-------------------
IE6用の
font-size: small と font-size: x-small
の為にあるのでしょうか?
それなら、CSSでfont-size: small; と font-size: x-small;を使わないで、font-size: 85%;とか使えば上記のハック不要って事でしょうか?


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
上記の様なXHTML,1行目xml宣言付きの場合、
IE6用の
*font-size: small;
*font: x-small;
を書いても
font-size: small と font-size: x-small
が小さくならないので、
xml宣言ありでIE6では標準にならないのでハック不要って事ですか?
IE6で見てもハックを付けても消しても同じなんですが・・・
なんか間違っているのでしょうか?

CSSライブラリ YUIの
font-size:13px; からの font-size:100%; のセットで、

/* YUIのCSS */
body{
font-size: 13px;
*font-size: small;
*font: x-small; }
div{font-size: 100%;}

この場合の以下は、
-------------------
*font-size: small;
*font: x-small;
-------------------
IE6用の
font-size: small と font-size: x-small
の為にあるのでしょうか?
それなら、CSSでfont-size: small; と font-size: x-small;を使わないで、font-size: 85%;とか使えば上記のハック不要って事...続きを読む

Aベストアンサー

そのハックの仕方は細かくチェックを取っていないので完全に把握はしていませんが、IE4~IE7、Mac IE5では動作するようです。

*font-size: small;

でIE6~7の標準準拠モード時にフォントサイズが13px相当になり

*font: x-small;

でIE5~5.5と6~7の互換モード時のフォントサイズが13px相当になるものだと思います。
(ここはちょっと記憶が曖昧なのであまりあてにしないで下さい・・・)


IEでのpxでの絶対指定はフォントサイズを変更してもブラウザ上に反映されなくなってしまいユーザーにとって不便になってしまいます。
なのでsmallなどの相対指定で13px相当に合わせるように上書きされているということでしょう。
ただしIE8の標準準拠ではプロパティの前に*を付けるハックは上手く動作しないようなので、現在ではそのままの指定では問題が出てくるのではないかと思います。

ハックをあまり使われたくないようなのでできるだけソフトなものに置き換えるとすれば、現在ほとんどのブラウザがデフォルトのフォントサイズを16px(標準準拠時)に揃えてきているようなので、
標準準拠モード前提で13pxにする場合以下のように指定をすればいいと思います。

body{
font-size:small !important;
font-size:x-small;
}

そのハックの仕方は細かくチェックを取っていないので完全に把握はしていませんが、IE4~IE7、Mac IE5では動作するようです。

*font-size: small;

でIE6~7の標準準拠モード時にフォントサイズが13px相当になり

*font: x-small;

でIE5~5.5と6~7の互換モード時のフォントサイズが13px相当になるものだと思います。
(ここはちょっと記憶が曖昧なのであまりあてにしないで下さい・・・)


IEでのpxでの絶対指定はフォントサイズを変更してもブラウザ上に反映されなくなってしまいユーザーにとって不便になって...続きを読む

QPhotoshop CS2 (体験版)の新しい機能で

Photoshop CSのWIN用を購入しました

無料アップグレードシールが付いていたので
もうすぐCS2になるとおもいます
新しい機能で光学レンズ補正を探しているのですが
どこにあるのか?わかりませんので教えてください

Aベストアンサー

Adobe サイトの 「アドビデジタルイメージングソリューション」ページ http://www.adobe.co.jp/digitalimag/ps_pro.html の「ソフトウェアとソリューション」の「Photoshop CS2」にある「ビジュアルツアー」をクリックして開かれる新機能紹介のFlash映像では、「光学レンズ修正」として、CS2のメニューの「フィルタ」→「変形」→「レンズ補正」で表示される「レンズ補正」ダイアログでの「ゆがみを補正」「垂直方向の遠近法」「水平方向の遠近法」での各操作がデモンストレーションとして紹介されています。

詳細はCS2のヘルプから「レンズ補正フィルタ」で検索してみて下さい。

Qcss:リンク画像の枠消し: a img { border:none} にしてもダメ

リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。

下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。(色番号は長くなるので#だけにしています)a:visited img や a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。

どなたかお分かりになったら助けてください!

.entry-body a { color:#; background-color:#; border-bottom:1px #;}

.entry-body a img { background-color:transparent; border-bottom:none;}

Aベストアンサー

だいぶ端折って書きますが・・・。
こちらの環境firefox2
【引用開始】
<body>

<p class="entry-body">
<a href="#">hogehgeohgoe</a>

ぱたーんいち<a href="#">abc<img src="hogege.gif">def</a><br>
ぱたーんに<a href="#"><img src="hogege.gif"></a>

</p>
</body>
【引用終り】

もし「ぱたーんいち」のようにhtmlを書いているのでしたら、abcdefの部分に<a>に設定したcssが適用されます。<a><a/>の間に<img>ありますので・・・。「ぱたーんに」なら少なくとも背景については表示されないはずです。


人気Q&Aランキング

おすすめ情報