Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート

Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。

loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。

サイトのキャプチャ

Native image lazy-loading for the web!
by Addy Osmani

続きを読む

同じ素材なのに、完成したデザインがこんなに違う!デザインテクニックやプレゼン方法を学べるデザインの良書 -デザインのネタ帳

デザインの正解は一つではありません。同じデザインの素材、そしてテキストを使用しても、アピールポイントやアピール方法の違いによってデザインの仕上がりは変わります。

1つのテーマに対して4つのデザインをコンペ形式にして、それぞれのデザインテクニックやプレゼン方法を学べるデザインの良書を紹介します。

本の表紙

続きを読む

これは期待!Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli

Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。

CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。

サイトのキャプチャ

Gimli

続きを読む

スマホも対応!スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider

ページ内のセクションをスクリーンいっぱいに表示し、マウスのクリック・ホイール操作、スマホのタップ・スワイプ操作に対応した快適なスライダーを紹介します。

サイトのキャプチャ

FullScreen Slider -GitHub

続きを読む

プロ絵師の塗りを徹底解説!『キャラ塗り上達術 決定版』は評判通り、すごい解説書でした

プロの絵師さん10名による、Clip Studio Paint Proでの塗りのテクニック・各ツールの使い方が徹底的に詳しく解説された良書を紹介します。

実際の塗りに使用したレイヤーの構成、使用ブラシ、配色のRGB値などの詳細な設定が解説されており、気になる塗り方を身につけることができると思います。

本のキャプチャ

続きを読む

UI用のアイコンが1,400種類以上!商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon

商用でもクライアントのプロジェクトでも完全無料で利用できる、UIデザイナーやデベロッパーのためのアイコン素材を紹介します。

アイコンのアイテムはなんと1,441種類!
SVG、アイコンフォント、そしてPowerPointやKeynote用まで揃っています。1,441種類のアイコンが1クリックでダウンロードできるので、備えておくと便利だと思います。

Remix Icon

Remix Icon
Remix Icon -GitHub

続きを読む

Windows, macOS, Android, iOSなど、各OSの各バージョンにプリインストールされているフォントリストのまとめ

Windows, macOS, Android, iOSなど、各OSの各バージョンにプリインストールされているフォントリストを紹介します。

CSSでフォントを指定する時、また自分が使用しているOSでこんなフォントを利用できるという発見もあるかもしれません。

サイトのキャプチャ

macOS Mojave に組み込まれているフォント

続きを読む

キャンセルボタンに色をつけてはいけない理由

キャンセルボタンをデザインする時に、カラーで悩むことはありませんか?
キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。

キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。

サイトのキャプチャ

Why Cancel Buttons Should Never Have a Color
by UX Movement

続きを読む

top of page

©2019 coliss