Q&A
コードはmarkdown記法で見やすくシンタックスハイライトしていただけますでしょうか？
cssを使ってボタンを作る練習をしています。様々なサイトで勉強させていただいているのですが、
http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html
このサイトを見て疑問に思うことがありました。
このサイトのコードでは、同じクラス名（button）が複数回書かれています。
なぜ同じクラス名で二回もコードを書いているのでしょうか？
どのような仕組みで動いているのですか？
教えていただけると幸いです。
（＊以下、疑問に思ったコードと内容）
.button {(ここで一回目の.button)
display: inline-block; width: 200px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; outline: none;
}
.button::before,
.button::after {
position: absolute; z-index: -1; display: block; content: '';
}
.button,(あれ？二回目だ)
.button::before,
.button::after {（afterも二回出てきた。なぜ！？）
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;
}
回答5件
0
ベストアンサー
.button,(あれ？二回目だ)
ここからの指定は、改行しないと次のようになります。
.button, .button::before, .button::after {
このように「,(カンマ)」で区切ることで複数のセレクタに同じプロパティを指定することができます。
例えば次のように、クラス名AとBとCそれぞれに以下のようなプロパティが付いていたとします。
.A { width: 100px; height: 10px; } .B { width: 100px; height: 20px; } .C { width: 100px; height: 30px; }
これを以下のように書き換えることができます。
.A, .B, .C { width: 100px; } .A { height: 10px; } .B { height: 20px; } .C { height: 30px; }
このようにABCの共通したプロパティwidth:100pxをひとまとまりで書き、それぞれ別のプロパティであるheightを別で書くことができます。
なぜこんな書き方をするかというと、AもBもCもやっぱりwidth:50pxにしたい！と思ったときに、一箇所を編集すればよく、とても簡単だからです。
ただ、この書き方をする場合、AとBとCには共通したスタイルが当たっているため、プロパティや値を変えた際に影響範囲が広いので確認が大変になるというデメリットもあると思います。
投稿2015/12/09 06:02
総合スコア214
なるほど！すっきりわかりました！ありがとうございます！
他の皆さまの回答もわかりやすかったのですが、kazuhiro.kさんのものが（共通する部分を省略するということに加え、その方法も書かれていたため）一番わかりやすかったので、ベストアンサーにさせていただきます！
ありがとうございました。
お役に立ててよかったです！
僕自身も改めて整理できたのでとてもよかったです。
0
該当箇所ですが、本来下記のような感じです。
複数の要素で重複している箇所をまとめて書くと、行数が減ったり見やすくなったりします。
CSS
1.button{ 2 display: inline-block; 3 width: 200px; 4 height: 54px; 5 text-align: center; 6 text-decoration: none; 7 line-height: 54px; 8 outline: none; 9 /*↓重複している*/ 10 -webkit-box-sizing: border-box; 11 -moz-box-sizing: border-box; 12 box-sizing: border-box; 13 -webkit-transition: all .3s; 14 transition: all .3s; 15} 16 17.button::before, 18.button::after{ 19 position: absolute; 20 z-index: -1; 21 display: block; 22 content: ''; 23 /*↓重複している*/ 24 -webkit-box-sizing: border-box; 25 -moz-box-sizing: border-box; 26 box-sizing: border-box; 27 -webkit-transition: all .3s; 28 transition: all .3s; 29}
まとめると
CSS
1.button{ 2 display: inline-block; 3 width: 200px; 4 height: 54px; 5 text-align: center; 6 text-decoration: none; 7 line-height: 54px; 8 outline: none; 9} 10 11.button::before, 12.button::after{ 13 position: absolute; 14 z-index: -1; 15 display: block; 16 content: ''; 17} 18 19.button, 20.button::before, 21.button::after{ 22 -webkit-box-sizing: border-box; 23 -moz-box-sizing: border-box; 24 box-sizing: border-box; 25 -webkit-transition: all .3s; 26 transition: all .3s; 27}
投稿2015/12/09 05:44
総合スコア992
0
共通のプロパティーなので簡略化しているのだと思いますよ。
書き換えると、
.button {
display: inline-block; width: 200px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }
.button::before {
position: absolute; z-index: -1; display: block; content: ''; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;
}
.button::after {
position: absolute; z-index: -1; display: block; content: ''; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;
}
投稿2015/12/09 05:45
総合スコア26
0
仰るとおり、このように記述しても同じ結果を得られます。
css
1.button { 2 display: inline-block; 3 width: 200px; 4 height: 54px; 5 text-align: center; 6 text-decoration: none; 7 line-height: 54px; 8 outline: none; 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12 -webkit-transition: all .3s; 13 transition: all .3s; 14} 15.button::before, 16.button::after { 17 position: absolute; 18 z-index: -1; 19 display: block; 20 content: ''; 21 -webkit-box-sizing: border-box; 22 -moz-box-sizing: border-box; 23 box-sizing: border-box; 24 -webkit-transition: all .3s; 25 transition: all .3s; 26}
紹介されているソースコードで、同じセレクタを二度書いている理由として
css
1-webkit-box-sizing: border-box; 2-moz-box-sizing: border-box; 3box-sizing: border-box; 4-webkit-transition: all .3s; 5transition: all .3s;
この部分が、.buttonとその擬似要素に共通して記述されているので、同じ記述を避けて可読性を上げるためにこのようにして書いているのではないかと思われます。
あと大事なことが、上のようにバラバラで記述してしまうと、transitionの秒数を変更する際などに、その都度両方の記述を変更しなくてはならなくなってしまうので、記述をまとめているという意図があると思います。
短いCSSファイルなどではあまり恩恵を感じることが出来ないかもしれませんが、例えば長い長いCSSファイルだったり、もしくは別で読み込んでいる外部のCSSへの同セレクタの影響がある場合などに、記述がバラバラだと、
メンテナンスをする際に予想をしていない変更が起こってしまうことがあります。
投稿2015/12/09 05:59
総合スコア240
0
自分のサイトではないので予想ですが
予想１
スマートフォンとの振り分けを行っている場合
レスポンシブデザインで
@media screenの記述の後に書くことで
スマートフォンのみに適用させたい時に
同じクラス名で再指定することがあると思います。
予想２
cssファイルが長くなってきたり、急ぎの修正などを行う際、
また複数人で作業している場合などに発生する重複記述の可能性があります。
動きとしてはたとえば同じクラス名で同じプロパティを設定していたら
後に指定したほうが優先（書き換えられます）されます。
※上記ソースでは同じものはないですが
つまり処理的には2度することになるので体感では感じられないくらいの
微妙な遅延が発生していると思います。
大規模サイトではこういったものが積み重なってくると
サイト速度などに影響が大きくなります。
小規模サイトでは作業時間（コスト）と、それによっておこる影響などを
考慮して作業時間を優先する場合もあると思いますが、担当者によるところもあるかもしれません。
投稿2015/12/09 05:43
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
