cssで文字装飾用の以下のクラスを作成しました。

.label { font-size:95%; color:blue; }

これを
<div id="view">
<span>ラベル1</span><span>ラベル2</span>~(以降大量に続く)
</div>
というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても
避けたいと思います。

出来れば
 #view span {
  .label
 }
というようにcssで対象を選択して既存のクラス定義を適用したいのですが、こういう感じで
一気に適用する記述方法はありませんでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (9件)

No.3.8 naokitaです。



複数のページや特定箇所以外にも、 class="label"があって、
特定の箇所の大量に続くspanが想定する場所のspanを
class="label"未使用で、他のclass="label"と統一したいって事ですね?
更に、.label{ } と #view span{ } とを
一箇所のみ(一発/一気)で一元管理したいんですね?
-----
今現在、2つのセレクタがあります。
.label{ } と #view span{ }
この場合、当然、2つの同じ値も存在するので、
変更時は、2カ所の変更が必要だから、一元管理とはいえません。
よって、2つのセレクタを一箇所で統一設定します。
1カ所だけの変更なら、一元管理と言いますね!?

>>あくまで一元管理したいんですよ。
1カ所だけの値を変更すれば、他のHTMLの .label と
特定箇所の #view span を同時に変更は出来る。
セレクタで値を定義するが、値をセレクタで定義は出来ない。
(属性セレクタを除く)
だから、
セレクタと同じ値を持つセレクタを同時に定義するって事!
これをCSSの「一元管理」と言う。
つまり、
.label と #view span を同時に指定し、値を統一する事。
.label , #view span{ color:blue;}

■ まずは、下部のソースを表示してから、CSSを変更しましょう。
      ↑↑↑↑↑↑↑↑↑
1、下部のソースを表示すると、「青」が見えると思います。
2、color:blue; を color:green; に一箇所変更すると、
  id="view"とid="view"以外のところも変更します。
※これが、CSSでの「一元管理」です!

このソースで1カ所で「color:green;」と変更できても
一元管理では無いと言うのなら、
動的に出力するしかないです。
class名をインクルードしましょう。
但し、適応させる為に別の動的ソースが必要です。
単に、CSSと同じですが、動的に一箇所で管理出来ます。
また、更に面倒なプログラムで書けば、
ボタン選択で適応させる事も可能。

それも面倒だというなら、XML,XSLで書いて下さい。
http://ja.wikipedia.org/wiki/Extensible_Markup_L …
spanで統一させる事すら必要はありませんから。
これならお望み通りの事が出来るでしょう。
-----

<html>
<head>
<style type="text/css"><!--
.label , #view span{ color:blue;} /* ←ここ1カ所のみ */
.red , #view span.re{ color:red;}
--></style>
</head>
<body>
<div id="test">
<h1>CSS一元管理 | 色比較</h1><hr>
<h2>以下は、id="view"以外のHTML</h2>
&lt;div id="<b>test</b>"&gt;
<span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span>
&lt;/div&gt;
<p>上のHTMLソースが<q><strong>146</strong>文字</q></p>
</div><hr>
<div id="view">
<h2>以下は、id="view"</h2>
&lt;div id="<big class="re">view</big>"&gt;
<span>青</span> | <span class="re">赤</span> | <span>青</span> | <span class="re">赤</span> | <span>青</span>
&lt;/div&gt;
<p>上のHTMLソースが<q><strong>104</strong>文字</q></p>
</div><hr>
<h3>一箇所の値を変更するだけで、全部適応されますが・・・</h3>
<p>あとは、頭を柔軟に、貴方のHTML,CSSの書き方次第で、どうにでもなります。</p>
</body>
</html>

この回答への補足

ご回答ありがとうございます。
また、丁寧なサンプルまでご提示頂きありがとうございます。

さて、サンプルも確認させて頂きましたが、やはり要件を満たす事が出来ないようです。
前回の補足でも書きましたがあくまでも「.labelという宣言」があり、それを
「別のセレクタでも適用したい」という話ですので、「#view spanに同じ内容を記述」という時点でアウトなんです。

ちなみに頂いたサンプルだと「.label , #view span{ color:blue;}」をcssファイルに記載した場合、
そのcssを読んだhtmlファイルで#view spanまでも適用されてしまいますのでその点でも厳しいかと思います。


今回のご回答を確認し、私のやりたい事はcssでは不可能であると判断致しました。
長々とお付き合い頂き、誠にありがとうございました。

補足日時:2011/04/25 21:38
    • good
    • 0

NO.3回答者のnaokitaです。


整理ではなく補足事項ではないでしょうか?
当初の質問内容からならば、前回答者さん達は正解です。
-------
ORUKA1951さんの例は、IE6を除外した子セレクタや隣接セレクタなので
質問者さんと話が合わないんじゃないのかな?
それは、別として、
-------
<div id="view">というのは、IDですから
ページに1カ所しか存在しないはずです。
当初の質問では、
その#viewの中のspanを
<span class="label">ラベル1</span><span class="label">ラベル2</span>
とするのは、非効率だから、 class="label"を書かずに、
<span>ラベル1</span><span>ラベル2</span>
だけで、spanに、
{ font-size:95%; color:blue; }
を適応させたいって事ですよね?

誰もが、質問を読んでも、そう理解するはずです。
引っ掛かったのは、#view span{.label}の部分です。
こんな仕様は、CSSにありませんから、
回答としては、「出来ません!」となります。
そこで、
上記の条件で他の方法をCSSだけで考えると、
<div id="view">の中だけの
<span>をfont-size:95%; color:blue;にするには、
#view span{ font-size:95%; color:blue;}
です。
更に、他のページやセレクタをも考慮するから、
他の class="label"と#view内のspanに適応する為、
.label,#view span{ font-size:95%; color:blue;}
のようにすると条件が満たされます。
----
他の補足を読む限りでも、
 >「この宣言を、特定の要素内のspanに適用したい。」
 >というのが希望している内容であります。
特定の要素というのが、
<div id="view">って事ですよね?
その中の全てのspanに適応されるって事だから、
#view span{ font-size:95%; color:blue;}
で問題無いです。(パソコンの新旧ブラウザなら適応されます)
----
条件が満たされないというのであれば、
もしかして、以下の様に
<span>ラベル1</span><span>ラベル2</span>
その特定の要素に別の指定(赤81%)などにしたい<span>が複数あるなら、
<span>青95%</span><span>青95%</span><span>赤81%</span><span>青95%</span>
のように「赤81%」のspanも存在するという状況で、
<span>青95%</span><span>青95%</span><span class="labe3">赤81%</span><span>青95%</span>
として、
.label , #view span{ font-size:95%; color:blue;}
#view span.labe3{ font-size:81%; color:red;}
と部分的に上書き。
それでも、
<span class="labe">青95%</span><span class="labe">青95%</span><span class="labe3">赤81%</span><span class="labe">青95%</span>
などと書くよりは、かなり効率的です。
この様に、主とするspanを#view span{}で割り当てれば良い事です。
----
spanが複数あって分けたいのなら、
その#viewに無い(span以外)ような適当なタグを使えば済む。
例えば<b>を適応すれば済む話。
<b>青95%</b><b>青95%</b><span class="labe3">赤81%</span><b>青95%</b>
.label , #view b{ font-size:95%; color:blue; font-weight:normal;}
#view span.labe3{ font-size:81%; color:red;}
----
No.6さんの例なら、
.label , div.section span{ font-size:95%; color:blue;}
No.6での補足なら、
.label , div.label span{ font-size:95%; color:blue;}
.label , を追加するだけ。
----
全て試して違うなら、動的に出力に。

この回答への補足

えっとですね、naokitaさんもやはりORUKA1951さんと同様の解釈をされているかと思うのですが、
初めの質問でも整理した補足でも要件としましては一貫して
-------------------------------------------------------------
出来れば
 #view span {
  .label
 }
というようにcssで対象を選択して既存のクラス定義を適用したい
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
-------------------------------------------------------------
という事なのです。
例題に挙げるくらいなのですから当然上記の書き方が不可能なのは存じております。
あくまで「予め.labelといった定義を作成」しておき、「#view spanのように対象を指定してそこに
.labelという定義を適用する」という方法をお聞きしたいという事です。

補足日時:2011/04/24 18:06
    • good
    • 0

んー?


ブラウザの実装具合によるけど(具体的にはIE6とか古いのを排除するなら)

.label{/*省略*/}
#view span{color:red;}

<div id="view" class="label"><span /><span /><span /><!-- --></div>

これだとspanじゃない部分がどうって言う話だよね?確か。


.label,#view.label span,{font-size:95%;color:blue;}
#view.label span{color:red;}

<div id="view" class="label"><span /><span /><span /><!-- --></div>


後から書いた部分だけ上書きされるからサイズ95%の赤にならない?これで。

こういうのもやだっていうなら もうperlやphp使って独自includeスクリプト書くしかないんじゃないかな

この回答への補足

>後から書いた部分だけ上書きされるからサイズ95%の赤にならない?これで。
んー、そこだけ見るとそうはなるんですがやっぱり違うんですよね。

#view.label span{color:red;}
という記述で上書きすると確かに赤字にはなりますが、他のHTML等で.labelを使用している箇所は
そのままですよね。あくまで一元管理したいんですよ。

補足日時:2011/04/24 17:47
    • good
    • 0

>あくまで「この宣言を、特定の要素内のspanに適用したい。

」というのが希望している内容であります。

 ですから、それは子孫セレクタか子供セレクタをつかいます。
div.section span{font-weight:bold;}で、classの値配列にsectionをもつ【特定の】div要素内のspan要素に適用されますし、div.section>span)color:red}で、classの値配列にsectionをもつ【特定の】div要素内の直接の子供であるspan要素に適用されます。
<div class="section">
 <h2>見出し</h2>
 <p>なんたらかんたらは<span>重要(1)</span>である。</p>
 <span>重要(2)</span>
</div>
で、重要(1)は太字で、重要(2)は太字でかつ赤く表示されます。

この回答への補足

ご回答ありがとうございます。

div.label span{font-weight:bold;} ("section"とありましたが"label"に合わさせてもらいます)
という記述ですが、これは「この宣言を、特定の要素内のspanに適用したい。」の「この宣言」つまり
.label { font-size:95%; color:blue; }
を使用していませんよね?仮に.labelがdiv.label spanより先に宣言されていたとしても単なる上書きで
あり要件を満たしておりません。

例えば.labelのcolorをredに変更したとき、div.label spanという宣言部に対しても変更が必要となり、
これでは.labelを宣言した意味が低減してしまいます。
ですのであくまで「この宣言」をそのまま用いたいのです。

ご回答の程宜しくお願い致します。

補足日時:2011/04/24 11:15
    • good
    • 0

補足を拝見しましたが、それを読む限りでは、No.2で説明した方法でよいはずです。


きちんと読んでますか?

最初の質問にもある
>というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても
避けたいと思います。
 また補足の
>なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたい
>クラスを指定するというような方法が無いのかが知りたいというのが主旨です。
 もしかり。

No.2の記事をしっかり読んでください。

>cssで文字装飾用の以下のクラスを作成しました。
>.label { font-size:95%; color:blue; }

 これはCSSの文法を明らかに理解されていないようです。
 この一文は「宣言ブロック」です。!!!
 そして、.labelは全称セレクタや要素セレクタを省力した記述方法で本来は
*.[class~label]と等価で、その省略形です。
 意味は、class要素の値リストにlabel1をもつすべての要素に適用させるというセレクタ文字列です。
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 をしっかり読むこと。でないと何を質問しているかを伝えることすらできないです。

 あなたの質問を翻訳すると
 { font-size:95%; color:blue; }という宣言ブロックを、class要素の値リストにlabel1をもつ【すべての】要素に適合するように記述しました。
 注)「上記クラスはspanタグに対して使う為に作成したものです。」は誤りですね。
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  すべての要素に適用されます。

   spanに適用するなら
    span.label1{}
   ^^^^^^^^^^^^でなければなりませんね。!!
 5.8.3 クラスセレクタ(Class selectors) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )


{ font-size:95%; color:blue; }
 もしこの宣言を、特定の要素内のspanに適用したい。たとえば、classのリスト値にsectionを持つdiv(無名ブロック)内のspanでしたら
div[class=~label1] span{font-size:95%; color:blue;}
省略して
div.label1 span{font-size:95%; color:blue;}
とかけます。このときspanの前にある半角スペースは、「子孫セレクタ」を示します。言い換えると
div[class=~label1]の傘下にあるすべてのspanを指定するセレクタ文字列です。
これを直接の子供だけに適用したいなら
 div.label1>spanになります。

実際に、No.2で示したHTMLとCSSを試してください。

 以上があなたがしたいことに対する回答です。

この回答への補足

ご回答ありがとうございます。
No.2でのご回答を私が理解していないとお思いでしょうが、ちゃんと読ませて頂いております。
その上で若干齟齬があるようなので詳細に返答させて頂きたいと思います。

まず、
>注)「上記クラスはspanタグに対して使う為に作成したものです。」は誤りですね。
これについては全く誤りではありません。あくまで「私がspanタグに対して使う」と決めて作成した
クラスであり、「spanタグに適用されるように作成した」とは書いておりません。
この辺りは単純に日本語の問題なのでこれでご理解頂けるかと思います。

蛇足ですが、これが適用されるのは「class属性に"label"を指定した」要素のみであり、
仰っている「すべての要素に適用されます。」というのは相応しくないと思います。

>もしこの宣言を、特定の要素内のspanに適用したい。たとえば~
上記ですが、仰るとおり「この宣言を、特定の要素内のspanに適用したい。」のですが、
以降のご説明およびNo.2のご回答はこの要件を満たしておりません。
なぜなら「div.label1 span{font-size:95%; color:blue;}」と直接CSSの内容を記述しているからです。

あくまで「この宣言を、特定の要素内のspanに適用したい。」というのが希望している内容であります。
つまり予め宣言した「.label」を活かせないと意味が無いのです。
以上、お手数をお掛けしておりますがご回答の程宜しくお願い致します。

補足日時:2011/04/23 20:11
    • good
    • 0

趣味でWEBサイトを作ってる者です。


<span>が仮にその色を変える対象しかないなら
span{......}でよいかと。
もしべつにもあるなら他の回答者様のような
div#view span{.....} ←質問にも特にid指定、class指定なかったので。
一応「id」と「class」の使い分けは、
「id」.....<div id="header">など他に出現しない使い方。
「class」......<p class="note emph">など複数指定する場合
        p.note{color:red}
p.emph{text-decoration:underline}
どちらも指定出来ますがこの様な感じで特定のspanにだけidもしくはclassをしていする。
こんなかんじでどうですか?
ちなみに<div id="note">→div#note{....}
<div class="note">→div.note{....} となります。
知ってたらごめんなさい。

この回答への補足

ご回答ありがとうございます。
すいません、質問内容がまとまっていなかったので整理します。

.label { font-size:95%; color:blue; }
上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから
使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。

これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは
大量にあるためこれはなるべく避けたいのです。

なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを
指定するというような方法が無いのかが知りたいというのが主旨です。

補足日時:2011/04/23 16:39
    • good
    • 0

3回読んでやっと意味が分かりました。


それはできませんし、それができたとして、
<div id="view">
<span class="label">ラベル1</span><span class="label">ラベル2</span>~(以降大量に続く)
</div>
とする方が、非現実的です。
他のHTMLでも class="label"があると仮定して、

.label , #view span { font-size:95%; color:blue; }
<div id="view">
<span>ラベル1</span><span>ラベル2</span>~(以降大量に続く)
</div>
と、HTML側は<span>にままで、CSSに , #view span を追加。

この回答への補足

ご回答ありがとうございます。
すいません、質問内容がまとまっていなかったので整理します。

.label { font-size:95%; color:blue; }
上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから
使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。

これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは
大量にあるためこれはなるべく避けたいのです。

なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを
指定するというような方法が無いのかが知りたいというのが主旨です。

補足日時:2011/04/23 16:39
    • good
    • 0

質問の意図がわからないのですが・・


CSSの文法上、規則集合と宣言ブロックになります
 CSS2の構文と基本データ型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 から、
#view span {
  .label
 }
はできません。
 .label という記述の意味をまず理解してください。これは
HTML内の<div class="label"></div>という要素をさしますが、これは
 属性セレクタ div[calss=~label]・・・class属性に空白で区切られた値にlabelを持つ要素の省略形です。div.label と、div .label は異なる。

 あなたのしたいことが、#view一意セレクタ(ID selectors)内のspan要素に適用したいのでしたら
div#view span という子孫セレクタでよい。直接の子供だけなら div#view>span (子供セレクタ(Child selectors))をつかう。
<div id="ABC">
 <p><span>あいうえお</span><span>かきくけこ</span><span>さしすせそ</span><span>たちつてと</span></p>
 <div>
  <span>あいうえお</span><span>かきくけこ</span><span>さしすせそ</span>たちつてと</span>
 </div>
</div>

CSS
div#ABC p{color:red;}
div#ABC p span{color:blue;}
div#ABC div span{clor:green;
div#ABC p>span{color:magenta;}
div#ABC div span+span+span{color:purple;}
div#ABC div span+span+span+span{color:yellow;}
とか

この回答への補足

ご回答ありがとうございます。
すいません、質問内容がまとまっていなかったので整理します。

.label { font-size:95%; color:blue; }
上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから
使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。

これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは
大量にあるためこれはなるべく避けたいのです。

なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを
指定するというような方法が無いのかが知りたいというのが主旨です。

補足日時:2011/04/23 16:40
    • good
    • 0

#view span.label,.label{}



じゃ だめ?

この回答への補足

ご回答ありがとうございます。
すいません、質問内容がまとまっていなかったので整理します。

.label { font-size:95%; color:blue; }
上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから
使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。

これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは
大量にあるためこれはなるべく避けたいのです。

なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを
指定するというような方法が無いのかが知りたいというのが主旨です。

補足日時:2011/04/23 16:40
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QC++ クラスをメンバにもつクラスについて

お世話になります。C++初心者でうまくコードが書けません(><)
クラス1と2があり、クラス1のメンバにはクラス2があります。
メインでクラス1をインスタンス化してクラス2のfunc2を呼び出します。
func2ではクラス1のインスタンスから呼び出された場合にクラス1の
m_int1を取得します。
Class Class1{
public:
 int m_int1;
 Class2 m_Class2;
};
Class Class2{
public: void func2();
};
void Class2::func2(){
 /*ここの記述方法が分かりません*/
 /*C1から呼び出されたらC1のm_int1に100を入れる*/
 /*以下間違え*/
 class1 C2_1;/*別のclass1のオブジェクトなのでこれに入れてもダメっぽい*/
 C2_1.m_int1 = 100;
}
void main(){
 class1 C1;
 C1.m_int1 = 10;
 C1.m_class2.func();
}
C1.m_class2.func()の中から呼び出したC1にアクセスする方法が
分かりません(TT)。実体がまだあるのだからアクセスする方法は
あると思うのですが・・・
どなたかよろしくお願いします。

お世話になります。C++初心者でうまくコードが書けません(><)
クラス1と2があり、クラス1のメンバにはクラス2があります。
メインでクラス1をインスタンス化してクラス2のfunc2を呼び出します。
func2ではクラス1のインスタンスから呼び出された場合にクラス1の
m_int1を取得します。
Class Class1{
public:
 int m_int1;
 Class2 m_Class2;
};
Class Class2{
public: void func2();
};
void Class2::func2(){
 /*ここの記述方法が分かりません*/
 /*C1から呼び出されたらC1のm_int1に...続きを読む

Aベストアンサー

おそらくインスタンスに対する勘違いをされていると思います。

void Class2::func2(){
 /*ここの記述方法が分かりません*/
 /*C1から呼び出されたらC1のm_int1に100を入れる*/
 /*以下間違え*/
 class1 C2_1;/*別のclass1のオブジェクトなのでこれに入れてもダメっぽい*/
 C2_1.m_int1 = 100;
}

ここで行っているのは、あくまで func2関数内のローカル変数として宣言されているC2_1のm_int1に100を代入しているだけで、本来行いたい代入先とは別のインスタンスです。

*解決方1
func に class1のインスタンスを特定できる情報を渡す

public:
void func2 (class1 *ptr);
void func2 (class1 &ptr);
など。

*解決法2
class2 のコンストラクタで、自分をメンバ変数として持ってくれるclass1のポインタ等をもらう。

class class2
{
public:
class2 (class1 *ptr)
: m_ptr (ptr)
{
}
void func ()
{
m_ptr->m_int1 = 100;
}
private:
class1 *m_ptr;
}

です。
ちなみに解決法2ではwarningが発生しますが^^;

おそらくインスタンスに対する勘違いをされていると思います。

void Class2::func2(){
 /*ここの記述方法が分かりません*/
 /*C1から呼び出されたらC1のm_int1に100を入れる*/
 /*以下間違え*/
 class1 C2_1;/*別のclass1のオブジェクトなのでこれに入れてもダメっぽい*/
 C2_1.m_int1 = 100;
}

ここで行っているのは、あくまで func2関数内のローカル変数として宣言されているC2_1のm_int1に100を代入しているだけで、本来行いたい代入先とは別のインスタンスです。

*解決方1
func に cl...続きを読む

QCSSで文字指定:あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか?

文字サイズを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" }

変な書き方ですが、意図を汲み取っていただけるでしょうか。
このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。

文字サイズをCSSで指定する方法についての質問です。
同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。
そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。

macintosh.css
windows.css
windowsIE.css

...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。
CSSファイルの中身は、

macintosh.css
.small { font-size: 10px; } /* 小さめ */
.middle { font-size: 12p...続きを読む

Aベストアンサー

たぶん望んでいる機能は CSS には存在しませんので
次善の策を探しましょう・・・。

で、#1 の方の提示されている様にグループ化で対処が一番ましな省力化ではないかと・・・。
ただ、テキストエディタで文字列一括変換すれば
個々の h2 に属性 class="middle" を追記するのも
全てのCSSファイルの「.middle {」を「.middle, h2 {」と更新するのも
手間は同じですが・・・・・。
(複数のファイルを一括処理できるテキストエディタが必要ですがぁ。)

尚、CSS を用いる姿勢からくる意味的な事を考えるなら、
macintosh.css
h2 { font-size: 12px; }

windowsIE.css
h2 { font-size: 0.9em; }
の追記が望ましいです。


後は 継承という一番の希望が無理という事から、
どれだけ妥協するかの問題です・・・。
どうせ手間がかかるなら、意味的により適切な方を望むか、やはり少しでも手間を省きたいか・・・・・。

QC#で同じクラスAを継承したクラス1~20に対しての処理をきれいにしたい

C#でClassAを継承したClass1~20があり、
それらに以下のような処理をしているのですが、行数が増えすぎて見難いです。
もっと綺麗に書く方法はないのでしょうか?
class10の処理が「同じ処理」ならClassA型の配列でいけそうなんですが…。
class10だけ配列に入れないか、配列に入れてclass10の部分だけスキップするしか方法はないんでしょうか?
(頭が小文字なのはそのクラスのインスタンスです)
if(class1 != null)
{
  class1.同じ処理
}
if(class2 != null)
{
  class2.同じ処理
}
if(class3 != null)
{
  class3.同じ処理
}
   ・
   ・
   ・
if(class10 != null)
{
  class10.別の処理
}
   ・
   ・
   ・
if(class20 != null)
{
  class20.同じ処理
}

Aベストアンサー

> class10の処理が「同じ処理」ならClassA型の配列でいけそうなんですが…。
なら、メソッドを呼び出す側から見て同じ処理にしてしまえばいいんです。
そのためのメソッドのオーバーライドです。

public ClassA
{
 // ......

 public virtual void someMethod()
 {
  同じ処理
 }
}

Class10 : ClassA
{
 // ......

 public override void someMethod()
 {
  別の処理
 }
}

という具合にして、ClassA型の配列で回して someMethod() を実行しましょう。
someMethod() の引数・戻り値はやりたい処理に合わせて修正してください。

Qcssを使って文字を装飾しても改行させたくない場合

cssを使って文字を装飾しても改行させたくない場合、どのような方法がありますか?

<html>
<head>
<title>test</title>
<style type="text/css">
p.red { color: red; }
</style>
</head>
<body>
黒<p class="red">赤</p>黒
</body>
</html>

これだと



になってしまいますが

黒赤黒

にしたい場合
どうすればよいでしょうか?
よろしくお願いします。

Aベストアンサー

マイクロソフトのワードにもスタイル機能があることをご存知でしょうか?
ワードでは、文字スタイルと段落スタイルと2種類のスタイルがあります。
その名の通り、文字に対してのスタイルと、段落に対してのスタイルです。
で、気になるのが、文字と段落の違いですね。
ワードでは行頭から改行までを「段落」と位置づけています。
つまり、文字に対しての装飾と、段落に対しての装飾ではいろいろ違ってくる部分があります。

HTML/CSSも同様の考え方です。
HTML/CSSでは、段落をブロックレベル要素、文字をインライン要素と言います。
ここまで分かれば、もう検索したほうが早いです。
「css インライン要素」でどうぞ。

QC++/CLIでクラス内の要素を相互利用する方法

C++/CLIでクラスの中に定義された構造体等を、複数のクラス間で相互利用したいのですが、そのようなことは可能なのでしょうか。

とりあえず以下のコードを見ていただきたいのですが、

ref class class1;
ref class class2;

ref class class1
{
public:
 enum struct enum1
 {
  aa,bb
 };

 void func1a(class1^ obj){} // 1. OK
 void func2a(class2^ obj){} // 2. OK

 void func1b(class1::enum1 e){} // 3. OK
 void func2b(class2::enum2 e){} // 4. ERROR
};

ref class class2
{
public:
 enum struct enum2
 {
  aa,bb
 };

 void func1a(class1^ obj){} // 5. OK
 void func2a(class2^ obj){} // 6. OK

 void func1b(class1::enum1 e){} // 7. OK
 void func2b(class2::enum2 e){} // 8. OK
};

これの4.がコンパイルエラーになります。
このような構造を定義することはできないのでしょうか。

C++/CLIでクラスの中に定義された構造体等を、複数のクラス間で相互利用したいのですが、そのようなことは可能なのでしょうか。

とりあえず以下のコードを見ていただきたいのですが、

ref class class1;
ref class class2;

ref class class1
{
public:
 enum struct enum1
 {
  aa,bb
 };

 void func1a(class1^ obj){} // 1. OK
 void func2a(class2^ obj){} // 2. OK

 void func1b(class1::enum1 e){} // 3. OK
 void func2b(class2::enum2 e){} // 4. ERROR
};

ref class ...続きを読む

Aベストアンサー

 こんばんは。
 どうやら、無理な様です。
 列挙体をクラスの外に出して一番上に書けば解決ですが、如何してもクラス内に置く事を死守するのであれば、「4」のメンバ関数をテンプレートにして、class2::enum2が見えている所でテンプレートの全特化を行えば出来ます。
 以下参考程度になれば。

// clrconsole.cpp : メイン プロジェクト ファイルです。
#include"stdafx.h"

using namespace System;

ref class class1;
ref class class2;

ref class class1
{
public:
enum struct enum1
{
aa,bb
};

void func1a(class1^ obj){} // 1. OK
void func2a(class2^ obj){} // 2. OK

void func1b(class1::enum1 e){} // 3. OK
template<class _Enum>
void func2b(_Enum e);// 4. 中身を引っこ抜く
};

ref class class2
{
public:
enum struct enum2
{
aa,bb
};

void func1a(class1^ obj){} // 5. OK
void func2a(class2^ obj){} // 6. OK

void func1b(class1::enum1 e){} // 7. OK
void func2b(class2::enum2 e){} // 8. OK
};

// 4. 中身
template<>
void class1::func2b<class2::enum2>(class2::enum2 e)
{
//class2::enum2の時のみ
}

int main(array<System::String ^> ^args)
{
class1^ c = gcnew class1();

c->func2b(class2::enum2::aa);
c->func2b(class2::enum2::bb);

//適合しないenumを入れるとリンクエラーになる
//c->func2b(class1::enum1::aa);
//c->func2b(class1::enum1::bb);

return 0;
}

 こんばんは。
 どうやら、無理な様です。
 列挙体をクラスの外に出して一番上に書けば解決ですが、如何してもクラス内に置く事を死守するのであれば、「4」のメンバ関数をテンプレートにして、class2::enum2が見えている所でテンプレートの全特化を行えば出来ます。
 以下参考程度になれば。

// clrconsole.cpp : メイン プロジェクト ファイルです。
#include"stdafx.h"

using namespace System;

ref class class1;
ref class class2;

ref class class1
{
public:
enum struct enum1
{...続きを読む

Qcssを使用し文字の均等割付(指定文字のみ)をしたい

スタイルシートを使用し文字の均等割付をしたいのです。
よくWordなどで作成する文書で発信元・発信日付を右上につけますよね?例えば1行目に「日本株式会社」
2行目に「平成17年1月13日」のように。
1行目の「日本株式会社」2行目の文字「平成17年1月13日」と同じ幅にしたいといえばわかりますか?
Wordでは均等割付を文字に対してできますが、CSSではどのように記述(設定)すればよいでしょうか?
justifyではその行に対して割付されるので・・・
教えてください。

Aベストアンサー

justifyを使えばできなくもないですが、IE以外のブラウザは対応しないと思います。

div.justify {text-align:justify;text-justify:newspaper;width:200px}

<div class="justify">
日本株式会社<br>
平成17年1月13日<br>
</div>

QC,C++,C++/CLIの構造体とクラス

C++の構造体・クラスって、メンバのアクセス指定子のデフォルトが
privateかpublicかという違い「だけ」しか全くないのでしょうか?

クラスにおける
value class / ref class
という分類はC++/CLIのもので
これについては
value class の方は C言語の構造体に近いという事でいいでしょうか?

ref classの方は
ネイティブのC++のクラスを
マネージ用にしたようなもので

C++/CLIの構造体は
C++のそれと同じで
OKですか?

そしてそれらの構造体には、値型・参照型といった分類はないのでしょうか?

Aベストアンサー

> ということは、structも継承可、という事でしょうか?

structでも継承可能です。

> 継承のアクセス指定の方は
> クラスと構造体ではどうなるのでしょうか?

class A : Base {};



class A : private Base {};

と等価です。
一方、

struct A : Base {};



struct A : public Base {};

と等価です。

> そして「集成体」というのが初めて知ったのですが
> これはいわゆる、配列や・・・ある条件下でのクラス・・?
> なのでしょうか?

配列と以下の条件をすべて満たすクラスのことです。
・ユーザー定義のコンストラクタを持たない
・非公開または限定公開のメンバを持たない
・基底クラスを持たない
・仮想関数を持たない

ちなみにC言語の集成体は、配列と構造体の総称です(共用体は集成体ではありません)。

QFirefoxで参照ボタンのURL入力欄をCSSで装飾出来ない。(formで設定したfile入力欄をCSSで制御する方法)

以下の記述(inputタグの枠線を赤で表示)をしているのですが、inputタグのファイル送信欄だけ装飾されません。
IEではちゃんと表示されました。
どこが問題なのでしょうか?
お分かりの方いらっしゃいましたら回答よろしくお願いします。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<style type="text/css">

form {
background:#99FF99;
}

input {
border:5px solid #FF0000;
}

</style>
</head>
<body>



<form action="test.php" method="post" enctype="multipart/form-data">

テキストの入力欄
<input type="text" name="test_text" />

<br /><br />

ファイル送信欄
<input type="file" name="test_file" />

<br /><br />

<input type="submit" value="送信する" />

</form>



</body>
</html>

以下の記述(inputタグの枠線を赤で表示)をしているのですが、inputタグのファイル送信欄だけ装飾されません。
IEではちゃんと表示されました。
どこが問題なのでしょうか?
お分かりの方いらっしゃいましたら回答よろしくお願いします。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset...続きを読む

Aベストアンサー

すみません、ANo.2で誤字や適切でない言い回しがあったので訂正しておきます。

×Firefoxで確認してみましたが。よく見ると、参照先URLが表示される

○Firefoxで確認してみましたが、よく見ると、参照先パスが表示される

QC#クラスについて教えてください

下記通りクラスを作成した場合、プロパティaを配列にできますか?
class Class1
{
public string a { set; get; }
public int b { set; get; }
public int c { set; get; }
}



イメージとしては下記通りにしたいのですが、なかなかうまく行きません。
class Class1
{
public Class1(int x)
{
}
public string a[x] { set; get; }
public int b { set; get; }
public int c { set; get; }
}

private void Form1_Load(object sender, EventArgs e)
{
Class1 f = new Class1(2);
f.a[0] = "asdf";
f.a[1] = "asdfa";
f.a[2] = "asdfasd";
f.b = 1;
f.c = 2;
}
初心者なんで、やさしく教えてください。お願いします。

下記通りクラスを作成した場合、プロパティaを配列にできますか?
class Class1
{
public string a { set; get; }
public int b { set; get; }
public int c { set; get; }
}



イメージとしては下記通りにしたいのですが、なかなかうまく行きません。
class Class1
{
public Class1(int x)
{
}
public string a[x] { set; get; }
public int b { set; get; }
public int c { set; get; }
}

private void Form1_Load(object sender, EventArgs e)
{
Class1 f = new Clas...続きを読む

Aベストアンサー

class Class1
{
 public string[] a { get; set; }

 public Class1(int x)
 {
  a = new string[x+1];
 }
}

こんな感じですか??

QCSSの記述でのクラスの定義で

CSSの記述の中で
.yoko1 {
padding : 0 0 5px 10px;
border-bottom: 4px solid #00ffff;
margin-top: 1em;
margin-bottom: 2em;
}
とクラス名が付いています
p.yoko1 {
padding : 0 0 5px 10px;
border-bottom: 4px solid #00ffff;
margin-top: 1em;
margin-bottom: 2em;
}
こっちはタグ名に応じたクラスを定義していますが
タグ名に応じたクラスを使用するメリットはなんなのでしょうか?
全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。
よろしくお願いいたします。

Aベストアンサー

最も簡単な例をあげると
.a{background-color:blue}
p.a{color:red}
<p class="a">文字:赤/背景:青</p>
<div class="a">文字:黒/背景:青</div>
このようなときに便利ですね。
これをclass属性のセレクタだけでやろうとすると
.a{background-color:blue}
.b{color:red;background-color:blue}
<p class="a">文字:赤/背景:青</p>
<div class="b">文字:黒/背景:青</div>
のようになりますよね。
この場合background-color:blueが1箇所減らせるってことですね。

それとセレクタの詳細度っていうのがありまして
例えば
div.a{font-size:10px}
.a{font-size:20px;color:red}
<div class="a">font-size:10px;color:red</div>
<p class="a">font-size:20px;color:red</p>
のように書くとなんとなく後から書いたfont-size:20pxが両方に適用される気がしませんか?
でもdiv.aは11、.aは10だから<div class="a">にはfont-size:10pxが適用されるんです。
これは順番を入れ替えればどうにでもなることなんでメリットって言うほどのことでもないのですが、知らないで書いているとハマルことがあります。

参考URL:http://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity

最も簡単な例をあげると
.a{background-color:blue}
p.a{color:red}
<p class="a">文字:赤/背景:青</p>
<div class="a">文字:黒/背景:青</div>
このようなときに便利ですね。
これをclass属性のセレクタだけでやろうとすると
.a{background-color:blue}
.b{color:red;background-color:blue}
<p class="a">文字:赤/背景:青</p>
<div class="b">文字:黒/背景:青</div>
のようになりますよね。
この場合background-color:blueが1箇所減らせるってことですね。

それとセレクタの詳細度ってい...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報