Web制作に役立つ情報一覧

このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック

2025/05/21(Wed) 08:57

テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。

https://coliss.com/articles/build-websites/operation/css/highlight-the-row-and-blur-out-the-distractions.html#google_vignette

JavaScript不要! HTMLとCSSでつくるカルーセルUI

2025/05/20(Tue) 08:53

2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。

https://ics.media/entry/250516/

まず覚えたい！組み合わせに強い欧文おしゃれフォント8選【無料＆商用OK】

2025/05/19(Mon) 09:31

「どのフォントと組み合わせればいいのか分からない…」「フォントを選んだのに、デザインがちぐはぐになる…」デザインに慣れていないと、フォント選びって案外むずかしいですよね。でも、もし「文字を打つだけでデザインが完成する」フォントがあったらどうでしょう？

https://photoshopvip.net/165564

まず覚えたい！筆記体フォントの魅力が詰まった8選 ─ 無料で商用OK

2025/05/19(Mon) 09:28

「なんか英語の筆記体って、かっこいいけど……どれを使えばいいか分からない。」SNSや雑誌で見かけるような、すらっと流れるような英語フォントに憧れるけど、いざ自分で使おうとすると、「読みにくい……」「ちょっとやりすぎかも？」「おしゃれに見えるはずが、なんかダサくなった…」

https://photoshopvip.net/165544

まず覚えたい！おしゃれで外さない定番セリフ体フォント8選 ─ 無料で商用OK

2025/05/15(Thu) 08:51

「上品でおしゃれなデザインに仕上げたい。でも、どんなフォントを選べばいいのか分からない…」そんなときに頼れるのが、“セリフ体（Serif）フォント”。雑誌や書籍、ブランドロゴなど、さまざまな場面で「信頼感」「高級感」「読みやすさ」を演出してくれる心強い存在です。

https://photoshopvip.net/165519

まず覚えたい定番＆プロ愛用の欧文フォント8選 ─ 無料で商用OK

2025/05/14(Wed) 08:52

「おしゃれなデザインにしたいけど、フォントって何を使えばいいのか分からない。」センス良く見せたい。でもフォントを変えただけで一気にダサくなったり、雰囲気が崩れたり…。デザインの印象を大きく左右するのが、“フォント選び”です。

https://photoshopvip.net/165413

カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説

2025/05/09(Fri) 08:54

Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。

https://coliss.com/articles/build-websites/operation/css/carousel-using-only-css.html

SEO内製化したいならチェックすべき判断基準と実際のやり方・注意点

2025/05/07(Wed) 09:03

SEOの外注コストを削減したいと考えている方は、多いのではないだろうか。「SEOの内製化ってどうですか？おすすめですか？」という問いに率直に答えるなら、非常におすすめだ。ただし、理解と覚悟を持って取り組むのなら、という条件付きである。

https://lucy.ne.jp/bazubu/in-house-seo-2-53358.html

【Photoshop新機能】テキストが自動で整う！「ダイナミックテキスト」実際に使ってみた

2025/04/28(Mon) 08:52

文字を入力して、改行して、サイズや行間を微調整して……そんな地道な作業に、Photoshopがついに終止符を打ちました。新しくベータ版に追加された「ダイナミックテキスト」という機能、もう試してみましたか？ざっくり言うと、「テキストボックスの形に合わせて、文字が自動でいい感じに整列してくれる」夢のような機能。

https://photoshopvip.net/165011#google_vignette

UIデザイン用のアクセシブルなカラーパレットを自動生成するツール -Accessible Color Palette Generator

2025/04/24(Thu) 08:59

UIデザイン用のカラーパレットを作成するのは、簡単そうに思うかもしれません。しかし、アクセシビリティの要件を満たし、ブランドのアイデンティティやスケールのバランスが取れたカラーパレットを作成するには手間と時間がかかります。ほとんどのツールを使用しても、これらの要件を満たせるものは数が少ないです。

https://coliss.com/articles/build-websites/operation/design/accessible-color-palette-generator.html