CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ

CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。

CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ

CSS Flexbox: 5 Real World Use Cases
by Ahmad Shadeed

続きを読む

月のテクスチャ素材はNASAのが世界最高峰の高品質!10年に渡り収集したデータから作成された -CGI Moon Kit

NASAが10年に渡り収集したデータから作成された、世界最高峰の高品質な月のテクスチャ素材を紹介します。

多くのアーティスト・クリエイターがテクスチャを利用できるようにと、無料でダウンロードできます。

月のテクスチャ素材

CGI Moon Kit
NASA Goddard Creates CGI Moon Kit as a Form of Visual Storytelling

続きを読む

2020年用、日本語のフリーフォント418種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記

個人でも商用でも無料利用できる、日本語のフリーフォント418種類を紹介します。
Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です!

日本語のフリーフォント 総まとめ

続きを読む

モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック

モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。

こういった実装はできないものと思っていたので、驚きました。

サイトのキャプチャ

Custom Styling Form Inputs With Modern CSS Features

続きを読む

早めにダウンロードしておくべし!有料フォントが今だけ無料、エレガントな手書きフォント -Aurelly Signature

通常は有料ですが、今週末まで無料でダウンロードできる、サインのようにスラスラと書かれたフェミニンでエレガントな手書きフォントを紹介します。

本来は有料なだけあってかなり高品質。フォントファイルは.otfと.ttfでWindowsでもmacOSでも利用できます。
期間中にダウンロードしておけば、いつでも使えて、再ダウンロードも無料です。

フォントを使用したデザイン例

フォントを使用したデザイン例

続きを読む

UIのデザインは奥が深い!アイコンデザイン 7つの原則

Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。

アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。

アイコンデザイン 7つの原則

7 Principles of Icon Design
by Helena Zhang

続きを読む

デザインをワンランクアップさせるおしゃれな英語フォントがお買い得の99%オフで購入できる期間限定セール

商用でも安心して利用できる、さまざまなデザインのプロジェクトにぴったりなフォント計226,427円分が、99%オフの3,200円で購入できる期間限定の特大セールを紹介します。

セール期間は、3月3日12時までとなっています。

フォント素材はWebデザイン、アプリ、動画、紙のデザインなどに利用でき、クライアントのプロジェクトでも販売する同人誌に使用してもOK。

都会的!ワンランク上のおしゃフォント集

都会的!ワンランク上のおしゃフォント集

続きを読む

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応

Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。

フォントファイルのサイズを劇的に軽減できる機能があります。
パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。

タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。

サイトのキャプチャ

Google Fonts -Optimizing your font requests

続きを読む

top of page

©2020 coliss