ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.3988356 CSS省略
質問者：syuricyan a.menu:link {
color: #99CC00;
background-color: #FFFFFF;
margin: 5px;
padding: 3px;
text-decoration: none;
display: block;
width: auto;
}
a.menu:visited {
color: #99CC00;
background-color: #FFFFFF;
margin: 5px;
padding: 3px;
text-decoration: none;
display: block;
width: auto;
}
a.menu:hover {
color: #99CC00;
background-color: #F0FFC4;
margin: 5px;
padding: 3px;
text-decoration: none;
display: block;
width: auto;
color: magenta;
}

メニューの部分のリンクについてのスタイルシートです。
訳あってこれとは別に .menu_ss .menu_s として、
width のところを 45px 100px としたものを作ろうとしていますが、
そのままだと全体がずいぶん長くなってしまいます。（３組×３）

width の設定以外がほとんどかぶってしまうのですが、
この場合省略して書く方法はあるのでしょうか？

基礎的質問で申し訳ありませんが、よろしくお願いします。
困り度：
  • 暇なときにでも
質問投稿日時：
08/04/30 21:38
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.3 もう少し整理してみました。
a.menu,a.menu_ss,a.menu_s{
color: #99CC00;
margin: 5px;
padding: 3px;
text-decoration: none;
display: block;
width: auto;
}
a.menu:link,a.menu_ss:link,a.menu_s:link,
a.menu:visited,a.menu_ss:visited,a.menu_s:visited{
background-color: #FFFFFF;
}
a.menu:hover,a.menu_ss:hover,a.menu_s:hover{
background-color: #F0FFC4;
color: magenta;
}
a.menu_ss{
width:45px;
}
a.menu_s{
width:100px;
}
回答者：kuzumiHK
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：
08/04/30 22:12
この回答へのお礼具体的に回答していただきありがとうございます。実働ではオンマウスでアンダーラインが出ましたが、
現在は問題なく表示されています。ほんとうにありがとうございました。

回答良回答10pt
ANo.2 css　の　c　は　Cascading　の　c
cascade
​http://dictionary.goo.ne.jp/search.php?MT=Cascade&kind=jn&m...​

cssは「継承」と呼ばれる方法で設定を下層へ引き継いでいくようにできていて同じ階層の場合は上書きされていくという仕掛けで動作しているよ。

つまり…
共通する項目を先に書いて、それ以外は後から書くと共通される部分は共有される事になるね。

a{}
a:hover{}
.menu{}

という書き方をすれば済むんじゃない？
上から適用されて、同じ項目は下、つまり後から現れた物が適用される。
回答者：SAYKA
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/04/30 22:12
この回答へのお礼論理的ご回答で非常に勉強になりました。ありがとうございました。

回答
ANo.1 これでいかがでしょう。
a.menu:link,a.menu_ss:link,a.menu_s:link{
〜元と同じ〜
}
a.menu:visited,a.menu_ss:visited,a.menu_s:visited{
〜元と同じ〜
}
a.menu:hover,a.menu_ss:hover,a.menu_s:hover{
〜元と同じ〜
}
a.menu_ss{
width:45px;
}
a.menu_s{
width:100px;
}
回答者：kuzumiHK
種類：回答
どんな人：専門家
自信：参考意見
回答日時：
08/04/30 22:02
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ