中野ピク氏の絵のブログ

絵を描いたり、絵についての文を書いたりします。

書いて覚えるBEM入門0001 | BEMの命名規則入門 | 中野ピク氏流CSS設計の話

はじめに

BEMというCSS命名規則があり、MindBEMdingと呼ばれるものが特に広く知られています。

BEMとは、CSSのクラスを役割ごとにBlock・Element・Modifierという3種類に分類し、それらの頭文字をとったもので、それぞれに命名規則があります。

具体的にどのように記述したらよいのかという質問をよく受けるので、具体例を書きながら中野ピク氏流を紹介していきます。

具体的にモジュールを書いてみる

ディレクトリの作成

任意の場所にmodules/exampleとなるようにディレクトリを作成します。

例となるHTML

例えば以下のような構造のHTMLがあることとして、ここにクラスを付与しながら説明を進めます。

<div>
  <div>
    <ul>
      <li>
        サンプル
      </li>
      <li>
        サンプル
      </li>
    </ul>
  </div>
</div>

scssファイルの作成

modules/example/_mod-example-0001.scssを作成します。

このファイルに記述しながら以降の説明を進めていきます。

Blockクラス

まずはBlockクラスについてです。

Block名とはモジュールの名前と思っていただければと思います。
私はモジュールに mod- という接頭辞をつけます。
これはチーム内の誰もが一目でBootstrapなどのライブラリのクラスと区別がつくようにしています。

SCSS記法で書いていきます。

.mod-example-0001 {
  padding: 20px;
  background: #eeeeee;
}

Blockクラスがモジュールの一番外側のタグに付きます。

<div class="mod-example-0001">
  <div>
    <ul>
      <li>
        サンプル
      </li>
      <li>
        サンプル
      </li>
    </ul>
  </div>
</div>

ファイル名の命名規則_Block名.scssになっています。

Elementクラス(1つめ)

ElementとはBlockの子要素につけるクラスです。
`Block名__Element名という命名規則で、どのBlockに属する子要素であるかをクラス名で表します。

以下の通りmod-example-0001__first-wrapperを追記します。

.mod-example-0001 {
  padding: 20px;
  background: #eeeeee;
  .mod-example-0001__first-wrapper {
    padding: 10px;
  }
}

以下のようにHTMLに適用します。

<div class="mod-example-0001">
  <div class="mod-example-0001__first-wrapper">
    <ul>
      <li>
        サンプル
      </li>
      <li>
        サンプル
      </li>
    </ul>
  </div>
</div>

Elementクラス(2つめ)

Blockは複数の子要素を包括しています。
ふたつめのElementクラスを追記します。

以下の通り.mod-example-0001__listを追記します。

.mod-example-0001 {
  padding: 20px;
  background: #eeeeee;
  .mod-example-0001__first-wrapper {
    padding: 10px;
  }
  .mod-example-0001__list {
    list-style: none;
  }
}

以下のようにHTMLに適用します。

<div class="mod-example-0001">
  <div class="mod-example-0001__first-wrapper">
    <ul class="mod-example-0001__list">
      <li>
        サンプル
      </li>
      <li>
        サンプル
      </li>
    </ul>
  </div>
</div>

このときよくある間違いはmod-example-0001__first-wrapper__listというように__を二回書いてしまうことです。
あくまでも、どのBlockに属しているかを表しているだけなのでBlock名__Element名であり、クラス名の中に__は一回だけです。

Elementクラス(3つめ)

みっつめのElementクラスを追記します。

以下の通り.mod-example-0001__itemを追記します。

.mod-example-0001 {
  padding: 20px;
  background: #eeeeee;
  .mod-example-0001__first-wrapper {
    padding: 10px;
  }
  .mod-example-0001__list {
    list-style: none;
  }
  .mod-example-0001__item {
    color: #222222;
  }
}

以下のようにHTMLに適用します。
2つのliタグに適用します。

<div class="mod-example-0001">
  <div class="mod-example-0001__first-wrapper">
    <ul class="mod-example-0001__list">
      <li class="mod-example-0001__item">
        サンプル
      </li>
      <li class="mod-example-0001__item">
        サンプル
      </li>
    </ul>
  </div>
</div>

重ねて言いますが、Elementクラスの命名規則Block名__Element名です。
Element名は自分がわかりやすいと思う名前を付けてください。

BlockのModifierクラスを作る

Modifierとは変化をさせるためのクラスです。
BlockのModifierクラスの命名規則Block名--Modifier名で、どのクラスと一緒に付与するかをクラス名で表します。

カラーバリエーションを作るというのが最も代表的な使い方ですが、形状変化など臨機応変に使用します。

実際にBlockのカラーバリエーションクラスを作ってみます。

以下の通り.mod-example-0001--invalidを追記します。

.mod-example-0001 {
  padding: 20px;
  background: #eeeeee;
  &.mod-example-0001--invalid {
    background: #ffcccc;
  }
  .mod-example-0001__first-wrapper {
    padding: 10px;
  }
  .mod-example-0001__list {
    list-style: none;
  }
  .mod-example-0001__item {
    color: #222222;
  }
}

以下のようにHTMLに適用します。

<div class="mod-example-0001 mod-example-0001--invalid">
  <div class="mod-example-0001__first-wrapper">
    <ul class="mod-example-0001__list">
      <li class="mod-example-0001__item">
        サンプル
      </li>
      <li class="mod-example-0001__item">
        サンプル
      </li>
    </ul>
  </div>
</div>

ベースとなるクラスmod-example-0001とベースを部分的に変化させるクラスmod-example-0001--invalidを一緒に付与します。
私はmodifierは単体では効果がないようにSCSSを記述し、今回の例でいうとmod-example-0001と一緒に付与したときだけ背景色が赤くなるようにしています。

ElementのModifierクラスを作る

ElementのModifierクラスを作っていきます。
ElementのModifierクラスの命名規則Block名__Element名--Modifier名で、どのクラスと一緒に付与するかをクラス名で表します。

以下の通り.mod-example-0001__item--invalidを追記します。

.mod-example-0001 {
  padding: 20px;
  background: #eeeeee;
  &.mod-example-0001--invalid {
    background: #ffcccc;
  }
  .mod-example-0001__first-wrapper {
    padding: 10px;
  }
  .mod-example-0001__list {
    list-style: none;
  }
  .mod-example-0001__item {
    color: #222222;
    &.mod-example-0001__item--invalid {
      color: #ff0000;
    }
  }
}

Elementのmodifierについても単体では効果がないようにSCSSを記述し、今回の例でいうとmod-example-0001__itemと一緒に付与したときだけ文字色が赤くなるようにしています。

命名規則のまとめ

まとめると以下の4種類を理解すれば良いことになります。

分類 命名規則 具体例
Block Block名 mod-example-0001
BlockのModifier Block名--Modifier名 mod-example-0001--invalid
Element Block名__Element名 mod-example-0001__item
ElementのModifier Block名__Element名--Modifier名 mod-example-0001__item--invalid

インデックスやまえがきみたいなもの | 中野ピク氏流CSS設計の話

はじめに

順番とかをあまり考えずに、思いついた順に「中野ピク氏流CSS設計の話」と題して書いていきます。

主な内容としては、長期メンテナンスを視野に入れたCSS設計やクラス命名規則について書こうと思います。

対象読者としては、SCSSをコンパイルする環境を自分で構築できて、CSSを使ってwebページを丸々1ページ作れる人を想定しています。

思い出しインデックス

思い出したことを都度書き足していこうと思います。
詳細は各記事で。

  • BEM命名規則の基礎
  • marginを付ける方向
  • モジュールのmargin初期値
  • sassの&(親参照)はクラス名の一部としては使わない(可読性とスコープと検索性について)
  • モジュールのカテゴリを定義して無理やりにでも当てはめると管理が楽

特に重要視していること

  • 命名規則はBEMを使う
  • クラスの影響範囲を限定する(ElementはBlock内だけ有効とし、Modifierはペアとなるクラスと一緒に付与したときだけ有効とする)

ドキュメントの背景を透明にする | Affinity Designer その0005

はじめに

ドキュメントの背景を透明にします。

pngなどで書き出すときに便利だと思います。

背景は別途オブジェクトで配置する手もあるかと思います。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

引用になりますが、以下のように説明されています。

[透明な背景]—オンにすると、ページの背景が透明になります。

自分も説明

ウィンドウ上部のメニューから以下の画像のように「ファイル」「ドキュメント設定」の順にクリックします。

f:id:nakano_pixy:20190531162541p:plain

以下のようなダイアログボックスが開いたら、「カラー」タブをクリックし「透明な背景」にチェックを入れて「OK」をクリックすると背景が透明になります。

f:id:nakano_pixy:20190531162752p:plain

その他のこと

まだ私自身は機能を未確認ですが、アートボードの不透明度を設定する方法もあるようです。

Affinity Designerヘルプ

オブジェクトの配置座標を数値入力で正確に設定する | Affinity Designer その0004

はじめに

オブジェクトの配置座標を数値入力で正確に設定します。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、XとYを入力することで正確な配置ができます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain

オブジェクトを回転したり傾斜させる | Affinity Designer その0003

はじめに

オブジェクトを回転させたり、斜めに歪ませるような変形をします。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、回転や傾斜ができます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain

オブジェクトの拡大・縮小をする | Affinity Designer その0002

はじめに

オブジェクトを拡大・縮小します。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、WとHの値を変更すると大きさが、またXとYで配置座標も正確に設定することができ、回転、傾斜などもできます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain

Illustratorの代替ツールとしてAffinityDesignerを紹介 | Affinity Designer その0001

はじめに

何年か前からAdobeイラレIllustrator)の代替ツールを探していたのですが、無料ツールでは私にとって使いやすいものは見つからず、友人から教えてもらったAffinity Designerのデスクトップ版を2018年に買いました。

Affinity Designer - デスクトップとiPadで利用できるプロフェッショナル向けグラフィックデザインソフトウェア

affinity.serif.com

価格

今日2019年5月31日現在で、買い切りで6,000円(税込み)です。

私が購入したときも6,000円でした。

ソフトウェアのアップデートも今のところ無料で行えます。

公式ガイドブック

公式ガイドブックも販売されています。

Affinity Designer Workbook - Affinity Designerの公式ガイドブック

公式ヘルプページ

操作方法などのヘルプが掲載されています。

Affinity Designerヘルプ

使ってみた感想など

私の感想としては使いやすくて6,000円の価値は充分にあり、お買い得だったと思っています。

もちろんイラレの方が圧倒的に高機能ではありますが。

パスで描く絵は線もきれいで拡大縮小にも強いので、SUZURIなどでのグッズにもとても良いですね。

時々しか使わなくて使い方を忘れがちなので、今後少しずつ備忘録やAffinity Designerの紹介として使い方などをこのブログに書いていきたいと思っています。

公式ヘルプページのURLを貼るだけになる可能性もありますが。

とても良いソフトウェアだと思いますが、知名度があまりない感じがするのでもっと広まってくれたら良いなと思います。