社員研修 -CSS設計-

2021年07月29日

外部から講師をお招きしてCSS設計をテーマに社員研修を行いました。

「CSS設計」というコーディングの専門的な研修内容でしたが、デザイナーも含め京都メンバー全員が参加しました。

デザイナーにとっては、実務に直結する内容ではありませんがホームページを制作する上で、コーディングを理解しているデザイナーと、コーディングを理解していないデザイナーとでは、仕上がりの質に違いが出ると思っています。

コーディングを理解していないデザイナーの場合、デザインの意図をコーダーにうまく説明できず予定よりも制作時間が長くかかったり、仕上がった後の運用時にも更新や修正に無駄に時間がかかってしまうデザインになっていたりすることがあります。

ホームページを公開した後の「運用を含めてホームページ制作」という考え方で作ろうとすると、デザイナーも最低限のコーディングの知識を身につけておく方が絶対に有利と思い研修会を企画しました。

「良いCSS設計」について

良いCSS設計の４つのポイント

研修の前半は「良いCSS設計の4つのポイント」を中心に、CSSがなぜ壊れやすいのかというお話。

中盤以降は、CSSの運用ルールのお話。
CSSは、運用ルールをしっかりしておかないと、制作者ごとにいろんな書き方で作られてしまい気づいたときには手がつけられないことがあります。

そんな状況にならないために重要になるのが、命名規則。
今回教えてもらったものは、BEMというフレームワーク。

BEMとは、「Block」「Element」「Modifier」の3つからclass名を定義するという考え方です。
そのBEMの考え方を取り入れたFLOCSSを基準にCSSを設計するのががオススメということで、FLOCSSの構造についてを約2時間ほど教わりました。

CSS設計のルールをしっかり定義しておくことで、保守管理しやすいホームページになりデザインだけでなく中身（HTMLやCSS構造）もキレイなホームページが作れると実感!

制作会社にとっては、ホームページを作ることってチームプレーだと思います。
今後もこうした社内研修を定期的に企画して、アートクリックとしてレベルアップできたらいいなと思います。