Drupal 7 でテーマ開発をするなら必ず押さえておきたいコア CSS クラス

本日は Drupal のフロントエンドのお話です。

突然ですが、 Drupal でテーマを作成する開発者/テーマ作成者のみなさまはふだん Drupal 7 でテーマ開発を始めるときにどのようなことに気をつけてらっしゃるでしょうか？ Drupal のフロントエンド開発を担当する際には、「ウェブサイト制作一般」という視点で気をつけるべきこともありますし、「 Drupal ならでは」の注意点ももろもろあるものと思います。

今回はそんな「 Drupal のテーマ開発に携わる上で知っておきたいこと」のひとつである「 Drupal コアの CSS 」について取り上げてみたいと思います。

Drupal コアに含まれる CSS

Drupal には「ウェブアプリケーションフレームワーク」（ WAF ）と「コンテンツマネジメントシステム」（ CMS ）の 2 つの側面がありますが、後者の CMS としての側面のひとつに battery-included の思想というものがあります。

battery-included というのは日本語でいうところの「電池付き」のことで、たとえば「ミニ四駆を買ったら電池も同梱されていて、ハコから出せばそのまま遊べる」といった特徴のことです（たとえが古いでしょうか）。 明言はあまりされませんが Drupal にもこの特徴があり、インストールしていくつかのオプション/モジュールを有効化するだけで本当に多くの実用的な機能が利用できるようになっています。 他のフレームワークや CMS から Drupal に乗り換えた方がよく驚くのもこの「 Drupal でコードを書かなくてもできることの多さ」です。

この battery-included な特徴を備えるために、 Drupal コアには数はわずかながら「デフォルトの CSS スタイル」というものが含まれています。 コアに含まれるほとんどのスタイルはモジュールやテーマに依存しますが、「利用するモジュールやテーマに依存せずに必ずページに含まれるもの」もごく一部ですが存在します。

これらのデフォルトのスタイルは多くの場合テーマ開発の助けになる便利なものですが、ときによって思わぬデザイン上の問題を引き起こすことがあります。 というのも、（少なくとも 2016 年現在の） CSS には「名前空間」や「名前の衝突」といった概念がないため、コアの CSS もカスタムテーマの CSS も一律に扱われてしまい、コアのスタイルとカスタムテーマのクラス名やスタイルが警告も何もなく衝突してしまいます。 ですので、 Drupal のテーマ開発では「コアが定義したスタイルを崩さないように（あるいは意図的に崩すように）カスタムスタイルを書く」ことが必要となります。

コアのスタイル崩れを防ぐ具体的な方法としては次の 2 つがあげられます。

1. Drupal コアが提供するスタイルを把握してそれらを意識して避ける
2. 作成する CSS のクラス名には衝突しづらい日本語を使うなどして衝突がなるべく起こらないように祈る

2 のアプローチもそれはそれでおもしろいのですが、今回は 1 つめの視点から「 Drupal コアが提供する CSS クラス」をご紹介したいと思います。

コアが必ず読み込む system.*.css

system.*.css は、上述の「デフォルトの CSS スタイル」を格納したファイルの代表的なものです。

Drupal を動かす際に必須ともいえるモジュールのひとつが同名の System モジュールであり、これは Drupal が動いている本番サイトではほぼ必ず動いているものです。 その System に同梱されているスタイルがこの system.*.css ファイルです。

system.*.css は具体的には次の 4 つのファイルのことを指します。

• system.base.css
• system.menu.css
• system.messages.css
• system.theme.css

各ファイルに含まれているスタイルはおおよそ次のような内容です。

• system.base.css すべての基礎となるスタイル。主に JavaScript の定番処理（ Ajax など）に関係するもの。
• system.menu.css 「メインメニュー」や「サブメニュー」といったメニュー関連のスタイル。
• system.messages.css ステータスや警告、エラーなどのメッセージボックスのためのスタイル。
• system.theme.css フォームやテーブル、ページャなどのためのスタイル。

これらのスタイルはテーマレイヤーで意図的に除外しないかぎり Drupal が動くサイトでは必ず効いてくるので、これらの中で定義されているクラスを把握することが衝突を防ぐ第一歩となります。 では実際にこれらのファイルの中で定義されている CSS クラスを見ていきましょう。

system.*.css に含まれる CSS クラス

system.*.css 内でスタイルが定義されているクラス一覧を以下にあげてみます。

これらは原則「特定の用途にのみ使うことが想定された CSS クラス」であり、予約語的な位置づけにあるものです。 基本的にはカスタムテーマ内で同名のクラスは作成せず、あえて使う場合にはこれらを「上書きする」ということを認識した上で利用するようにするとよいでしょう。

いずれもアルファベット順です。

system.base.css:

// クラス
.ajax-progress
.ajax-progress-bar
.bar
.clearfix
.collapsed
.collapsible
.container-inline
.drag
.draggable
.element-focusable
.element-hidden
.element-invisible
.fieldset-legend
.fieldset-wrapper
.filled
.form-autocomplete
.form-textarea-wrapper
.grippie
.handle
.indentation
.js
.js-hide
.message
.nowrap
.percentage
.progress
.resizable-textarea
.sticky-header
.tabledrag-handle
.tabledrag-handle-hover
.tabledrag-toggle-weight-wrapper
.throbber
.throbbing
.tree-child
.tree-child-horizontal
.tree-child-last

// ID
#autocomplete

system.menu.css_names:

// クラス
.active
.breadcrumb
.collapsed
.expanded
.inline
.leaf
.links.inline
.menu
.menu-disabled
.primary
.secondary

system.messages.css:

// クラス
.error
.messages
.ok
.status
.warning

system.theme.css:

// クラス
.active
.bar
.checkbox
.collapsed
.collapsible
.container-inline
.description
.drag
.drag-previous
.error
.even
.fieldset-legend
.fieldset-legend
.fieldset-legend
.filled
.form-actions
.form-checkbox,
.form-checkboxes
.form-item,
.form-radio
.form-radios
.form-required
.form-type-checkbox
.form-type-radio
.item-list
.js
.marker
.more-help-link
.more-link
.odd
.option
.pager
.pager-current
.progress
.selected
.summary
.tabledrag-changed-warning
.tabledrag-toggle-weight
.title

// ID
#autocomplete

以上です。

.status や .error などはよく見かけるパターンであり単語数も短いので「これを使うのはなんだか危なそう！」という直観が働きますが、 .inline .collapsed .percentage などはその存在を知らずに使ってしまうこともありそうなので注意が必要ですね。

衝突を防ぐという意味でいうとこれらの名前を押さえておくだけで十分ですが、デフォルトスタイルを意図的に上書きしたい場合はこれらの具体的な内容をチェックする必要があります。 それにはこれらのファイルの中身を実際に確認しなくてはいけないので、そのような場合は以下のページなどをご参照いただければと思います。

• system.base.css | Drupal 7.x | Drupal API
• system.menus.css | Drupal 7.x | Drupal API
• system.messages.css | Drupal 7.x | Drupal API
• system.theme.css | Drupal 7.x | Drupal API

以上です。

system.*.css の存在は知っていても、そこに上がっている名前をリストアップしてまとめている方はあまり多くないのではないでしょうか？ このリストが Drupal フロントエンド開発のご参考になれば幸いです（ただし Drupal 8 の場合はそのまま参考にはできないのでご注意ください）。

...

最後にちょっとだけ余談です。 私事ですが、最近フロントエンドのプロセス改善に取り組んでおり、「フロントエンド設計」に関する書籍や記事をあれこれ読んでいます。

ついこの間まで私は「ウェブのフロントエンドはバックエンドに比べると刺激とチャレンジが少ないもんなぁ・・・」と勝手に感じていたのですが、近年はウェブサイトが大規模化してきたこともあり、そのおかげで（？）「 CSS や HTML テンプレートをいかに生産性高く開発し、いかにメンテナブルに保つか」というのがひとつのおもしろい（重要な）テーマになってきた感じがします。

フロントエンド開発は Drupal にかぎらずほぼすべての CMS プロジェクトで欠かせないものですし、このあたりの生産性の向上はそのままプロジェクト全体の生産性向上につながってきます。 CMS を使ってサイト構築サービスを提供する会社にとって共通の関心のあるテーマだと思います。

・・・という意味でテーマは普遍的なので、 Drupal 業界にかぎらずこのあたりに関心のある会社さんとまた勉強会でもして切磋琢磨していければなぁとぼんやりと考えています。 近隣の制作会社の方やフリーの方で同じようなことをお考えの方がいらっしゃったらまたお話しましょう。

ともあれ。 またいいものが見つかればこの場で共有/議論していきたいと思います。 引き続きよろしくお願いします。