クラスを2つ付けたい。フォントサイズは一定だが、フォントマージンはコンテンツごとに変動するので。

質問

スタイルシートで、フォント「サイズ」と「行間」を複数個所に別々に設定したいということになります。

あるページのフォントの「サイズ」は固定しているが、それぞれのコンテンツの中でフォントの「行間」は変形したい場合どうしたらいいのでしょうか？

○フォントサイズ（ひとつだけ用意し複数ページに使いまわす）
○フォント行間（こちらはコンテンツによって複数用意し、入れ替える。）
使用例：文字幅をつめてたくさん書きたいコンテンツと、文字幅を広げて少なくても効果的に見せたいコンテンツなど。

クラスでひとつひとつ設定していくとフォントとマージンは一緒になりますよね。そうなると結局それぞれのメニューごとに、CSSをフォントサイズから作らなくてはいけないので大変になってしまいます。

回答No.1

steel_gray · ベストアンサー

いまひとつ状況が理解できていませんが
タイトル通り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行

お礼

ありがとうございます。まさにこれです。スペースでクラスを二つつけられたのですね。インプレスの何年か前の「標準　ＨＴＭＬ、ＣＳＳ、javascript」辞書には載っていませんでした。これで作業が楽になり今後のインターネットにやさしいＷＥＢサイトが作っていけそうです。

回答No.3

taba

CSSのCはCascadingで、これは段階的というような意味です。基本的な思想として、CSSでの指定は親要素から子要素へ継承されるので、フォントサイズはページで統一という考え方なのであれば、ページレイアウトのもっとも親の要素、あるいはbodyに指定すべきじゃないでしょうか。行間についても、標準設定は同じく親要素にしたほうが良いと思います。
その上で、行間を「変更」する要素にのみ、個別にクラス設定したらどうでしょうか。

回答No.2

noname#19206

フォントサイズを絶対値で指定すれば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行

お礼

大変失礼になりますが、皆様への回答内容が同様になりますのでこれにてお礼の言葉と代えさせて頂き、質問を締め切らせて頂きます。
とても参考になる回答ありがとうございました。今後に生かすべく精進して参りたいと思っております。