おはこんばんちは！面白プロデュース事業部 フロントエンジニアの中村です。
とうとう新卒ではなくなり、2年目になった今、入社する前に知りたかったな〜という記事を書きたいと思います。
はじめに
皆さんはCSSを勉強したことがありますでしょうか。
自分の中では、CSSはプロパティをいっぱい知っていて、それを適切なタイミングで適切なものを使えるようにする技術が必要なものだと思っています。
別に暗記してなくても、なんとな〜くこんなのあったな〜ぐらいで覚えていると、調べることができますからね。
しかしながら、よく使われるものや便利なものが優先的に知識としてたまり、意外と身近にあるのに知らないプロパティがあったりします。
例えば、要素をセンタリングするだけでもいろいろな書き方があり、調べていくうちに新たな発見があったりするのではないでしょうか。
今回はそういう感じで、レスポンシブデザインを作っていく中で便利な書き方をいくつか挙げていこうと思います。
レスポンシブデザインの形
近年ではレスポンシブデザインが当たり前のような世界になっていますので、CSS(ここではSCSSを使用)は以下のような書き方をします。
.class-name { /* PC用/共通のスタイルを書く */ @include sp { /* SP用のスタイルを書く */ } }
SP用のスタイルを書くと、PC用のスタイルを上書きできるので、レスポンシブデザインが満たせるというものになっています。
ここでポイントとして、PCとSPで別々のスタイルを書く場面があるということです。
逆にいうと、共通部分の記述が多ければ多いほどSP用のスタイルの部分に書くものが減り、デザインの変更等に耐えやすいCSSが書けます。
また、不要な部分の記述が少なければ少ないほど、修正時のミスが減り、あれ？デザイン通りじゃないぞ？という時間を減らせます。
margin
最初は基本的でかつ、よく使われるmarginです。
一括指定プロパティ
まずは、右にマージンを当てたいとします。
PCでは10px、SPでは20pxを当てるとします。
.class-name { margin: 0px 10px 0px 0px; @include sp { margin: 0px 20px 0px 0px; } }
これでも「右に指定されたマージンを当てる」という要件は満たせます。
このような、1つのプロパティで複数のプロパティを指定できるもの(ここではmargin)は 一括指定プロパティ と呼ばれます。
しかし、0pxは特に指定する必要がなく冗長ですし、 marginはクラスの当て方が悪いと上書きされる危険性があり、欲しいもの以外を書くメリットがあまりないです。
個別指定プロパティ
そこで、以下のような記述で先程の問題を回避できます。
.class-name { margin-right: 10px; @include sp { margin-right: 20px; } }
これにより、マージンを右側だけに当てていることが一目でわかります。
ここで言う margin-right のようなプロパティを、 margin と対比して 個別指定プロパティ と呼ばれます。
好みが分かれる部分
ここで、左も同じ値を当てたいとします。
.class-name {
margin-right: 10px;
+ margin-left: 10px;
@include sp {
margin-right: 20px;
+ margin-left: 20px;
}
}
この様に修正をすることもできるんですが、少し冗長な気がします。
そこで、以下のように変えることも出来ます。
.class-name { margin: 0px 10px; @include sp { margin: 0px 20px; } }
この様に書くと、1行で収まります。
しかしながら、指定しなくてもよい0pxを含めることになります。
そのため、上記2つはどちらを用いるかはレビュアーの匙加減になってしまいます。
ただ、その1行ずつを犠牲にして、0pxを含めるような書き方をするのを良しとするか、そのリスクと交換で1行に収めるメリットがあるかをよく考える必要があります。
border-radius
border-radiusも別々に指定することが出来ます。
それでは、まず四角の右上だけを丸くさせることを想定します。
半径をPCでは10px、SPでは20pxにすることにします。
そのまま素直に書いてみると、以下の通りになります。
.class-name { border-radius: 0px 10px 0px 0px; @include sp { border-radius: 0px 20px 0px 0px; } }
これでも全然問題はないんですが、marginの時と同じく、指定する必要がないものがあります。
そういう時に、便利な個別指定プロパティを使いましょう。
.class-name { border-top-right-radius: 10px; @include sp { border-top-right-radius: 20px; } }
こうすることで、わざわざ他のところを0pxと書かなくても、右上だけ半径を指定することが出来ました。
また、右上だけ丸くしているんだなと見ただけでわかるようになり、他の方がコードを見た時にも見やすくなりました。
border
borderのように、数値以外も色々指定できる一括指定プロパティもあります。
それでは、上下に赤色の1本線を引くことを想定します。
ちょっと太いですが、太さはPCでは10px、SPでは20pxにすることにします。
ただ、borderでは上下に指定することは出来ないので、border-topとborder-bottomを使用します。
.class-name { border-top: 10px solid #ff0000; border-bottom: 10px solid #ff0000; @include sp { border-top: 20px solid #ff0000; border-bottom: 20px solid #ff0000; } }
しかし、このままだと色を変更しようとした時、2つとも変更する必要があります。
前述でもあった通り、共通部分はできるだけまとめておいた方が修正が楽なので、以下のようにまとめてみます。
.class-name { border-color: #ff0000; border-style: solid; border-top-width: 10px; border-bottom-width: 10px; @include sp { border-top-width: 20px; border-bottom-width: 20px; } }
こうすることで、PCとSPの差分は太さだけであることが明確にわかります。
気をつけないといけないこと
例えば全方位にmarginを当てたいとします。
当てる値は先ほどと同じとして、以下のように書いてみます。
.class-name { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; @include sp { margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; } }
こういった場合、わざわざ分ける必要がありません。
以下のようにまとめて書いた方がわかりやすくていいでしょう。
.class-name { margin: 10px; @include sp { margin: 20px; } }
そのため、いかなる時も分けて書く必要があるわけではありません。
あくまで、不要な部分の記述を減らす目的で分けることにより、共通部分が増えたり、PCとSPでのスタイルの差分が見やすくなっていたということを忘れないでください。
また、一括指定プロパティと個別指定プロパティを一緒に書いてしまうと、プロパティの重複でのチェックが引っ掛からなくなるため、注意が必要です。
.class-name { margin-right: 30px; margin: 10px; @include sp { margin: 20px; } }
こういった可読性の低下を防ぐため、あえて個別指定プロパティを全て禁止したり、逆に一括指定プロパティを禁止し、全てバラバラに指定するなんていう方針があったりします。
どちらとも利点と欠点がありますが、どちらかに統一した方が読みやすいのは確かです。
そのため、どちらの書き方も出来るようになっておいた方が、共同開発をする際に可読性の低いCSSを書かずに済むようになります。
まとめ
CSSは色んな書き方が出来ます。
特にそれぞれに利点と欠点がなく、答えがないのが事実です。
そのため、どの書き方にも対応出来ておいた方が仕事をする際に役に立つと思います。
今回はレスポンシブデザインにスコープを向けたCSSの書き方でしたが、他にも色んな書き方があるので、よければ調べてみてください！
