文字サイズをCSSで指定する方法についての質問です。
同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。
そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。
macintosh.css
windows.css
windowsIE.css
...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。
CSSファイルの中身は、
macintosh.css
.small { font-size: 10px; } /* 小さめ */
.middle { font-size: 12px; } /* 中くらい */
.large { font-size: 14px; } /* 大きめ */
windowsIE.css
.small { font-size: 0.8em; } /* 小さめ */
.middle { font-size: 0.9em; } /* 中くらい */
.large { font-size: 1em; } /* 大きめ */
...といった具合です。
このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、
全てのh2タグに <h2 class="middle"> と記述することになってしまいます。
これは煩雑なので一括指定したいと考えます。
すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。
macintosh.css
h2 { font-size: 12px; }
windowsIE.css
h2 { font-size: 0.9em; }
...のようなことです。
そうではなく、h2に .middle(=中くらい)で指定した文字サイズをそのまま受け継がせる方法はないでしょうか?
h2 { class="middle" }
変な書き方ですが、意図を汲み取っていただけるでしょうか。
このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。
No.2ベストアンサー
- 回答日時:
たぶん望んでいる機能は CSS には存在しませんので
次善の策を探しましょう・・・。
で、#1 の方の提示されている様にグループ化で対処が一番ましな省力化ではないかと・・・。
ただ、テキストエディタで文字列一括変換すれば
個々の h2 に属性 class="middle" を追記するのも
全てのCSSファイルの「.middle {」を「.middle, h2 {」と更新するのも
手間は同じですが・・・・・。
(複数のファイルを一括処理できるテキストエディタが必要ですがぁ。)
尚、CSS を用いる姿勢からくる意味的な事を考えるなら、
macintosh.css
h2 { font-size: 12px; }
windowsIE.css
h2 { font-size: 0.9em; }
の追記が望ましいです。
後は 継承という一番の希望が無理という事から、
どれだけ妥協するかの問題です・・・。
どうせ手間がかかるなら、意味的により適切な方を望むか、やはり少しでも手間を省きたいか・・・・・。
結論から言って無理なのですね。それが分かっただけでもスッキリしました。ありがとうございました。
振り分けCSSが長大になりそうですが、そちらで指定しようと思います。
No.3
- 回答日時:
たぶん、一番確実な解決策は、CSSの出力をCGI化してしまう手法ではないでしょうか?
業務用システムであればDB程度は多分、使っていると思いますので、そこらで管理すれば結構簡単なのではないかと思います。
ちなみにCSSでもJavaScriptでも、拡張子には全く影響されません。
windows.css でも windows.cgi でも windows.php でも、全く問題なくスタイルシートとして読み込んでくれます。
既存の macintosh.css windows.css windowsIE.css 等を読み込んで、専用のCSSを出力するPGを作るのが簡単かもしれません。
他のやり方としてXMLHttpRequestで各cssファイルを読み込んで、JavaScriptでStyle定義してしまうという手法も有りそうです。
サーバーに負荷を掛けない分、こちらの方が有用かもしれませんね。
回答ありがとうございます。
プログラミングのような『一歩すすんだ』やり方であればOKということですね。残念ながら私のスキルでは手に負えない状態ですので、簡便な方法で考えることにいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS スマホ表示用のwebページ、style.cssでは表の中の文字 font-size は指定できない? 1 2023/03/27 18:57
- PHP アンドロイドスマホでのphp echoの文字サイズ 1 2023/05/13 15:15
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquery.validationEngine.jsカ...
-
fontサイズ指定の ”-(マイナ...
-
html,cssでスマホとパソコンで...
-
文字の位置、上下のマージンが...
-
API Sleep関数について
-
全角半角含めて等幅で表示したい
-
<pre>にフォントを・・・。
-
特定の文字のみcssを適用するに...
-
iframe 文字化け
-
ホームページビルダー作成HPがi...
-
このhtmlソースのFontの相対指...
-
CSSで文字指定:あるセレクタで...
-
テーブルの中のフォントサイズ...
-
フォントサイズがaタグで囲うと...
-
文章の一部分だけ文字色を変え...
-
テーブル内のフォントの指定は...
-
リストの前後の行間をなくす方...
-
Format 関数 表示書式指定文字...
-
HTMLで特定の文字だけ色を変え...
-
テキストボックスの枠を非表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WEBサイトの作成で、imgタグに...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
全角半角含めて等幅で表示したい
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
background-color: #ddd;の意味...
-
リンク文字
-
Format 関数 表示書式指定文字...
-
fontサイズ指定の ”-(マイナ...
-
HTMLで特定の文字だけ色を変え...
-
CSSを一部無効にしたい
-
指定の文字だけ色を変える
-
上付き文字と下付き文字を同時...
-
Excel VBA メール作成について ...
-
遊明朝のプロポーショナルフォ...
-
テキストエリア内の文字の装飾
-
jquery.validationEngine.jsカ...
-
テキストボックス途中で切れて...
おすすめ情報