CSS aspect-ratioプロパティの基礎知識、便利な使い方、実装に必要なプログレッシブエンハンスメント

ついにSafariでもaspect-ratioプロパティがサポートされると先日のWWDC21で発表がありました(参考: webkit.org)。これで主要ブラウザすべてにサポートされることになり、aspect-ratioプロパティの基礎知識、便利な使い方、そして実装に必要なプログレッシブエンハンスメントについて紹介します。

CSSのaspect-ratioプロパティを使用すると、レスポンシブ対応の画像や下記のようにサイズが異なるロゴ画像を揃えて配置するのも簡単に実装できます。

aspect-ratioプロパティの知っておくと便利な使い方

Let's Learn About Aspect Ratio In CSS
by Ahmad Shadeed

続きを読む

日本語フォントの特大激安セールが開催!274,795円分のフォント109書体が、たった2,980円で購入できます

去年の夏にやっていたベクターPCショップのセールが復活です!

「メイリオ」などのフォントで有名なフォントデザイナー鈴木竹治氏のフォントブランド「Fonts66」のコンプリートパック 日本語フォント109書体274,795円分が、なんと2,980円(税込み)で購入できます。

購入したフォントは商用プロジェクトで利用可能で、Webデザインや紙デザインをはじめ、もちろん同人誌などにも利用できます。

【究極特価】Fonts66コンプリートパック/109書体

今回のコンプリートパックにはFonts66の中から「雪月花」「桜」「松」のすべてのフォントが含まれています。

続きを読む

クリスタでも使える高品質なブラシ素材!Photoshopの新作ブラシがAdobe公式から無料でダウンロードできるぞ

AdobeからPhotoshopの新作ブラシ、2021年夏のブラシがリリースされました!

2021年夏のブラシは、草木、葉、芝生、草原、空、雲を描くブラシがセットになっており、Photoshop, Frescoをはじめ、Clip Studioでも使用できます。

AdobeからPhotoshopの新作ブラシ、2021年夏のブラシがリリース

2021年夏のブラシ

続きを読む

マンガや小説、同人誌の創作アイデアがいっぱい!「感情類語辞典」「場面設定類語辞典」など類語辞典シリーズ全部がKindleセールで半額以下で超お買い得です

当ブログでも好評だった類語辞典シリーズすべてが、Kindleセールで半額、または半額以下でお買い得です!

普通の類語辞典とは全く異なり、創作に役立つアイデアやヒントが満載。小説、脚本、テレビ、映画、アニメ、マンガ、ラノベ、同人誌で、キャラクターの感情を表現するときの新しいアイデアを引き出す助けとなる類語辞典です。

セール終了日は、6/22まで。
残りわずかですので、お見逃しないように。

類語辞典シリーズ

類語辞典シリーズ 第1弾から第5弾まですべてセール中!

続きを読む

デザインを真剣に学びたい人にオススメ!PhotoshopやIllustratorで、プロのデザイナーがどのように考えてデザインを作っているのかまで解説された良書

デザインが上手くなりたい、デザインの考え方を知りたい、具体的な作り方を知りたい、そんなデザイナー初級者・中級者にお勧めの解説書を紹介します。

PhotoshopとIllustratorでのデザインの作り方とアイデアが92種類も揃っており、単なるチュートリアルだけではなく、プロのデザイナーがどのように考えてデザインを作っているのかまで詳しく解説されています。

Illustrator & Photoshopデザインの作り方 アイデア図鑑

続きを読む

これなら分かりやすい!Webサイトのデザイン仕様書・指示書の作り方

デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。

仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。

ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。

Webサイトのデザイン仕様書・指示書の作成方法

The Art of Design Spec'ing
by Mahdi Farra 🍉

続きを読む

CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です

CSS Flexboxを学ぶ人のために作成されたチートシートを紹介します。

Flexboxの各プロパティと値でレイアウトがどのようになるか一目できます。チートシートは高解像度版も無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。

CSS Flexboxのチートシート

CSS Flexbox Cheat Sheet 🔥
by Mariana Simon

続きを読む

GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ

GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。

当ブログでもよく紹介しますが、見逃していたものがありました。
1年間分、52個もあるので、時間のあるときにチェックしてみてください。

GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ

The 52 most popular projects from the last year of Trending Projects
by Iain Freestone

続きを読む

top of page

©2021 coliss