自作のCSSフレームワークで特に気に入っているコンポーネントの話
先月公開したCSSフレームワーク「echo.css」ですが、「どんなページが作れるかのサンプルがないと、イメージしにくいんじゃないかな」と言われました。
それで、ドキュメントよりも先にテンプレートを作っています。日曜日はチクチク制作をしておりました。
echo.cssのモジュール群で特に気に入っているのが、冒頭の画像の「c-flip」というコンポーネントです。デスクトップでは写真を大胆に表示し、モバイルでは写真が上、文章が下となります。
初出は、昨年稲葉さんと制作したa-blog cms用のテーマ「zeroichi_lp」です。
この時点でも充分使い勝手は良かったですが、実際の案件で使ううちに、デスクトップでの表示が8パターンまで必要なことがわかってきました。使用する背景画像によって、適切な文字配置は全く異なるためです。デザイン上の理由もあります。
- 画像全面＋コンテンツ白背景・左寄せ
- 画像全面＋コンテンツ黒背景・左寄せ
- 画像全面＋コンテンツ白背景・右寄せ
- 画像全面＋コンテンツ黒背景・右寄せ
- 画像半分＋コンテンツ白背景・左寄せ
- 画像半分＋コンテンツ黒背景・左寄せ
- 画像半分＋コンテンツ白背景・右寄せ
- 画像半分＋コンテンツ黒背景・右寄せ
8パターンのデザインを簡単に切り替えるために、サブクラスなどをずいぶん整理して現在に至ります。詳しくはこのコンポーネントの解説ページをご覧ください。
https://cms-skill.com/echo-css/styleguide/component-flip.html
私が制作するサイトは、ほぼすべてCMSを介して制作し、さらにその半分くらいが、フォーマットができてから原稿が入ります。その際に想定外の画像やテキストをどれだけ少ない工数で補完できるかを、自分の独自スキルとして磨きたいと日々考えています。これは少なくとも、AIには当分できないことです。