スタイルシートで、フォント「サイズ」と「行間」を複数個所に別々に設定したいということになります。
あるページのフォントの「サイズ」は固定しているが、それぞれのコンテンツの中でフォントの「行間」は変形したい場合どうしたらいいのでしょうか?
○フォントサイズ(ひとつだけ用意し複数ページに使いまわす)
○フォント行間(こちらはコンテンツによって複数用意し、入れ替える。)
使用例:文字幅をつめてたくさん書きたいコンテンツと、文字幅を広げて少なくても効果的に見せたいコンテンツなど。
クラスでひとつひとつ設定していくとフォントとマージンは一緒になりますよね。そうなると結局それぞれのメニューごとに、CSSをフォントサイズから作らなくてはいけないので大変になってしまいます。
No.1ベストアンサー
- 回答日時:
いまひとつ状況が理解できていませんが
タイトル通りclassを複数つけたければスペースで区切ればOKです。
.abc {font-size:10pt;}
.def {line-height:3;}
.ghi {line-height:1.5;}
<要素 class="abc def">フォントサイズ 10pt 行間3行
<要素 class="abc ghi">フォントサイズ 10pt 行間1.5行
ありがとうございます。まさにこれです。スペースでクラスを二つつけられたのですね。インプレスの何年か前の「標準 HTML、CSS、javascript」辞書には載っていませんでした。これで作業が楽になり今後のインターネットにやさしいWEBサイトが作っていけそうです。
No.2
- 回答日時:
フォントサイズを絶対値で指定すればIE等では固定表示されますが、
それ以外の環境では可変だったりIEでもズーム機能のプラグインソフトウェアなどを使えばフォントサイズは変更可能です。
その点を認識した上でサイトを作成されるといいと思いますよ。
見る人次第では視力とかの関係で大きいフォントサイズを好む人もいらっしゃいますので、なるべくフォントサイズは固定しないほうが良いです。
あと、CSSでの数値指定はなるべく単位をつけたほうが良いです。
(#1 steel_grayさんの事例を改変。見た目はほぼ同じです。)
.abc {font-size:80%;}
.def {line-height:3em;}
.ghi {line-height:1.5em;}
<要素 class="abc def">フォントサイズ 10pt 行間3行
<要素 class="abc ghi">フォントサイズ 10pt 行間1.5行
大変失礼になりますが、皆様への回答内容が同様になりますのでこれにてお礼の言葉と代えさせて頂き、質問を締め切らせて頂きます。
とても参考になる回答ありがとうございました。今後に生かすべく精進して参りたいと思っております。
No.3
- 回答日時:
CSSのCはCascadingで、これは段階的というような意味です。
基本的な思想として、CSSでの指定は親要素から子要素へ継承されるので、フォントサイズはページで統一という考え方なのであれば、ページレイアウトのもっとも親の要素、あるいはbodyに指定すべきじゃないでしょうか。行間についても、標準設定は同じく親要素にしたほうが良いと思います。その上で、行間を「変更」する要素にのみ、個別にクラス設定したらどうでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- その他(インターネット接続・インフラ) Webサイトのフォント・級数変更について 1 2022/10/18 18:08
- HTML・CSS Web font 会社のホームページを作成についてですが、webフォントを使用することを検討しており 4 2022/11/04 10:36
- Excel(エクセル) [入力規則]のリストボックス内の“不揃いの林檎たち” 3 2022/09/15 18:32
- Word(ワード) Word の文字数37行数26とフォント12にしたい 新規作成でフォントが18になります。 ページ設 1 2022/04/14 18:56
- CAD・DTP vectorworks、winとmacでデータを共有する場合 1 2023/02/20 16:41
- Word(ワード) Word2019と365の互換性について質問 1 2023/06/10 19:33
- ノートパソコン Chromebookの文字フォント(デバイスの入力文字など)が直せないです 1 2022/06/21 14:56
- ビジネスマナー・ビジネス文書 私の所属する公的機関の文書はとても読みにくく、おそらく、以下が原因のように思われます。 フォントはゴ 1 2022/12/01 07:35
- Word(ワード) ワードフォント 一括置換の方法 4 2022/12/31 00:27
関連するカテゴリから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指定に...
-
共有メモリについて
-
インラインフレーム内の文字の...
おすすめ情報