Chrome 128で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、ruby要素によるルビのレイアウト強化、ドロップダウン内のoptionの最小サイズ、zoomプロパティのスタンダード化など、Web制作者は要チェックです！ New in Chrome 128 Chrome 128 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのruby-alignプロパティ ルビが改行可能に <select>ドロップダウン内の<option>の最小サイズ CSSのzoomプロパティのスタンダード化 はじめに 8/21にリリースされたChrome 128で4つのCSSの新しい機能が追加されました。対象となるChrome 128は、Android、Chr

最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メッシュグラデーションはスタティックの動かないものだけでなく、アニメーションで動くメッシュグラデーションも簡単に生成できます。 MSHR MSHRは、CSSで作成されたメッシュグラデーションのコレクションで、個人でも商用でもあらゆるプロジェクトで無料で利用できます。2024年8月現在、282種類のメッシュグラデーションが登録されており、そのまま利用するだけでなく、カスタマイズして独自のメッシュグラデーションを作成することもできます。

ゲームや電光掲示板などで見かけるビットマップやドットの懐かしいフォント、デジタル時計や電卓などで見かける７セグメントや14セグメントのフォントなど、ピクセルフォントの日本語フリーフォントを紹介します。 ゲームやアプリをは...記事の続きを読む

2024年用、日本語のフリーフォントをアップデートした際に好評だった「KTきよすなゴシック」をはじめ、可読性に優れたフリーフォントをリリースされている「こはくのタイプライブラリ」から、新作フリーフォントがリリースされまし...記事の続きを読む

ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ

CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに

※本ページは、アフィリエイト広告を利用しています。 書体デザインに興味がある人は多いと思います。中でも文字を描くレタリングは、商品のロゴや本の表紙、街中のポスターや看板でもよく見かけます。 レタリングを始めるのに特別な道具は必要ありません。紙とペンがあれば、始められます。自分で描いた文字を美しいデザインにするレタリングの基本から応用までしっかりと分かる解説書を紹介します。 著者はニューヨーク・タイムズやスターバックスやペンギン・ブックスなどのクライアントワークを手がけているJessica Hische氏。彼女のInstagramにはたくさんの作品が掲載されています。 そんな氏による、レタリングをどのように始めればいいのか、そのやり方と描き文字をデザインにどのように活かすのかについて詳しく解説したデザイン書です。 レタリングデザインの極意 プロセスから学ぶ、描き文字を活かすためのガイドブック

CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。

私のお気に入り「かもめ明朝（紹介記事）」をはじめ、「トレゴ」「新レトロ丸ゴシック」「築豊明朝」など、オールドスタイルの日本語フリーフォントをリリースされている文字魚さんから新作フォントがリリースされました！ 今回リリースされた「築豊35ポイントゴチック」もオールドスタイルで、ハネやハライがあるゴシック体です。見出し・タイトルだけでなく、本文にも使える使い勝手のよい日本語フリーフォントです。 【フリーフォント】「築豊35ポイントゴチック」オールドスタイルのゴシック ※要登録（無料、pixiv ID可） 気に入った方には、支援版の投げ銭用も用意されています。 築豊35ポイントゴチックの特徴 築豊35ポイントゴチックは、民友社三十五ポイント明朝を参考に、もし「築地35ポイントゴチック」があったらをテーマに作成されたオールドスタイルのゴシック体です。 ライセンスはSIL Open Font Lic

テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを

ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」（紹介記事）も第1・第2水準漢字対応です。 「マルミーニャＭ」はかわいさ全開の丸ゴシック体のピクセルフォントで、かわいいドット絵やゲーム演出にぴったりな丸文字フォントです。 マルミーニャＭ マルミーニャＭ -BOOTH マルミーニャＭのダウンロード マルミーニャＭの特徴 x0y0pxFreeFontの他のフォント マルミーニャＭのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイトから。x0y0pxFreeFontの本サイトはGitHubに移転され、そこからフォントをダウンロードできます。

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。

マンガ・同人誌向けのアンチック体フォントはたくさんあります。今回紹介する「GL-ノバンチカ源」はアンチゴチとしての読みやすさはもちろん、セリフや擬音・擬態語に使用する濁点・半濁点つきのひらがな・カタカナ、小書き仮名も揃っており、こんなにも仮名や記号文字が揃っているフォントはないと思います。小書きの「ん」や「ー」の濁点なども揃っています。 オープンソースなので、個人でも商用でも完全に無料で利用できます。しかも、改変や組み込みもOKの太っ腹ライセンス！ GL-ノバンチカ源 -GitHub 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」のダウンロード 「GL-ノバンチカ源」を使ってみた 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」は、「GL-アンチック」「GL-オとマのペ」などマンガ・同人誌向けのフリーフォントや「GL-築地初号などを多数リリースされているGutenberg Lag

2023年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 無料版で使ってみたらいい感じだったので、有料版を購入しました。 かもめ明朝 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 築地二号系で昭和初期に作られたであろう金属活字にインスパイアされて作成されたフォント。ひらがな・カタカナ・約物、漢字は4文字だけ収録されています。 フリーフォントのダウンロードは、サイドバーの「無料ダウンロード」から。 202

CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読

2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特徴で、字形にはコントラストを強調するディテールが備わっています。また、大きいサイズでもその美しいラインと滑らかな曲線、繊細なディテールは優れたリズムを実現します。 「0」と「O」を区別する必要がある場合のスラッシュゼロ、下付き数字の化学式（H2Oなど）、文字幅が揃った数字など、多くのOpenType機能も利用できます。 Inter font family Inter -GitHub Inter 4の特徴 Inter 4のダウンロード Inter 4のウェイトとグリフ In

ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。 ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Terminal CSS Terminal CSS -GitHub Terminal CSSの特徴 Terminal CSSの使い方 Terminal CSSのコンポーネント Terminal CSSの特徴 Terminal CSSは、ターミナル愛好家のためのモダンでミニマルなCSSのフレームワークです。ソースはCSSで記述されており、アクセシブルで、非常に軽量（3k gzip）です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直

商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく、イラスト素材のダウンロード方法から。 イラストをクリックすると各イラストのページに移動するので、「download SVG」「download PNG」ボタンをクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。