現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。
通常の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に埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか?(ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか?)
お手数おかけしますがよろしくお願いいたします。
No.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にしておくことは、後日すばらしいメリットにつながると、私は思います。
ありがとうございます。CSSはまだまだ難しいことがいっぱいありますよね。教えていただいたことを参考にしながらちょっとずつためしていきたいと思っています。これからもいろいろと教えてくださいね。よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
入力規則のリストの文字の大き...
-
ペイント3Dのテキストサイズ変更
-
テーブル内の文字サイズを変更...
-
テキストエディタmiの表示文字...
-
エクセルで文字が勝手に大きく...
-
alertで表示させる文字サイズは...
-
奇数のフォントサイズ指定について
-
共有メモリについて
-
HTMLでHGPゴシックEを表現する...
-
パスワード欄の"●"文字を小さく...
-
どのパソコンにもだいたいイン...
-
<pre>タグ内のフォントサイズに...
-
中国語と日本語混在のwebページ...
-
word オーバーライン
-
セレクトボックスの幅を指定し...
-
HTML <MARQUEE> 携帯 文字が...
-
アンドロイドスマホでのphp ech...
-
GOLIVE5.0 PCの環境が違って...
-
黒地に白抜きの文字
-
解像度が変わるとEditコントロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
ペイント3Dのテキストサイズ変更
-
テキストエディタmiの表示文字...
-
alertで表示させる文字サイズは...
-
コピーライト記号の表示が小さい
-
セレクトボックスの幅を指定し...
-
<pre>タグ内のフォントサイズに...
-
アンドロイドスマホでのphp ech...
-
VBAでListViewのフォントを変更...
-
英サイト(UTF-8)内での全角文字...
-
HTMLテキストボックス内の文字...
-
alertで、アイコンの変更、又は...
-
パスワード欄の"●"文字を小さく...
-
”ヒラギノ明朝Pro”をWindowsで...
-
CListCtrlで行の高さを指定した...
-
奇数のフォントサイズ指定について
-
<table></table>内のFONT指定に...
-
共有メモリについて
-
インラインフレーム内の文字の...
おすすめ情報