簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG

グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に…

覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウ…

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility …

Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire

Histoire はフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。 Histoire は以下のような特徴を謳っています。 Vite にネイティブ対応 Histoire は Vite 向けのツールであるので、vite.config.ts の設定を再利用できます。このあたりの特徴は Vitest …

HTMLとCSSの疑問が一気に解ける！ 真剣に学びたい人にお勧めの解説書 -プロを目指す人のためのHTML＆CSSの教科書

最新のHTML Living Standardの仕様に準拠したHTMLとCSSの基礎知識を身につけ、なぜそこにそのHTMLを、そのCSSを使用するのかまで実践的な知識までしっかりと学べる解説書を紹介します。 HTMLとCSSへの理解を深めたい人、最新の仕様をきちんと理解しておきたい人、プロとしてWeb制作に関わる人が知識をブラッシュアップす…

backgruond-imageを使ったCSSのアニメーションテクニック – ICS MEDIA

CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackgr…

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、と…

動きを思いのままに！とびきりWebアニメーションアイデア35選 – PhotoshopVIP

ウェブ制作で「動き」をうまく活用することで、自然と視線を注目コンテンツに集めたり、ブランドの世界観を表現できたりと、あらゆるものを魅力的に演出できます。 しかし、サイトに動きを組み合わせるアイデアは、なかなか浮かびにくいものも事実。 そんなときに活用したい、さまざまな新しい「動き」を取り入れた最新W…