かんたん操作で
ニュースをチェック!
ダウンロード

ニュースパス

WPJ

「変態的CSS」の作者Kiteさんにいま気になる技術を聞いてきた

7/14(金) 10:00
デザインとエンジニアリング、デザインとビジネスなど、クリエイターにも従来の仕事の範囲を超えた知識と発想が求められる時代。連続インタビュー企画「Borderline」では、ブログ「テクニカルクリエイター.com」を運営する小島芳樹さんが、注目のクリエイターが日々どんなことを考えているのか? オン/オフの両面からお話を伺います。
第6回は、Kiteさんこと株式会社キテレツのCEO古賀海人さん。音楽からWebの世界へ飛び込んだ異色のキャリアについて聞いた前編に続き、後編では昨年話題になった「変態的CSS」のこと、いま注目している技術についてお話いただきました。

変態的なCSSはどうやって生まれる?

小島 ここからは、Kiteさんが今後、どんなことをやっていきたいかを。去年、WPJで『「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選』という記事が話題になりましたが、Kiteさんのスライドが元ネタですよね。

Kite そうですね。僕があるイベントで登壇したときのセッションのタイトルが「変態的CSSトリック」でした。

小島 最近は変態的なCSSは書いていますか?

Kite 変態かどうは別として、少し前に書いたのは「UnresetCSS(アンリセットCSS)」ですね。オープンソースで公開しています。

小島 アンリセット?

Kite ブラウザーのデフォルト値を初期化する「リセットCSS」ってあるじゃないですか。それを逆にブラウザーのデフォルト値に戻すCSSだから、アンリセット。穴掘って埋めるようなものなので、「何なんだ?」と感じるかもしれないんですけど、例えばWordPressサイトの外側のデザインはよくリセットCSSをかけてから作られていたりするじゃないですか。そうなると、投稿で使いたいスタイルまでリセットされているから、たとえばテーブルに線が入っていないとか、リストも最低限の装飾が全部なくなっている、といった状態になる。それをいちいち書き直すよりも、いったん全部デフォルトに戻して必要なところだけを変えるほうが早い、という意図で作りました。

苦労したのが、各ブラウザーのデフォルトのスタイルを調べること。主要ブラウザーを全部調べて、比較して必要なところを全部、書き直すという……。

古賀海人(こが ・かいと)=グラフィックデザイナー、クリエイティブ・ディレクター、世界三大広告賞にも名を連ねる制作会社のWebデザイナー兼プログラマーを経て、2014年4月に株式会社キテレツとして独立。クリエイティブからテクノロジーまで、トータルソリューションを提供。WordPress コアコントリビューター、Ruby on Rails コントリビューター、React コントリビューターなど、多くのオープンソースプロジェクトに貢献する一方、Wocker、Frasco など、自身でも数多くのオープンソースソフトウェアを開発。著書に『世界一わかりやすいWordPress 導入とサイト制作の教科書』。Facebook、Twitter、GitHub、Dribbble、Behance

小島 簡単にデフォルト値に戻す方法はないんですね。

Kite デフォルト値はあるんですけど、それはCSSのデフォルト値であって、ブラウザーのデフォルト値ではなくて。調べてわかったことは、ブラウザーのスタイルって以外なことにほとんど同じなんですね。例えば小数点以下2桁まで完全に一致していたりとかする。調べてみると興味深いなと思いましたね。

小島 ブラウザーのレンダリングの差は昔よりも少なくなっていると聞きますね。

Kite normalize.css(ノーマライズCSS)もありますし、「リセットしすぎ問題」はよく言われますけど、案件によるかな。リセットCSSが必要なときもあるので、使い分けたらいいと思う。

小島 ちょっと変わったCSSの使い方はどんなタイミングで思いつくんですか?

Kite 案件に取り組むときですよね。与えられたデザインをどうやって実現するか考えていると、思いつく。必死に考える、という感じですね。

小島 CSS4の動きも始まっていますよね。なにか面白そうなの仕様はありますか?

Kite 僕も詳しくは追いかけていないんですけど、matches擬似クラスがおもしろいかな。SassやLESSの入れ子みたいなことが実はCSSでもできてしまう。matchesに気づいたのも実はブラウザーのデフォルトのスタイルを調べていたときだったんですけど、ブラウザーのデフォルトスタイルはmatchesを使って書かれているんですよ。

小島 やばい。僕はもう完全に乗り遅れているかもしれない(笑)。

Kite いや難しいですよね。CSSも移り変わりが早いので。

小島 自分でCSSを書かなくなって久しいので…。CSS3のときはアニメーションができたり、すごくわかりやすく変わったじゃないですか。 CSSはこれ以上、進化するのかなと思ったんですけど。

Kite まだまだ進化の余地はあると思いますね。JavaScriptでやっているフロントの見た目の動きとかは、もう全部CSSでできるようになるんじゃないかなと思います。

WordPressの環境構築ツールに「やられた」と思った

小島 最近、ほかに気になっている技術はありますか?

Kite JavaScriptのフレームワーク系はやっぱり気になりますね。言語としてのJavaScript自体もすごい勢いなので、注目しています。もちろんWordPressはこれからもずっとやっていくし、Ruby on Railsも続けるとは思いますけど。

小島 ツールはどうでしょうか。最近触ってみておもしろかったツールとかがあれば教えてください。

Kite もう有名ですけど、「Franz」というアプリですね。Facebook MessengerやSlackといったコミュニケーションツールをまとめて見られるツールです。コミュニケーションツールってすごく増えているじゃないですか。それを1つにまとめられるので、すごく便利ですよ。

小島 日本だとチャットワークにも対応しているのがありがたいですね。いろんなお客さんとやり取りしていたりとかすると、ツールがどんどん増えてしまいますから。

Kite そうなんです。あちこち見ないといけないし、閉じたら通知が来ないのも困りますし…。これは無料ですし、おすすめですよ。

小島 いいですね。使ってみたいと思います。

Kite もう1つはWordPressにフォーカスしたものですけど、「Local by Flywheel」というツールがおすすめです。

小島 VCCWみたいなものですか?

Kite 開発環境を構築するものですけど、GUIも提供されているので、MAMPとかを使っている人が使うとめちゃくちゃ便利になると思います。

小島 Dockerベースなんですね。

Kite たぶん使っていて意識することはないとは思います。僕もオープンソースで、「Wocker」というWordPressの開発環境を作っていて、それなりに使われているんですけど、Localが出てきたときにものすごいショックを受けました。あまりに便利だったので、もうWockerのプロジェクトはやめようかなと思ったぐらいだったんですけど(笑)。悔しいですけど、めちゃくちゃ便利ですね。

小島 今度WordPressを使うときには試してみようかな。

Kite PHPのバージョン設定もできますし、WebサーバーもnginxとApacheを選べたり、メール送信のテストに便利なMailcatcherも入っていたり、かゆいところに手が届く。立ち上げにちょっと時間がかかるのと、マシンのスペックによっては処理が重かったりするので、Wockerにもまだ優位性はあるとは思っていますけど。

今後はサービスを作っていきたい

小島 ではそろそろまとめなんですけど、今後はどんなことをやっていきたいですか。

Kite 自社サービスを作りたいですね。もともと、小島さんとの出会いも「失恋.jp」でしたけど…(笑)。

小島 カイトさんが大失恋したときに立ち上げたサービスですよね。

Kite 失恋したときの気持ちをどうしようみたいな感じのときに、3日ぐらい経ってじゃあサービスにしようと思って立ち上げて、自分の失恋エピソードを最初に投稿した、という。ほぼそれで気が済んじゃったんですけど(笑)、作ること自体はいい刺激になりました。

小島 これからどんなサービス作りたいか、構想はありますか?

Kite 前から考えているのはブックマークサービスですね。ただ単に僕が使いたいからなんですが、なかなか最近のブックマークサービスやアプリにちょうどいい機能がないので、必要な機能をうまく融合したものを作りたいです。ほかは、ファッション系のアプリや、オリジナルのプレゼントを送れるサービスも考えています。

小島 いろいろアイデアの種を育て中、という感じですね。Kiteさんは自分でデザインもできて組めるから、自分のペースで一気に進められますね。

Kite 1人でできるメリットはあるとは思います。絶賛求人中ですけど。

小島 採用するとしたらどんな人が欲しいですか?

Kite  やっぱり、デザインもプログラミングもコーディングもできる人、やりたい人が欲しいですね。最近は分業が進んでいるので、どちらかだけの人が多いですけど。ちょうど小島さんのサイト(テクニカルクリエイター.com)やこのサイト(WPJ)もそうですけど、テクニカルクリエイター的な人と仕事がしたいかな。

小島 もしそういった方がいたら、ぜひコンタクトください! ということで締めくくりたいと思います。

Kite ありがとうございました。

[撮影:阿部岳人]

Borderline:バックナンバー

  • 音楽からアパレル、デザイン、Webの世界へ OSS貢献者Kiteさんの異色キャリア
  • ソウゾウの三橋正典さんが景観デザインから広告、UIデザインへ進んだ理由
  • 読モみたいな、あこがれの経営者がいてもいい——ハヤカワ五味さんのキャリア論
  • 美大生アパレル経営者はRPGマニア!? ハヤカワ五味さんに聞く趣味と仕事の関係
  • 「カメレオン型」エンジニア比留間和也さんに聞く、最先端に身を置き続ける方法
  • カヤックのフロントエンドエンジニアだった比留間和也さんがVR開発に熱狂する理由
  • 「フロントエンド開発ってまだまだ」を変えたい——LIG林優一さんに聞く
  • フロントエンド開発をこよなく愛するLIG林優一さんとMacとテニスと愛犬の話
  • 超多趣味デザイナー・吉竹 遼さんとカメラと本、ガンダム、デザインツールの話
  • 「デザインを主要言語に、マルチリンガルなデザイナーへ」スタンダード吉竹 遼さん

外部サイト

ニュースパスアイコン ニュースパスアイコン

フリーワード設定で最新ニュースを素早くチェック! 気になる話題に誰よりも詳しくなれる! 注目キーワードで「知りたい今」をキャッチ!
フォロー機能
フリーワード設定で
最新ニュースを素早くチェック!
検索機能
気になる話題に
誰よりも詳しくなれる!
急上昇ワード
注目キーワードで
「知りたい今」をキャッチ!