More than 5 years have passed since last update.

Life is Tech !Advent Calendar 2018

CSS設計の基礎知識 ~ 音楽に乗せて~

Last updated at 2018-12-12Posted at 2018-12-12

自己紹介

こんにちは、Life is Tech!メンターのちゃーはんです！

普段は、キャンプやスクールでWeb系やデザイン系、音楽系のコースをみています！
最近の趣味はTikTokで可愛い女の子を見ることなのですが、
可愛い子は美肌・小顔効果を使っているということが判明してから、
自分ももしかしたらいけるんじゃないかと思ってこっそり動画を撮りためております...！

今回の記事について

そんな私ですが、今回はLife is Tech!のAdvent Calendarということで、少しでもみなさんのタメになる記事を書きたいなと思いまして、色々と考えました。

webに関して話してもいいし、音楽に関してでもいいし...
どっちにしようかな、迷うな...　(２週間経過)

ということで、迷った末　　
今回のテーマは

**「web×音楽」**です。

なんだかタメになりそうですよね。
もちろん、話題的に面白くなりそうだなと思ったから適当に共通点見つけてこじつけたなんて訳ではありません。

ありませんよ。

ちゃんと真面目な記事です。

なんで今更CSS?

前置きが長くなってしまったのですが
webといっても範囲が広いので、今回はフロントエンドの実装には欠かせないCSSについてです。

私自身、webサイトを作るお仕事を時々いただくのですが、
複数人での開発や長期的なメンテナンスを考える上ではCSSってとても難しいことに気づきました。

プログラミング言語はいろんなルールがあり、それ通りに書かなければそもそも動かないことがあるのですが
マークアップ言語やスタイル言語(HTML/CSS)は書けば、動きます。
つまり、書き方さえわかれば誰でも書けます。

ただ、「ただ書く」だけであればCSSはすぐに壊れてしまいます。

CSSはとても影響範囲が広かったり、どこと何が繋がっているか一度に可視化できる訳ではありません。
よって、

同じコードが何箇所にも渡って書いてある
セレクタ名が被ってしまう
一部修正したら他の部分もおかしくなってしまう

ということが起きしまいます。

よって、今回は有名なCSSの設計(命名)方法を紹介します。

私も全部に精通している訳ではないのですが、web始めたての方や今まであまりCSS設計について考えたことなかった人にとって考えるきっかけになればと思います。

1. BEM

基本的な概念

一言でいうと、「この要素はどこの中にある・どういう役割か」的なのを名前にぎゅっと詰めましょうという命名ルールです。

BEMの略は

Block (大きいカタマリ)
Element (大きいカタマリの中の要素)
Modifier (見た目等で特別に指定するもの)
で、それら3つの要素をCSSの命名に使用するということ。

さらに、それら3つを block__element--modifier という風に、
blockとelementの間は「 _ 」を2つ、elementとmodifierの間は「-」を2つ使って繋げます。

そうすることによって、その要素の名前をみたときにすぐにどのような要素なのかわかるということです。

具体的な話をすると、以下のように命名します。

<div class="block">
　　 <div class="block__element1">
    <div class="block__element1--modifier">
    </div>
  </div>
  <div class="block__element2">
    <div class="block__element2--modifier">
    </div>
 </div>
</div>

また、基本的にはSCSSを使用する想定でして、SCSSを使うと以下のように書くことができます。

.block {
  width: 100%;

  &__element {
    font-size: 20px;

    &--modifier {
      color: #000;

    }
  }
}

たくさんネストすると、それはそれで読み難くなるしネストを嫌う人もいるんですけど、まあある程度だったら関係性がよくわかっていいですよね。

SCSSのファイルに関しても、blockごとにblock名でファイルを作ってあげるのが公式らしいです。

メリット

SCSSを使うときに圧倒的便利だし、何より認知度が高いので特別共有が必要なさそうだなとは思います。
また、以降に説明する2つの記法に対して、BEMはシングルクラスなので設計が楽です。あまり頭使わない感じ。
その上、命名規則にそって命名をすれば意図が伝わりやすいので早く実装したい、という人にはいいかもしれません。

デメリット

クラス名、長くないですか？私だけ？
特に大きなサイトのコードを読むには読みにくいなぁ...と思ってしまいます。

・・・読みにくさといえば！

皆さん、楽譜って読めます？
PCのみを使って音楽を作る人や、小学校の音楽の授業以来音楽なんてやってないよなんて人などもいて
意外と楽譜の読み方わからない人が多いのではないでしょうか？

もしフロントエンドエンジニアの上司に、『CSSの設計考えてきてね！あ、あとついでにこの楽譜も読んできて！』なんて言われたら困りませんか？

ということで、今回は楽譜の基本的な読み方です！

まあ基本的にはそれぞれの音がどこにあるのかを覚えればオッケーです。
興味が湧いた人は以下を参照！

はじめての楽譜ガイド

2. OOCSS

基本的な概念

OOCSSとはNicole Sullivanさんによる考え方で、Object Oriented CSSの略です。
本人のOOCSSを説明するスライドも上がってるのでぜひ↓
Object Oriented CSS

OOCSSとは、基本的には命名規則というよりはそもそもの設計の部分で、
Sullivanさんは**「Webページを、レゴの集まりで考えよ」** と言ってます。
(多分、レゴの1ピースずつがセレクタに対応していて、それらを組み合わせて作ろうって感じだと思う)

つまり、ベースとなるプロパティをもつ要素をCSS側でいくつか用意しておいて、HTML側にはめていくという感覚です。

また、CSSに関しても構造を表すものと見た目を表すものを分離します。

/* titleに関する形的な部分 */
.title {
    width: 200px;
    height: 20px;
    line-height: 50px;
    text-align: center;
}
/* titleの見た目に関する部分 */
.title-red {
    color: red;
}

これをHTMLに反映するときには次のような感じ。

 <a class="text text-blue">ここに青いテキストが出るよ！</a>

これによって、形はそのままにして色だけ変えるということが容易にできるようになります。

また、特定の場所に制限してしまうようなセレクタは使いません。 eg: header, fotterなど
その代わり、big/smallや、right/left等にて再利用可能を目指します。

メリット

これは、後々サイトをメンテナンスするときや軽い修正、リデザインをするときに役に立ちます。
要素を追加したり削除したりするときにどこが編集されるのかが一目瞭然なのでバグの心配が低くなるかと。

デメリット

デザインからコーディングするまでに時間がかかるんじゃないかなと思います。
実装する人は全てのページにおいて分解して、どのような要素が必要か洗い出す必要がありますからね...

大掛かりなwebサイトやページ数の多いもの、長年に渡って伝われると思われるようなものに関してはOOCSSを使ってしっかりと設計してもいいかもしれませんね。
きっと他の人がコードを見てもすぐにわかると思います。

すぐにわからない事と言えば・・・

私自身曲を作ることが時々あるのですが、よく聞かれます。曲ってどうやって作ってるの？って。
なので、今回は一般的な曲の作り方、また私自身の作り方を少し紹介します。

曲を作るときには

メロディ
コード進行
リズム

の3つが必要です。
あとは、どれを先に決めるか、作成していくごとにどれくらいの理論を織り交ぜるがというところに人それぞれの個性が出ると思っています。

例えばメロディが自然と思いついた場合は、そのメロディはどのようなコード進行が合うのか(理論を使ったりして)、そこから雰囲気に合わせてリズムを決めていくなど。

そしてその3つを決めるときに、どのようなジャンルにするのかやどのようなサウンドを使うかなども一緒に考えることでより実現性の高い音楽ができてきます。

私の場合はコード進行をあらかじめ決めておいて、アコースティックギターでコードを永遠弾きながらメロディーが思い浮かんでくるのを待ちます。
そしてメロディができたらPCでリズム(ドラム)を打ち込んで色々な楽器で肉付けしていきます。

3. SMACSS

基本的な概念

SMACSSではCSSの書き方を以下の5種類で定義してます。

ベース
レイアウト
モジュール
状態（ステート）
テーマ

それぞれに関して説明していきます。

ベース

名前の通り、サイトのベースとなるものに対するルールです。
bodyやinput等のサイトを通して変わることのない、基本的なものです。
これはIDやclassではなく、要素そのものにCSSをつけることが多いです。

例えば

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #fff;
}
a:hover{
  color: #000;
}

ちなみに、*の部分は全セレクタに対応させるものでCSSリセットと言います。

レイアウト

ページのレイアウトを大きく区切ってそれぞれに対応させるものです。
例として、header,main,footer等が挙げられます。
これらの名前の前にはレイアウトの頭文字である「l」をプリフィックスとして付け加えます。

例えば

.l-header {
  height: 20px;
}
  
.l-main {
  float: left;
  width: 90%;
}

モジュール

モジュールは、タイトルやボタンなどなんども使い回すものをさします。(OOCSSと近いかな？？)
これらは普通に命名してもいいのですが、親モジュールと子モジュール等にてネストするときは命名として「親-子」という名前にします。

<div class="l-main">
  <div class="box">
    <h1 class="box-title">タイトル</h2>
    <p class="box-description">説明</p>
  </div>
</div>

ステート

これはわかりやすいのですが、要素の状態を表します。
is-openとか、is-disabledとかです。

テーマ

あまり使っているのを見た事ないのですが、全体のスタイルを上書きするときに使うらしいです。

メリット

なんか、全部入ってます！って気がします。
設計もできて、使い回しもして。という感じで、BEMとOOCSSのいいとこ取りのような印象を受けます。

デメリット

いや、5つの要素って多すぎて覚えられない！！

多すぎて覚えられないと言えば・・・！

はい、曲のジャンルです。
最近youtubeやサウンドクラウドで色々なジャンルの曲が誰でも自由に聴けます。
そうすると、今までは有名だった曲のジャンルから色々な要素が加わって派生して・・・と曲のジャンルがどんどん増えていくわけです。

という事で、音楽にはどのようなジャンルがあるのか？　またそのジャンルってどういう曲があるのか？というのが一発で見れるサイトを紹介します。

Every Noise at Once

私はこのサイトで新しいジャンルを見つけたらそのままサンクラで調べて新しい曲を探すときに役立ててます。
また、音楽通っぽい友達に最近どんな音楽聴いてるの？って聞かれたときには聴いた事なさそうなジャンルを言ってカッコつけてます。

まとめ

はい、という事でCSS　~~と音楽~~　の話、いかがだったでしょうか？
私自身の知識も浅く本当に基本的な概念の部分のみになってしまったのですが、興味が湧いた人はぜひ色々と調べて見てください！
また、CSS設計に関しては人によってやり方や考え方が違うので、詳しい人に意見を聞いてみてもいいかもしれません。
とにかく、全くCSS設計に関して考えた事なかった人へのきっかけになれていたら嬉しいです。
また、音楽に関して何か興味を持ってくれたら感動します。(小声)

という事で、明日はAndroidコースのなべです！楽しみ！

そして今日はドラマけもなれの最終話なので早くお家に帰ろうと思います！