※本ページは、アフィリエイト広告を利用しています。 いよいよ確定申告の時期になりました。 フリーランスと個人事業主向け、2026年に提出する青色申告と白色申告に対応した最新版の確定申告の解説書を紹介します。 本書は20年以上に渡り版を重ねているベストセラーの定番書で、確定申告をスピーディに漏れもミスもなく進められるように分かりやすく解説されています。もちろん、インボイス制度や消費税にも完全対応しています。 確定申告の本はたくさん出版されていますが、まずは定番書できちんとした知識をおさえることをお勧めします。 本書は令和7年（2025年）分の青色申告と白色申告に対応したフリーランスと個人事業主向けの解説書です。申告に必要な準備をはじめ、帳簿や経費の計算方法、実際の書類の作成と申告の手順、申告後の手続き、e-Taxやスマホアプリによる納付、インボイス制度や消費税についても本書一冊でしっかり学べ

Web制作者の長年の悩みがようやく解決されます！ CSSで100vwを使用して幅いっぱいにすると、垂直のスクロールバー分が含まれて、水平スクロールバーが表示されてしまいます。この問題はWindowsで起こり、macOSでもクラシックのスクロールバーを使用していると起こります。 Chromeの次のバージョンである145では、vwのサイズに垂直スクロールバーの幅が認識されるようになり、100vwにした場合スクロールバーの幅のサイズを含まずに幅いっぱいとして機能するようになります。 まずはChromeのみですが、CSSワーキンググループで議決されたので、他のブラウザも随時サポートすると思います。 Using 100vw is now scrollbar-aware by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CursorやVS Codeのエディタで、インデントのガイドラインをアクティブなガイドラインだけハイライト表示させる方法を紹介します。 通常（左）はその箇所を含むすべてのインデントのガイドラインが表示されますが、右のようにアクティブなガイドラインだけを表示できるようになります。 参考: VS Code – highlight just the active indent guide インデントのガイドラインを表示させる方法 アクティブなガイドラインだけ表示させる方法 インデントのガイドラインを表示させる方法 まずは、インデントのガイドラインを表示させる方法から。 CursorもVS Codeもデフォルトではガイドラインをホバーで表示するになっていますが、一応。 設定を変更する方法はCursorとVS Codeは同じ。歯車アイコンをクリックして「設定」を開く、または右上のアイコンをクリックし

WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。 直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。 14 logic-driven UI design tips to improve any interface by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペース要素は関連性に基づいて分類される 2. UI要素のコントラスト比が3:1であることを確認する 3. もっとも重要なアクションには単一のプライマリボタンを使用する 4. ボタンは十分なサイズを確保する 5. 重要なコンテンツが視認可能であることを確

Chromeは先日のアップデートで、1つのタブ内を分割して2つのWebページを表示できるようになりましたが、さらに便利に進化して、タブを垂直で管理できるようになります！ 水平だとタブを10個くらい開くと、タイトルが小さくなってしまいますが、垂直だとタブを20個くらいにしても問題ないので、使い勝手がよさそうです。 Chromeで垂直タブを有効にする方法 Chromeで垂直タブを使ってみた Chromeで垂直タブを有効にする方法 垂直タブはChrome 145で機能フラグを設定することで利用できます。 アドレスバーに「chrome://flags/#vertical-tabs」を入力。 「Vertical Tabs」のフラグを「Enabled（有効）」にしてChromeを再起動。

昨年末にリリースされたばかり、Chromeの便利な拡張機能を紹介します。 MiroMiroは1クリックするだけで、表示しているサイトを分析、デザイン要素を抽出、本番環境で使えるアセットに変換するオールインワンの拡張機能です。 デベロッパーツールや似た拡張機能よりも直感的に操作でき、かなり便利です。 MiroMiro -Chromeウェブストア この拡張機能は年末にリリースされたばかりで、まだユーザー数は多くありませんが、これから伸びてくると思います。 MiroMiroの主な機能は、下記の通り。 使用されているカラー・フルパレットを抽出 使用されているフォントを抽出 画像ファイル、アイコン、SVGを抽出 Lottieアニメーションを抽出 CSSスタイルを抽出 これらを1クリックするだけで、すべてを見ることができ、必要なものだけダウンロードすることもできます。 ということで、MiroMiroを

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

年明けは気分一新したいですね。日常的に使用しているものを新調すると、良い1年が過ごせると言われています。 とは言っても、新調するのにはお金がかかるので、エディタのテーマを新調して、気分を一新てみるのはどうでしょうか。CursorやVS Codeで使用できる最近人気のテーマや機能拡張を紹介します。 下記のリンク先は、すべてVisual Studio Marketplaceです。 VS Codeにインストールするには「Install」ボタン、Cursorにインストールするには拡張機能から検索してインストールできます。 Cosmic Nebula Themes 宇宙・星雲の名の通り、宇宙の神秘的な美しさにインスパイアされてデザインされたテーマ。星雲の深みのあるパープルの背景と地球外生物を思わせるグリーンのアクセントカラーが読みやすさを向上させるコントラスト比を確保し、長時間のコーディングでも目の

2025年、当サイトで公開した記事の中から注目された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 AI関連 デザインのテクニック・インスピレーション Adobe, Figma, Affinity, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2025年はこれまで以上に大きく変化した年でした。2024年まではAIは活躍の場が限定されていましたが、2025年はさまざまなシーンに取り入れられ、仕事や生活の場で欠かせないも

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()関数がパワーアップ エル

ぱっと見、なんてことはないエフェクトのように見えるかもしれませんが、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクトを紹介します。 シンプルなHTMLに、CSSをコピペするだけで簡単に実装できます。 実際の動作は、デモページでご覧ください。 「config」でそれぞれの数値を大きくすると、挙動がより分かりやすくなります。 See the Pen CSSで実装する繊細なパルスエフェクト by coliss (@coliss) on CodePen. HTMLはシンプル、ボタンはbutton要素で実装し、data-border-pulseを付与します。

先日紹介したカスタマイズ可能な新しいコンポーネント編に続いて、2025年、CSSの新機能のまとめ: 進化しているインタラクション編を紹介します。 今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに インタラクション: scroll-stateクエリ インタラクション: ツリーカウント関数 インタラクション: scrollIntoView()コンテナ インタラクション: ネストされたビュー

Perl, Haskell, bash, Rust APLなど、記号文字を多用するプログラミング向けに、記号文字を英数字と同等の第一級グリフとして扱い、エディタに調和をもたらすことを目指してデザインされた等幅フォントを紹介します。 Myna -GitHub Mynaは、作者のタイポグラフィの渇望を解消したいという長年の思いから生まれたフォントです。作者はこれまで多くの等幅フォントを使用し、このフォントは微調整をしたい、この文字の形状をすこし変えたいと感じていました。 多くのフォントでは記号文字を二級グリフとして扱っており、たとえば->が矢印に見えなかったり、$, @, %が揃っていないように見えます。そんな不満を解消するべく、記号文字を第一級グリフとしてデザインされたのが、Mynaです。 ライセンスはSIL Open Font License 1.1で、個人でも商用でも無料で利用できます。

今年も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

2025年もいよいよ年の瀬です、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 漢字も揃った手書きフォントをはじめ、バリアブル、ゴシック、丸ゴシック、明朝、筆文字、ドットフォントなど、今年も盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気になったフォントから。 バリアブルの日本語フリーフォント「アングル」をリリースしているtoktaro fontsの新作フォント。

ネタバレのテキストをTelegram風のパーティクルアニメーションを備えたエフェクトで非表示にし、クリックするとそのテキストが表示されるJavaScriptで実装された軽量のWebコンポーネントを紹介します。 依存関係はなしで、スマホでもタブレットでもデスクトップでも機能します。 spoilerjs spoilerjs -GitHub spoilerjsの特徴 spoilerjsのデモ spoilerjsの使い方 spoilerjsの特徴 spoilerjsは、依存関係のないWebコンポーネントで、ネタバレ警告付きのテキストを一時的に非表示にすることができます。 ビジターがネタバレのテキストをクリックすると、Telegramアプリにインスパイアされた美しいパーティクルアニメーションとともにテキストが表示されます。パフォーマンスが高く、実装も簡単で、あらゆるモダンブラウザで動作します。 sp

スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 Chromeの次のバージョンで、この問題が数行のCSSで解決できるようになるので、紹介します。 Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーン（連鎖）とは overscroll-behaviorの問題点 スクロールチェーン（連鎖）を回避する方法 はじめに 2026年1月にリリース予定

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はホワイト

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でテストできる機能は4つ。