※本ページは、アフィリエイト広告を利用しています。

Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。

テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。

当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。

CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。

もう私が知っているCSSをはるかに超えたCSSです。

Expert CSS: The CPU Hack
br Jane Ori (@Jane0ri)

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。

カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。

Spectrum.Art

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？

ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。

参考: Scroll-Driven Animations Debugger
by Bramus!

※本ページは、アフィリエイト広告を利用しています。

SBクリエイティブのデザインの良書、同人誌・絵師さん向けのイラスト関連の良書がたくさん対象になったKindleセールを紹介します。

セールは先週の金曜日から開催されましたが、終了期間は不明です。

動画の案件が増えてきた、YouTubeやSNSで動画をアップしたい、動画編集のテクニックを一からしっかりと学びたい人向けにぴったりのPremiere Proの解説書を紹介します。

Adobe Premiere ProはYouTubeをはじめ、映画やCMにも使用され、デファクトスタンダードといえるソフトウェアです。本書は入門書ですが、初心者向けの入門書と思って軽い気持ちで読んでみたら、間違いでした。ページを読み進める度に、これやりたい！ あっ、これも！ とワクワク感が止まらなくなります。

初心者にお勧めなのはもちろん、Premiere Proをすでに使用されている人にも表現の幅を広げてクオリティをアップするためのさまざまなテクニックは必見です。

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。

今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。

Chrome 117 beta

Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスの画面サイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。

2023年の最新モデル、iPhone 15シリーズ、Apple Watch Series 9シリーズをはじめ、iPhone, iPad, Apple Watchの最新から初代までの情報が網羅されています。

Screen Sizes