「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
webpack2 に最近移行しました。 その時の知見とせっかくなので tree shaking が実際に中でやってることを追ってみたので紹介。 webpack2 移行時の注意 基本的にはほぼここに書いてあるとおり。 Migrating from v1 to v2 かいつまんで説明すると、configファイルの書き方がガラッと変わって、 module.loaders が module.rules になったり、 resolve.root がなくなって resolve.modules に変わったり。この辺の書き換えは割りとすんなりいくはず。 辛いのはpostcss周りのオプションの渡し方辺り。これまではconfigのrootにpostcssプロパティを用意してそこに記述できたが、その記述はできなくなり、 webpack.LoaderOptionsPlugin 経由で渡すか postcss.con
2016/9/8 ※cssnextに含まれる機能についての記事を書きました。 cssnextから学ぶ次世代CSS PostCSSを知っていますか？ 筆者はどこかで聞いたことあるぐらいで 次のCSS？ またSassみたいなやつ作ったのか もうSassで終わりにしようぜ（覚えるの辛い） といった負のイメージから勉強してみたのですが、だいぶ想像と違いました。 Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。 本記事はタイトルにもあるようにPostCSSを使ってCSSをモダン化する流れで書きました。 「Sassすら使っていない」「このCSS界隈のライブラリよくわからない」という方こそ是非読んでみてください。 PostCSSとは 2015年4月頃以前はこんな感じ SassやLESSを筆頭にプリプロセッサとPostCSSを内部的につかっていたcssn
プリプロセッサーやタスクランナーなど、ここ数年さまざまなツールが登場しているWebのフロントエンド開発界隈。便利なツールでワークフローを効率化をしたいけど、複雑で難しそう…。そんなWeb制作者のためにツールの使い方を紹介する入門記事を紹介します。 1. ビジュアルテストでCSSの上書き、先祖返りを防ぐ 『やばっ！CSSの先祖返りで消耗したデザイナーにはビジュアル自動化テストがおすすめ』（WPJ） CSSの修正でいつまにか先祖返りしていたり、追加したセレクターで上書きしてしまったりと、開発中や運用中にデザインが壊れてしまうことがあります。それを防ぐのが、ビジュアルリグレッションテスト。DOMやプロパティの値をチェックするのではなく、見た目の差分を教えてくれるPhantomCSSの紹介です。 2. いまからgulpを始める人へ 『gulp.js を今一度キチンと！gulp.js 導入基礎』（H
ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
