[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?
2022-03-24 16:46:22
質問
他のCSSクラス(複数可)を継承したCSSクラスを作成することはできますか?
例えば、以下のようなものがあったとします。
.something { display:inline }
.else { background:red }
やりたいことは、こんな感じです。
.composite
{
.something;
.else
}
ここで、".composite" クラスはインラインで表示され、背景は赤になります。
解決するには?
のようなツールがあります。 LESS これは、あなたが説明したような、より高い抽象度でCSSを構成することができるものです。
Lessでは、これらを"Mixins"と呼んでいます。
の代わりに
/* CSS */
#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
と言うことができます。
/* LESS */
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners;
}
関連
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[解決済み] CSSのクラス名/セレクタに使用できる文字は?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] CSSファイルで相対URLを使用していますが、どの位置からの相対位置なのでしょうか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み】CSSでclassにワイルドカード*を使用する場合
-
[解決済み】CSSで複数の背景画像を表示させることはできますか?
-
[解決済み】CSSの:before/:after疑似要素で画像の高さを変えることはできますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する