上達する近道は、まず他人を真似ることから。SnappySnippetなら、お気に入りのUIパーツのHTML/CSSを抽出して、見やすく整えてくれます。 先週の夜、子どものとき以来久しぶりに映画『E.T. ジ・エクストラ・テレストリアル』を鑑賞していたときのことでした。「子ども時代の思い出補正」があったのかもしれませんが、「この映画はすごい」と思いました。スティーヴン・スピルバーグは、やせた子供たち…

Loading...

レスポンシブWebデザインで使うメディアクエリーを進歩させ、要素ごとに条件を設定できる「エレメントクエリー」。どこがどう便利なのか? 専用ライブラリー「EQCSS」による使い方を紹介します。 CSSのメディアクエリー(Media Query)を使い、画面幅に基づいて要素の表示方法を変える方法はもうおなじみでしょう。エレメントクエリー(Element Query)はメディアクエリーと似ているものの、…

Loading...

ハイパフォーマンスで超多機能を謳うアニメーションライブラリーが登場しました。HTMLやSVG、テキストなど、プラグインで拡張できる注目のJavaScriptライブラリーを試してみましょう。 この記事ではthednpとdalisoftによって開発されたオープンソースの多機能フリーJavaScriptアニメーションエンジンKUTE.jsを紹介します。 KUTE.jsでできること KUTE.jsではアニ…

Loading...

開発者に人気のエディターAtomをもっと自分好みにカスタマイズしたい! CSSの知識だけでできる、テーマカスタマイズのすすめ。 Atomは「誰でもハッキングできる、21世紀のテキストエディター」と銘打っています。いまや世界中の何千という開発者のお気に入りのエディターになったAtomは、非常に簡単に拡張やカスタマイズができます。開発者たちはAtomのコミュニティで新しいパッケージやテーマを公開し、新…

Loading...

2016年も進化し続けたフロントエンド開発ツール。Web Tools Weeklyのキュレーター・Louisが1年を振り返り、お気に入りのツールを紹介します。 1年が過ぎ、Webプラットホームでは予想どおり革新、いらだち、疲れとともに、開発者を支援する新しいツールやテクノロジーの大量リリースが爆発的に勢いを増しています。 ReactやAngularといったおなじみのツールがアップデートされた一方、…

Loading...

iOSのすりガラスのような効果をWebでデザインで導入したい。そんなときに便利なbackdrop-filterプロパティを知っていますか? ブラウザーの実装はまだイマイチですが、おもしろい使い方ができそうですよ。 W3CのFilter Effects Module Level 2で導入された、CSSのbackdrop-filterプロパティについて解説します。特に構文、ブラウザーの対応、応用方法を…

Loading...

Flexboxを使ったCSSレイアウトが広まった2016年。2017年は一足早く、Grid Layout Moduleを使ったCSSレイアウトにも触れてみませんか? この記事では、グリッドレイアウト(Grid Layout)モジュールを使ってWebページに要素を配置する、7つの方法を紹介します。 SitePointでは以前にも、『Flexboxよりも新しい!CSSレイアウトの最新仕様Grid La…

Loading...

11月1日にW3Cから勧告されたHTML 5.1。およそ2年ぶりのアップデートでどこが変わったのか? 主要な変更点を押さえておきましょう。 HTML 5.1とは 2年ほど前のHTML5スタンダードのリリースは、Web開発界隈における大きな出来事でした。一連のすばらしい新機能が搭載されただけでなく、1999年のHTML 4.01リリース以降初のメジャーアップデートでもあったからです。「モダンな」HT…

Loading...

どんどん進化するCSS。変数や四則演算といった将来使える便利な機能は、ポストプリセッサー「PostCSS-cssnext」を使って効率よくワークフローに取り組んでみては? PostCSS-cssnextについて、7月にCraig Bucklerが『PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ!』という記事を書いています。PostCSS-cssnextは次世代CSSを書…

Loading...

かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる?いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見…

Loading...