自作の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には当分できないことです。


投稿者名 うぇびん 投稿日時 2018年11月04日 | Permalink

CMSの構築を考慮したコーディングとかクラスの命名規則の話


先日、CSSフレームワークについて記事を書いてから、今後のコーディング設計について具体的に考えています。

【Webdesign】Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい | ウェビンブログ

というより、再利用性のある業務用テーマの制作をいくつか依頼されており、いずれにしても着手しなければならないのです。

私の主業務が、CMS(それも特定のブランドによらない)を組み込んだサイトの制作であることを前提に、自分はどう設計していったらよいか、考えていることを書いておきます。


投稿者名 うぇびん 投稿日時 2017年07月08日 | Permalink

「たった2日で楽しく身につく HTML/CSS入門教室」を読みました

札幌の高橋朋代さん(コモモ)と、森智佳子さん(モリコ)の著書、「たった2日で楽しく身につく HTML/CSS入門教室」を読みました。

私は初心者でも指導者でもないのですが、前作「作りながら学ぶ HTML/CSSデザインの教科書 」がベストセラーとなっている二人の新刊ということと、最近ちょっとWeb制作に疲れていて、原点に返ってみようという気持ちがあって読んでみました。


投稿者名 うぇびん 投稿日時 2016年05月16日 | Permalink

CMSのテーマを作る前に静的ページのコーディングをするか?


札幌のフロントエンドエンジニアの友人、長谷川さんが、WordPressベースの案件のワークフローで疑問を感じているようです。

いきなりですが、このエントリーを読んでいる方に質問です。WordPressのテーマを仕事で作成する際に、どのようなワークフロー、制作手順でコーディング・構築・テーマ作成を進めますか?

デザインから WordPress のテーマ作成までの自分のワークフローを見直す - HAM MEDIA MEMO
  • テーマをいきなり作りはじめる人が多いが、最初にきっちり静的ページを制作する自分のフローと比べてどうなのか
  • 何かしらのテーマをベースにカスタマイズで制作するフローが増えているようだが、それは本当に効率が良くなっているのか

という二点の疑問のお返事として、WordPress以外も含めた、最近の流れについて書いてみます。


投稿者名 うぇびん 投稿日時 2015年12月16日 | Permalink

CSS Nite LP39「Coder's High 2015:コーディングスタイルの理想と現実」から見る、Web制作の変化


CSS Nite LP39「コーディングスタイルの理想と現実」

CSS Nite LP39「Coder's High 2015: コーディングスタイルの理想と現実」に参加してきました。
開演前はちょっとだけ、受付のお手伝いもしていました :D

前に「Coder's High」を観てから、早くも五年が経ちました。
フレームワークやビルドツールがスタンダードになった、今のコーディング事情を勉強しようと、上京したのでした。

少し日が開きましたが、セッション全体を通して感じたことをまとめます。
フォローアップ参加はまだまだ受付中ですよ!


投稿者名 うぇびん 投稿日時 2015年02月14日 | Permalink