• ベストアンサー
  • すぐに回答を!

cssにおけるフォントの大きさの制御と外部ファイルについて

現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常の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に埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか?(ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか?) お手数おかけしますがよろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数95
  • ありがとう数1

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

  • ベストアンサー
  • 回答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

  • 外部スタイルシートについて・・・

    外部スタイルシートを書きたいのですが、 まだ良くわかってない点があるので教えてくださると嬉しいんですが・・・(TT) 今はHTMLのヘッダ内に書いております。 <style TYPE="text/css"> </style> Q1,上の部分は外部スタイルシートにすると、いらないのでしょうか? Q2,下の部分は外部スタイルシートにしてもスタイルシート内に、書く事ができますか?書くと不具合の原因になるのでしょうか? <!-- //忘れてしまうので、ここにコメント書きたいです。 できれば、スタイルシートを表示できない?ブラウザの人へ配慮したいと思うので、 <!-- は、あった方が自分が忘れなくていいかと思うのですが・・・。 Q3,ブラウザによって変になる、例えばとっても古いバージョンのネスケなどでも表示できるといいのですが 下記で問題あるのでしょうか? もし良かったら下の内容をこうした方がいいという アドバイスがあると嬉しいです。 質問の仕方が良くないかもしれませんが教えて下さい(TT) <style TYPE="text/css"> <!-- //忘れてしまうので、ここにコメント書きたいです。 a:link {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:visited {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:active {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;} td {font-size: 11pt;} span {font-size: 11pt;} BODY {font-size: 11pt; } LI {font-size: 11pt;} --> </style>

    • ベストアンサー
    • HTML
  • 外部CSSの読み込みがうまくできない

    <head>~ <link href="basic.css" rel="stylesheet" type="text/css"> ~</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか? それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか?

    • ベストアンサー
    • CSS
  • 外部CSSをかくには。

    HPのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部CSSでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY {  letter-spacing:7px;  line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。

    • ベストアンサー
    • HTML
  • cssの外部ファイルでのリンクの装飾

    学校の課題で今HPを作っています。 外部ファイルでリンクの装飾をしようとしているのですが、 検索してもHEAD内に組み込むタイプのタグしか出てきませんでした。 <Style Type="text/css"> <!-- A:link { text-decoration:none; color:#000080; } A:visited { text-decoration:none; color:#000080; } A:active { text-decoration:underline; color:#000080; } A:hover { text-decoration:underline; color:#1e78ff; } //--> </Style> ↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか? つまり↑の内容(リンクの装飾)を↓のような形式に書き換えたいということです。 #title{ font-size:24px; font-weight:bolder; font-family:Arial; } わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★

    • ベストアンサー
    • HTML
  • CSS、おかしいですか?

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか? <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • CSSの文字指定

    <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか? <style type="text/css"> font:16px "MS Pゴシック",平成角ゴシック,</style>とやってもダメでした と

    • ベストアンサー
    • HTML
  • 外部CSSでリンクカラー指定

    外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか? その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか? またそのようにする方法があれば教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSの記述

    HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。

    • ベストアンサー
    • HTML
  • CSSが反映されません。

    コチラのカテゴリで良いのか解らないのですが… 私は現在FC2でHPを作っていまして、 CSSを変更したのでFFFTPでファイルをアップロードしました。 そして確認の為に、ブラウザでサイトを表示してみたら 背景画像や、文字色の設定など、全て消えていました。 因みに、ファイルはWEB上に存在しています。 ファイルはSJISで保存し、無変換でアップロードしました。 SleipnirとIEどちらで見ても表示が変わりません。 ファイルの中身はこんな感じです。 ---------------------------------------- body { background-color:#000000; color:#cccccc; font-size:12; font-family: "MS ゴシック", "MS Pゴシック",     "ヒラギノ角ゴ Pro W3", Osaka"等幅, Osaka,     平成角ゴシック; background-image:url(bg_img/moon001.jpg); background-repeat:repeat-y; position:relative:top:100px;left:100px; line-heignt:5pt; scrollbar-base-color:#333333; scrollbar-face-color:#111111; scrollbar-track-color:#000000; scrollbar-arrow-color:#222222; } td.A { color:#cccccc; font-size:12pt; } td.b { color:"#cccccc"; font-size:12pt; background-color:#222222; } a:link { color:#9999ff; text-decoration:none; font-size:10pt; } a:hover { color:#ffddff; text-decoration:none; } a:visited { color:#40e0d0; text-decoration:none; } a:active { color:#ffccff; } ----------------------------------------- 原因と対処法を知っている方、 回答よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSで指定した文字色が見るマシンによって違う

    リンクの文字の設定をCSSで以下のように指定しています。 a:link{font-size:12px; text-decoration:none} a:visited{font-size:12px; text-decoration:none} 文字色はデフォルトの青→紫になって欲しいので指定していません。 WinとMacのIE・NNで確認して大丈夫だったのですが、ある別のWinのマシン(IE)で確認したら、リンクの文字色がクリック後ピンク色になります。 なぜそうなるのでしょうか? 回避方法としては色の指定をしてやるべきでしょうか? よろしくお願い致します。

    • ベストアンサー
    • HTML