質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

CSSに別のCSSの情報を付与する方法はないか

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 567

score 3074

HTML5 + CSSでやっています。(趣味)

CSSは外部ファイル( 例えば default.css等 ) としてやっています。

質問: CSSに別のCSSの情報を付与する方法はないか?

例えば、基本的なCSSを default.cssに記述しておいて、
基本的なHTML構造を用意するとします。

これを(ファイルとディレクトリを)コピーして"project1"というディレクトリを作ります。

この中に入っているdefault.cssには初期状態として

.redpen{
   color: red;
}

.greenpen{
   color: green;
}

.marker{
   background-color: yellow;
}

みたいに書いているとします。

で、このdefault.cssを @importでしたっけ?
これで取り込んでoriginal.css とします。( このproject独自の定義 )

original.css内で redmarker = redpen + marker のように合成することはできないでしょうか?

書き方はあくまでイメージですが、

.redmarker{
  + .redpen;
  + .marker;
}

のような感じです。

ある意味、C++とかでいう、多重継承みたいな状態をイメージしています。

これって不可能でしょうか?

やはり

<span class="marker"><span class="redpen">全米が泣いた!</span></span>

のような感じでHTMLの方で追加していくしかないでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

半角スペースで複数つければよいです。

<span class="marker redpen">全米が泣いた!</span>

あとcss自体も色々な書き方が出来ます。

SCSSを導入すればまさに継承のような定義の仕方が可能です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/25 14:45

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

    おお、近いです!
    まだ試していないのでどうなるかわかりませんが、
    ちょっと惜しいぐらいです。

    個人的にはsass? のextendに近い処理がしたかったのです...
    (今、sassっていうのを知りました...)

    でも、
    <span class="marker"><span class="redpen">全米が泣いた!</span></span>
    よりはかなり、私がやりたかったことに近いので、sassっていうのを理解するまではこちら( and のやつ )を使わせていただきます!

    キャンセル

  • 2019/03/25 14:47

    そのまま、囲めばよかったのか...

    キャンセル

  • 2019/03/25 14:50

    cssはあくまでレイアウトのみを司るものなのでプログラミング的に都合の良いようには作られてなかったりします。これでもだいぶ柔軟になってきましたし、SCSSという仕組みはできたものの結局コンパイルしてcssとして読ませるしかなかったりします。
    そこは仕様として受け止めるしかない部分もありますね

    キャンセル

+2

回答として少し違っていたらすみません。

scssのmixinがやりたいことと近いのかなという印象だったので回答してみます。
https://qiita.com/one-a/items/2758511326c09200fded

@mixin redpen(){
   color: red;
}

@mixin greenpen(){
   color: green;
}

@mixin marker(){
   background-color: yellow;
}

.redmarker {
  @include redpen();
  @include marker();
}

scssはブラウザでサポートされていなかったと思うので
一般的にはローカル環境などでコンパイルすることが多いと思います。

私はgulpというものを使用してCSSに書き出していますが
上記をコンパイルすると以下のようになります。

.redmarker {
  color: red;
  background-color: yellow;
}

scssはプロパティを変数に入れたり
その変数を引数にしてオブジェクト指向っぽく書けたりします。
数年前にCSS界隈で流行っていたもので
現在は生のCSSで四則演算ができるようになっていたりするので
この辺りももっと良い方法があるかもしれません。
参考になりましたら幸いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/25 14:39

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

    おー、sassっていうのがあるんですねぇ。

    キャンセル

  • 2019/03/25 14:48

    sassっていうのを試してみてから使わせてもらいますね

    キャンセル

  • 2019/03/25 15:08 編集

    すみません、extendの方が近そうですね。
    私も使ったことなかったので勉強になりました!
    またsassとscssの記載も間違いがあったので修正しました。
    今回書いたのはscssでした。失礼いたしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る