コードを書きながらデザインできる「Hadron」ってどんなツール? 2018/08/07 Web Design Trends 87 デザインツールやプロトタイピングツールが増える中、デザイン可能なコーディングツール「Hadron」のプレビュー版がリリースされました。さっそくどんなツールなのか、チェックしてみましょう。 コーディングを行いながらデザイン制作まで行うことができるツール「Hadron」がプレビュー版をリリースしました。多くの注目を集めるツールですが、実際の機能はどのようなものなのでしょうか。 実際の画面を見ながら説明… Loading...
たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 2018/04/20 渡辺 竜 502 短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階で、将来、細かい部分に変更がないとは言い切れませんが、Ed… Loading...
チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ 2018/04/16 Ashley Nolan 239 エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Stylelint」です。特徴と導入方法を解説します。 フロントエンド開発はすでに円熟期に入っており、コード品質管理ツールの使用も増えてきました。このことがよく表れているのは、JavaScriptのエコシステムです。JavaScriptにおけるLintツールは、フ… Loading...
これは便利!CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る 2018/04/06 渡辺 竜 134 CSS Gridで使えるrepeat()関数の「auto-fill」「auto-fit」の違いを理解すると、柔軟なレスポンシブ Webデザインが実現できます。わかりにくい両者の違いをデモで確認しましょう。 CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になる… Loading...
スクロールアニメにはjQuery不要でサクッと使える「ScrollReveal.js」が便利 2018/03/30 渡辺 竜 89 スクロールに気の利いた動きを加えたいときに便利なJavaScriptのライブラリー「ScrollReveal」を紹介します。 シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるた… Loading...
CSS GridとFlexboxで驚くほど簡単にレスポンシブレイアウトを実装する方法 2018/03/16 渡辺 竜 404 レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS Grid… Loading...
Grid Layoutが当たり前になったら、CSSレイアウトはどう考えるべき? 2018/02/02 渡辺 竜 245 新しいCSSレイアウト仕様Grid Layoutを使うには、これまでのCSSレイアウトの考え方を変える必要があります。どう考えていけばよいのでしょうか? 最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrapやFoundtionのようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは、 基… Loading...
いまどきのCSSではどう書けるか? Trelloのレイアウトを再現してみた 2017/11/06 Giulio Mainardi 98 タスク管理ツール「Trello」の特徴的なレイアウトを最新のCSSテクニックを使って実装する方法を解説します。 Trelloボード画面(例はこちら)の基本的なレイアウトの実装方法を紹介します。レスポンシブでCSSのみを使うソリューションでレイアウト構造の特徴を解説します。 最終結果のCodePenデモです。 Grid LayoutとFlexboxのほかに、calcとviewportユニットを使いま… Loading...
WebデザイナーがPWAに本気で取り組むときに押さえたい5つのポイント 2017/11/01 Nicole Saidy 263 Googleが提唱する「プログレッシブWebアプリ(PWA)」。そのコンセプトを理解し、実装に反映するには「アプリ感覚」の体験を実現することが必要です。ポイントを紹介します(PWAの入門記事も併せてどうぞ)。 グーグルのZach Cochが「Webとアプリの境界線はこれまでになくあいまいになっています」と述べたように、Webはかつてなく改良され、「高速なリッチアプリ感覚」の驚くべき体験を創出できる… Loading...
高度で複雑なWebアニメーションが自在に作れる!GreenSockプラグイン5つ 2017/10/05 Maria Antonietta Perna 162 FlashライクなWebアニメーションを実現するJavaScriptライブラリー「GreenSock」。イラストからテキストまで、思い通りのアニメーションを作成できる便利なプラグインを紹介します。 GreenSockのプラグインをいくつか紹介します。 紹介するプラグイン ベジェ曲線パスに沿ってプロパティをアニメーションする「BezierPlugin」 画面上で要素をドラッグできるGSAPの「Dra… Loading...