ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるように、Chrome 144で新しく追加された8個のCSSの機能
1/13にアップデートされたChrome 144に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、ページ内検索の検索結果をスタイルする::search-text疑似要素、スクロールの方向を探知する@scroll-stateなど、Web制作者は要チェックです！ また、ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるようになりました！ New in Chrome 144 Chrome 144 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 1つのタブ内を分割して2つのWebページを表示 CSSのアンカーポジショニングとトランスフォーム ページ内検索でハイライトする疑似要素 アンカーポジショニングにaria
年明けは気分一新！ 2026年、CursorやVS Codeで最近人気のテーマや機能拡張
年明けは気分一新したいですね。日常的に使用しているものを新調すると、良い1年が過ごせると言われています。 とは言っても、新調するのにはお金がかかるので、エディタのテーマを新調して、気分を一新てみるのはどうでしょうか。CursorやVS Codeで使用できる最近人気のテーマや機能拡張を紹介します。 下記のリンク先は、すべてVisual Studio Marketplaceです。 VS Codeにインストールするには「Install」ボタン、Cursorにインストールするには拡張機能から検索してインストールできます。 Cosmic Nebula Themes 宇宙・星雲の名の通り、宇宙の神秘的な美しさにインスパイアされてデザインされたテーマ。星雲の深みのあるパープルの背景と地球外生物を思わせるグリーンのアクセントカラーが読みやすさを向上させるコントラスト比を確保し、長時間のコーディングでも目の
2025年、Web制作・デザインに役立つ記事の総まとめ
2025年、当サイトで公開した記事の中から注目された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 AI関連 デザインのテクニック・インスピレーション Adobe, Figma, Affinity, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2025年はこれまで以上に大きく変化した年でした。2024年まではAIは活躍の場が限定されていましたが、2025年はさまざまなシーンに取り入れられ、仕事や生活の場で欠かせないも
2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編
2025年のCSSの新機能のまとめは、いよいよ最終回。 今回はCSSのワークフローがより便利になる新機能が盛りだくさんです！ attr()関数の進化 テキストの配置をより細かく制御できるtext-boxプロパティ ついにCSSで使えるようになったif()関数 関数を自分で定義できる@function スタイルクエリとif()における範囲構文 width: 100%;より便利なstretchキーワード など、2026年はこれらの機能を使用していきたいですね。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに エルゴノミクス: CSSのattr()関数がパワーアップ エル
2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: 進化しているインタラクション編
先日紹介したカスタマイズ可能な新しいコンポーネント編に続いて、2025年、CSSの新機能のまとめ: 進化しているインタラクション編を紹介します。 今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに インタラクション: scroll-stateクエリ インタラクション: ツリーカウント関数 インタラクション: scrollIntoView()コンテナ インタラクション: ネストされたビュー
記号文字を多用するプログラミング向け等幅フォント！ 記号文字が美しいバランスで、より見やすくデザインされている -Myna
Perl, Haskell, bash, Rust APLなど、記号文字を多用するプログラミング向けに、記号文字を英数字と同等の第一級グリフとして扱い、エディタに調和をもたらすことを目指してデザインされた等幅フォントを紹介します。 Myna -GitHub Mynaは、作者のタイポグラフィの渇望を解消したいという長年の思いから生まれたフォントです。作者はこれまで多くの等幅フォントを使用し、このフォントは微調整をしたい、この文字の形状をすこし変えたいと感じていました。 多くのフォントでは記号文字を二級グリフとして扱っており、たとえば->が矢印に見えなかったり、$, @, %が揃っていないように見えます。そんな不満を解消するべく、記号文字を第一級グリフとしてデザインされたのが、Mynaです。 ライセンスはSIL Open Font License 1.1で、個人でも商用でも無料で利用できます。
2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: カスタマイズ可能な新しいコンポーネント編
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2025年、Web制作者がチェックしておきたいCSSの新機能: カスタマイズ可能な新しいコンポーネント編を紹介します。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに コンポーネント: JavaScriptなしで<dialog>のモーダルで表示する方法 コンポーネント: dialog要素のclosedby属性 コンポーネント: popover=hint コンポーネント: select
ネタバレのテキストを非表示にする、美しいパーティクルアニメーションを備えた高速で軽量なコンポーネント -spoilerjs
ネタバレのテキストをTelegram風のパーティクルアニメーションを備えたエフェクトで非表示にし、クリックするとそのテキストが表示されるJavaScriptで実装された軽量のWebコンポーネントを紹介します。 依存関係はなしで、スマホでもタブレットでもデスクトップでも機能します。 spoilerjs spoilerjs -GitHub spoilerjsの特徴 spoilerjsのデモ spoilerjsの使い方 spoilerjsの特徴 spoilerjsは、依存関係のないWebコンポーネントで、ネタバレ警告付きのテキストを一時的に非表示にすることができます。 ビジターがネタバレのテキストをクリックすると、Telegramアプリにインスパイアされた美しいパーティクルアニメーションとともにテキストが表示されます。パフォーマンスが高く、実装も簡単で、あらゆるモダンブラウザで動作します。 sp
モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック
スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 Chromeの次のバージョンで、この問題が数行のCSSで解決できるようになるので、紹介します。 Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーン（連鎖）とは overscroll-behaviorの問題点 スクロールチェーン（連鎖）を回避する方法 はじめに 2026年1月にリリース予定
2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイト「クラウド ダンサー」、HTMLのコードは「#F0EEE9」
Pantoneから2026年のトレンドカラーが発表されました。 2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイトの「クラウド ダンサー（Cloud Dancer）」、新たな始まりを示唆した色合いです。 ホワイトという色は純粋、無垢、完全を象徴しており、あらゆるデザインやプロダクトに調和し、コントラストを生み出す色調で、単独でも他の色相との組み合わせでも、軽やかな印象を与えるカラーです。 Pantone Color of the Year 2026 PANTONE 11-4201-TCX Cloud Dancer「クラウド ダンサー」 2026年のトレンドカラー「クラウド ダンサー」を使用した配色 クラウド ダンサーのカラーデータ PANTONE 11-4201 TCX Cloud Dancer「クラウド ダンサー」 2026年のトレンドカラーとして、Pantoneはホワイト
Web制作者は要チェック！ Chrome 143で新しく追加された4個のCSSの機能
12/3にアップデートされたChrome 143に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートの注目は、CSSの「@container anchored(fallback)」という新しいクエリ、background-position-x/yの相対構文、font-language-overrideプロパティなど、Web制作者は要チェックです！ New in Chrome 143 Chrome 143 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのアンカーコンテナクエリでフォールバック位置を検出 background-position-x/yの相対構文 CSSのfont-language-overrideプロパティ TextForm
ブックマークしておくと便利！ デスクトップのモニターからスマホまで、あらゆるスクリーンのドット抜け・表示ムラをテストできる無料ツール -Free Screen Test Tool
デスクトップ用のモニターをはじめ、ノートパソコンのスクリーン、タブレット、スマホ、テレビ、プロジェクターなど、さまざまなデバイスのあらゆるスクリーンのドット抜け、単色テスト、グラデーションテスト、グリッドパターン、モーションテストができる無料ツールを紹介します。 今使っているデバイスの定期チェック、新しいデバイスを購入したとき、中古のデバイスを購入したときに、このツールを使って検証することができます。 Free Screen Test Tool Free Screen Test Toolはデスクトップのモニターからノートパソコン・タブレット・スマホまで、全デバイスのスクリーンのドット抜け・表示ムラをテストできる無料ツールです。 登録など面倒なことは一切不要、簡単に利用できます。 Free Screen Test Tool Free Screen Test Toolでテストできる機能は4つ。
今、注目のイラストレーターがこれでわかる！ 総勢158名の作品を集めたイラスト年鑑 -GREATEST ILLUSTRATIONS!!
※本ページは、アフィリエイト広告を利用しています。 イラストを見るのが好きな人、素晴らしい印刷でイラストを楽しみたい人、イメージしているイラストを探したい人、イラストレーターの連絡先を知りたい人、イラスト制作を依頼したい人に総勢158名の作品をコレクションしたイラスト年鑑を紹介します。 日本を中心に、アジア、ヨーロッパ、北米で活躍するイラストレーターの作品も収録されており、まさに世界で注目されているイラストが本書で楽しめます！ 本書は明後日の11/30が発売日！ SBクリエイティブから初となる、158名のイラストレーターを収録したイラストの年鑑が発売されました。記念すべき一冊目として、イラストレーターの人選だけでなく、本の装丁も非常に豪華で、かなり気合いが入っているのを感じます。 Amazonでは発売前なのに、すでに予約だけでベストセラーになっています！
CSSで最近よく使うOKLCHカラーについて理解を深めよう、異なる色でトーンを合わせたり、単色のシェードも簡単
CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。 中でも最近では、トーンを合わせたカラーを簡単に作ることができるOKLCHカラーの人気が高まっています。このOKLCHカラーについて紹介します。 oklch.fyi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 OKLCHカラーとは カラーモデルとは 色域とは OKLCHの構造 OKLCHだと明るさの一貫性が簡単 OKLCHだとシェードも簡単 OKLCHだとグラデーションも美しい カラースペースのサポート 最大彩度 ブラウザのサポートとフォールバック OKLCH
Web制作者は腕試し！ JavaScriptやReactなどのコードでキーボードのタイピング練習ができるAIアプリ -TypeQuicker
キーボードで文書や単語のタイピング練習をはじめ、JavaScriptやReactなどのコードでもタイピング練習ができるオンラインツールを紹介します。 タイピング練習できるサイトはたくさんありますが、本ツールはAIによる詳細な解析が大きな特徴で、単語による入力速度、誤入力のパターン、各指ごとのパフォーマンスなどをAIで視覚的に分析してくれます。 TypeQuicker 無料プランで利用できるのは、下記の通り。 厳選されたコンテンツで無制限にタイピング練習 無制限のタイピング練習 高度なタイピング分析 毎日のタイピングテスト リアルタイムのビジュアルキーボードオーバーレイ リアルタイムタッチタイピングビジュアルハンドガイド タイプレース 40以上のテーマ 10個のカスタムテキスト 進捗状況を追跡する AIによる解析は無料プランでもでき、基本的には無料プランで十分練習できると思います。有料プラン
Affinity 3対応！ お絵描きするときに使いたい、インクの描き味を再現した商用利用無料のブラシ素材 -Inkers
Affinityの無料化から2週間が経ち、これからAffinityをやってみるぞという人も多いと思います。 Affinityでお絵描きするときに使いたい、インクの描き味を再現したブラシ素材を紹介します。もしかしたら、期間限定かもしれないので、ダウンロードはお早めに！ ブラシの作者様の紹介 ブラシのダウンロード方法 Affinityにブラシをインストールする方法 ブラシの作者様の紹介 ブラシの作者様によると、Affinityの無料化に合わせて自分自身も何かを無料で提供したいと考え、今回のブラシを無料で公開することにしたとのことです。 With the release of Affinity 3.0, I also wanted to give something of my own, completely free. This ink set is yours! To thank every
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはかっこいい！ コピペで簡単に実装できる、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクト
2025年、日本語の新作フリーフォントのまとめ！ 今年も新しいフリーフォントがたくさんリリースされました
商用でも完全に無料、帰属も必要なし！ ポップでおしゃれなイラスト素材がダウンロードできる日本人によるサイト -pople
HTMLとCSSの知識とテクニックをしっかり学べる、Web制作の仕事に就きたい人向けの解説書 -入社1年目からのHTML＆CSSとWebデザイン
