サイトのメインカラーが#123456だとして、色々な場面でそのカラーを指定することになると思います。
.maincolor { background-color: #123456 }
body { background-color : .maincolorの色を設定 }
h3 { background-color : .maincolorの色を設定 }
ul.nav a:link { color : .maincolorの色を設定 }
このようにプロパティやクラスをincludeできればどんなに便利かと思います。
こんなことは不可能でしょうか。
不可能な場合、皆様はどのように管理されていますか?
No.2ベストアンサー
- 回答日時:
これは素晴らしい!ありがとうございます。
質問の意図を理解していただいて感謝です。BAにさせていただきます。
知らなかったのですが、CSSで変数が使えるドラフトが上がっているようですね。
CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開
http://www.publickey1.jp/blog/12/cssw3ccss_varia …
実装が待ち遠しいです。LESSの階層化も提案されるといいですね。
No.3
- 回答日時:
.maincolor { background-color: #123456 }
body { background-color : .maincolorの色を設定 }
h3 { background-color : .maincolorの色を設定 }
ul.nav a:link { color : .maincolorの色を設定 }
よりは
body,h3,ul.nav a:link{background-color:#123456;}
のほうが簡単ですし・・・
No.1
- 回答日時:
なぜclass指定の必要があるのですか?
外部スタイルシートで
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
とか指定しておけばよい。
優先スタイルシート(preferred style sheet)--title属性を持たない--を外部スタイルシートで置けば良いです。
>body { background-color : .maincolorの色を設定 }
>h3 { background-color : .maincolorの色を設定 }
>ul.nav a:link { color : .maincolorの色を設定 }
background-colorプロパティは継承しませんが、デフォルトがtransparentなので、このように記述する必要がありません。
【引用】____________ここから
'background-color'
Value: <color> | transparent | inherit
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[色と背景( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
また、colorプロパティは継承しますから、やはり記述する必要がありません。
【引用】____________ここから
'color'
Value: <color> | inherit
Initial: depends on user agent
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[色と背景( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
継承しないプロパティを継承させる必要があるときは、inheritと記述します。
>このようにプロパティやクラスをincludeできればどんなに便利かと思います。
カスケーディングスタイルシート(CSS)を使われているのでしたら、それが使われる理由がカスケーディングにあることはご存知だと思います。
とても強力でわかりやすい--常識的にも理解しやすい仕組みです。
それが便利だから使っているのですよ。
---プロパティより先に身につけておくべきです。
>こんなことは不可能でしょうか。
不必要ですからありません。CSSではなく他のスタイルシート(XSLT)などを使えばできるでしょうけど、その必要はまったくありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<form <input type="text"の枠...
-
リンク部分にカーソルが来たら...
-
カラープレーンってなんですか?
-
HRタグ 枠線を透明にするには?
-
横スクロールバーを表示したい
-
<pre>~</pre>について
-
スクロールバーが薄いです。
-
html で文字の色が出てこない。
-
カーソルを乗せると、文字の色...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
widthやheightの数値に単位(px...
-
リンクを知らせる手のマークが...
-
<div id="container">の使いか...
-
smallにtext-allignが効かない
-
番号付きリスト(<Ol><Li>・・...
-
<ul>~</ul>が二つ続くと間に改...
-
外部スタイルシートで定義した...
-
IEでスクロールできない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<form <input type="text"の枠...
-
訪問済のリンク色を変えない方法
-
HRタグ 枠線を透明にするには?
-
<pre>~</pre>について
-
CSSでクラスのエイリアス(include)
-
カラープレーンってなんですか?
-
ホームページビルダー 水平線に...
-
テキストボックスの文字の大き...
-
横スクロールバーを表示したい
-
リンク下のアンダーラインの消し方
-
リンクのアンダーバーを消した...
-
秀丸の正規表現を使って<FONT c...
-
\\0 sprintf( ) strcat( )
-
Pandas の groupby後の要素の参...
-
リンクの下線を消す
-
白い文字と黒い文字を出すため...
-
はじめて利用します。質問の上...
-
C# RichTextBoxで選択した文字...
-
HP作成(スクロールバーの色)
-
bodyの背景と異なる背景色で、...
おすすめ情報