次世代CSSレイアウト仕様「Gird Layout Module」を使いこなすために知っておきたい、自動配置アルゴリズムのしくみを詳しく解説。 この記事では、要素を配置する際にCSS Grid Layout Moduleの自動配置アルゴリズムがたどるすべてのステップを説明します。ステップはgrid-auto-flowプロパティでコントロールされています。 『Flexboxよりも新しい!CSSレイア…

Loading...

CSSで画像をマスクしたり切り抜いたりする方法にはborder-radius、clip、clip-pathなどがありますが、maskプロパティとSVGのmask要素を使った方法なら、もっと自由な形にマスクができます。 ※本記事は2016年6月17日に掲載した記事を再編集したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 マスクは、画像または要素の不要な部分を隠し、見せた…

Loading...

Webサイトのボタンなど、ちょっとしたアイコン、どうしていますか? 画像、SVGなどいろいろな方法がありますが、Fontelloなら必要なアイコンだけフォント化して読み込めます。 Webサイトのシェアボタンに含まれるソーシャルメディアアイコンから、記事へのコメント数を表示する吹き出しアイコンまで、アイコンフォントはシンプルなグラフィカル要素としてWeb上で広く使われています。 アイコンフォントには…

Loading...

上達する近道は、まず他人を真似ることから。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...