浮世絵の素材を使いたいなという時にぴったり、浮世絵専門のイラスト素材を紹介します。 イラストは商用利用無料、クレジット不要、加工OKの太っ腹ライセンス、登録など面倒なことは一切不要でダウンロードできます。 Ukiyoe Stock 「浮世絵をもっと身近に」をコンセプトに、浮世絵をデータ化し、商用無料のフリーイラスト素材として配布しているサイトです。元絵はすべてパブリックドメインで、それをデジタル化し、利用しやすいように着色やレイアウト補正されています。 商用利用無料 クレジット不要 加工OK 素材のフォーマットは.png ※有料版として.epsや.aiがあります。 ライセンスは、「ダウンロードしたデータをそのまま配布・販売しなければ大体なにしてもいいよ」とのこと。詳しくはご利用規約をご覧ください。

object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース

CSSの解説書はたくさんありますが、今までのCSS本とはかなり異なる面にフォーカスされたCSS設計についての解説書を紹介します。 かなり実践的な解説書です、CSSの何に気をつけて、CSSをどのように書き、CSSをどのように管理するとよいか、現在主流の実装・設計・管理方法について、最適解となるためのアプローチや思考プロセスが詳しく解説されています。 本書は中・上級者向けの内容をていねいに詳しく解説したものです。CSSの初心者向けの基礎知識やサンプルなどはありませんが、CSSに取り組んでいる人であれば大丈夫だと思います。CSSの実装・設計・管理の方法にフォーカスされ、プロジェクトレベルでのCSS設計について解説されています。 著者の高津戸氏とはかなり前にお会いしたことがあるのですが、イラストにそっくりな印象がありますね。

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行

Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ

何気ない日常の中でも、別の視点から見ることで、印象が変わります。 同じ被写体をアマチュアとプロのカメラマンで、どのように違って見えて、写真が撮影されるのか、印象的な写真を撮る秘訣を紹介します。 Phillip Haumesser Photography Amateur Vs. Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、作者様にライセンスを得て翻訳しています。 約2年前、私は周りの美しさに気づかずに、多くの人と同じように日常の生活を過ごしていました。そんなある日、カメラを手に取り、子ども達の写真を撮り始めると、まったく新しい世界が見え始めたのです。それが見えた途端に、見逃すことができなくなりました。 被写体に光がどのように影響を与えるのかが分かり、同じ被写体でも別の視点から見ることで、全体の印象が変わることに気がつきました。 世界は美しさにあふれ、色鮮やかに伝え