CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。

そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

The stretch keyword: a better alternative to width: 100% in CSS?
by Ollie Williams

続きを読む

商用利用OKの無料版と有料版が同時リリース! お蕎麦みたいな線でデザインされた面白いフォント「そばとうどん」

「はんなり明朝」「こころ明朝体」をはじめ、最近では「海と山のろごごち」「うさぎと満月のサンセリフ」「ビルの谷間と高架下」などのフォントをリリースされているTyping Artから、完全新作となるフリーフォントがリリースされました!

今回は、無料版の「SOBA & UDON」と有料版の「そばとうどん」です。「SOBA & UDON」は英数記号文字のみ、「そばとうどん」はひらがな・カタカナ・英数記号文字が揃っています。

そばとうどん

SOBA & UDON: 無料版
そばとうどん: 有料版
写真: ぱくたそ

続きを読む

アドビのブラックフライデーが開催! AmazonでCreative Cloud コンプリートプランが驚きの46%オフ、ただし新規購入者に限る

11/29からのAmazon ブラックフライデー セールに先駆けて、Amazonでアドビセールが開催されています!

Amazonでのアドビセールは11/29まで、Adobe CC コンプリートプラン、Illustrator単体プランが期間限定でかなりお買い得になっています。ただし新規購入者に限ります(涙

サイトのキャプチャ

参考: Adobe Creative Cloud

続きを読む

Webサイトのデザインをより良くするにはどうすればよいのか! 洗練されていく工程が詳しく解説された良書 -WebデザインプロセスBook

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

こういうデザインの解説書は、初めてです!
デザイナーは何を考え、どのように作っていくのか。ヒアリングから始まり、ワイヤーフレームを設計し、デザインカンプに落とし込み、最終形までチェックバックを重ねてブラッシュアップをするまでのデザイナーの意図や考え、デザインのテクニックなどを細かく解説したデザイン書を紹介します。

他人がどのような工程で行っているかを見ることはなかなかないので、かなり貴重な本だと思います。

WebデザインプロセスBook

続きを読む

Web制作者は要チェック! Chrome 131で新しく追加された8つのCSSの機能

Chrome 131で追加された、CSSの新しい機能8つを紹介します。
今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです!

Chrome 131で新しく追加された8つのCSSの機能

New in Chrome 131
Chrome 131 beta

続きを読む

商用利用も無料、ポテ字フォントがリリース! ほくほくのフライドポテトのようなかわいいフリーフォント -ポテジフェイス

ninaSchoolgirl」「になロマン」「くちばしフォント」「最強少女」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました!

今回は、文字のデザインにフライドポテトが取り入れられた「ポテジフェイス」
ほくほくのフライドポテトのような、おいしそうなかわいいフォントです。

ポテジフェイス

フリーフォント:ポテジフェイス(Potejiface_font)【商用可】
写真: Unsplashhenry perksが撮影

続きを読む

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。

Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

5 Cool Things To Do with DevTools AI Assistance
AI assistance panel
AI assistance for styling
by Matthias Rohmer

続きを読む

UI用のアニメーションがかわいくて楽しい! 商用利用も無料、アニメーションで動くアイコン素材 -pqoqubbw/icons

WebサイトやスマホアプリのUIデザイン用にかわいくて楽しいアニメーションで動くアイコン素材を紹介します。

ハンバーガー用の×に変化するアニメーション、@を一筆書きで描くアニメーション、時計の針がくるくる回るアニメーションなど、ReactのモーションライブラリFramerを使用した動くアイコンがたくさん揃っています。

アニメーションで動くアイコン素材 -pqoqubbw/icons

beautifully crafted animated icons
pqoqubbw/icons -GitHub

続きを読む

top of page

©2024 coliss