「藍原相撲字」「藍原江戸文字」「藍原勘亭流」「藍原筆文字楷書」「藍原筆文字隷書」などの手書きフォントをリリースされている藍原彼方さんから、新作の筆文字フォントがリリースされました！ 無料版と有料版が用意されており、無料版ではひらがな・カタカナをはじめ、一部記号文字、教育漢字（240文字）などが収録されています。 まずはさっそく、フォントのダウンロード方法から。 下記ページにアクセスし、「無料ダウンロード」をクリックすると、ダウンロードできます（要ログイン、登録無料）。 ライセンスは独自で、「商用での利用も可能です。」とのことです。ダウンロードファイル「free_readme.txt」をご覧ください。 藍原筆文字 凜華（フリー版） 『BOOTHの「スキ！」ボタンを押していただけると「フォントに需要がある」とわかるので、漢字が更新されるかもしれません。』とのことです。 「藍原筆文字 凜華」はす
カーソルで下からホバーすると弓の弦のように上から弾け、上からホバーすると下から弾ける、操作するのが楽しくなるホバーエフェクトを紹介します。 弓の弦のように弾けるホバーエフェクトはモダンCSSの機能（shape(), sibling-index()/sibling-count(), linear()など）で実現されており、コピペで簡単に実装できます。 実際の動作は、デモページをご覧ください。 まずは一方向のみに対応した弾けるホバーエフェクト、対応ブラウザはChrome, Edgeのみです。 See the Pen 伸び縮みするホバーエフェクト(Chromeのみ) by coliss (@coliss) on CodePen. 続いてこちらのデモは、上下の方向を認識する弾けるホバーエフェクト。 See the Pen 伸び縮みするホバーエフェクト: 方向認識(Chromeのみ) by coli
ブラウザに表示したあらゆるWebページにレスポンシブに対応したFigmaみたいなグリッドをオーバーレイー表示できるChromeの機能拡張を紹介します。 グリッドのオーバーレイはブラウザ内で完全にローカルで実行されるため、オンラインのWebページだけでなく、ステージングやローカル環境でもグリッドを表示できます。 Grid Overlay Proとは Grid Overlay Proの特徴 Grid Overlay Proのインストール Grid Overlay Proの使い方 Grid Overlay Proとは Grid Overlay Proは、無料で利用できるChromeの拡張機能で、表示しているWebページにレスポンシブ用のブレイクポイントを備えたグリッドをオーバーレイで表示します。簡単に言うと、FigmaのようなグリッドをあらゆるWebページに導入できます。 デベロッパーやデザイナ
※本ページは、アフィリエイト広告を利用しています。 本書の感想を一言で言うと、「デザインすることの面白さに気づかせてくれる」 なぜこの形なのか、なぜこの文字なのか、なぜこの余白なのか、なぜ太くするのか、なぜこの角度なのか、なぜこの比率なのか、それらの解の1つが本書にあります。 最近ではロゴをはじめ、さまざまなデザインをAIで生成できます。しかし、AIが生成したものは既存デザインの再構成なので、どこで見た感じがします。 本書はクライアントの思想や概念をどのような表現にすればよいのか、どんな形にするのか、ロゴをデザインする際のアイデアの出し方やノウハウをかなり細かく、ていねいに解説したデザイン書です。 著者の甲谷氏はロゴデザインを手がけているアートディレクター兼グラフィックデザイナー、また『たのしいロゴづくり』『きれいな欧文書体とデザイン』などのデザイン書も出版されています。 特に『たのしいロ
2/11にアップデートされたChrome 145に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、まずタブの分割が正式サポートされたこと。そしてテキストの配置方法を制御するtext-justifyプロパティ、border-radiusのレンダリング変更、letter-spacingの%値、マルチカラムレイアウトにおける列の折り返しなど、Web制作者は要チェックです！ New in Chrome 145 Chrome 145 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに タブの分割 text-justifyプロパティ border-radiusの値が大きい場合のシャドウエッジ計算を最適化 CSS マルチカラムレイアウトにおける
Gitってなんだか難しそう、と思っている人もいるかもしれません。 Gitはすべてのコマンドを暗記する必要はありません。必要になったら調べるのは、ごく普通のことです。重要なのは、そのコマンドがどのような影響を与えるかを理解することです。 Gitの出発点として、日常的によく使用するコマンドとそれらのコマンドがどのような影響を与えるのか、そしてやってはいけない間違いを紹介します。 The 15 Git Commands Every Software Engineer Uses by Hadil Ben Abdallah 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに git status -リポジトリの現在の状態を確認する git init —新しいGitリポジトリを初期化する git clone —リモートリポジトリをロー
CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。 CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。 ReliCSS ReliCSSは、古いブラウザ固有のCSSハックを識別し、デベロッパーが現在の仕様に準拠したCSSに置き換えることができるように設計されたCSSハックの検出ツールです。 このツールの目的は、クリーンでメンテナンス性の高いCSSを記述できるよう支援したいと考えたもので、古いCSSとモダンCSSとの間のギャップを埋めることを目指しています。
※本ページは、アフィリエイト広告を利用しています。 いよいよ確定申告の時期になりました。 フリーランスと個人事業主向け、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()関数がパワーアップ エル
先日紹介したカスタマイズ可能な新しいコンポーネント編に続いて、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で、個人でも商用でも無料で利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く