商用利用も完全に無料！ これはすぐに使いたくなる、オールドスタイルの美しいフリーフォント -築豊35ポイントゴチック
私のお気に入り「かもめ明朝（紹介記事）」をはじめ、「トレゴ」「新レトロ丸ゴシック」「築豊明朝」など、オールドスタイルの日本語フリーフォントをリリースされている文字魚さんから新作フォントがリリースされました！ 今回リリースされた「築豊35ポイントゴチック」もオールドスタイルで、ハネやハライがあるゴシック体です。見出し・タイトルだけでなく、本文にも使える使い勝手のよい日本語フリーフォントです。 【フリーフォント】「築豊35ポイントゴチック」オールドスタイルのゴシック ※要登録（無料、pixiv ID可） 気に入った方には、支援版の投げ銭用も用意されています。 築豊35ポイントゴチックの特徴 築豊35ポイントゴチックは、民友社三十五ポイント明朝を参考に、もし「築地35ポイントゴチック」があったらをテーマに作成されたオールドスタイルのゴシック体です。 ライセンスはSIL Open Font Lic
Tailwind CSSの基本的な使い方から実践的なテクニックまでしっかりと学べる一冊 -Tailwind CSS実践入門
※本ページは、アフィリエイト広告を利用しています。 Tailwind CSSは好き嫌いが分かれるフレームワークだと思いますが、Tailwind CSSを採用しているWebサイトは確実に増えてきました。 Tailwind CSSのユーティリティファーストでどのようにマークアップするのか、ユーティリティクラスを用いたコンポーネント設計、基本的な使い方からテーマのカスタマイズやプラグインなど実践的なテクニックを詳しく解説した解説書を紹介します。 本書は、CSSのフレームワーク「Tailwind CSS」の解説書です。Tailwind CSSについては導入方法からていねいに解説されていますが、HTMLやCSSの基礎知識は解説されていません。すでにHTMLやCSSを使用して実際にWebサイトを構築している人向けです。 Tailwind CSSをこれから使用してみたい、すでに使用していてより良い使い方
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
商用でも完全に無料！ 日本や世界の古地図にインスピレーションを得て作成されたブラシ素材 -Fantasy Map Brushes
日本や世界の古地図（浮世絵や木版画なども）にインスピレーションを得て作成されたブラシ素材を紹介します。ブラシはPhotoshop用ですが、GIMP, Affinity Photo, Procreate, クリスタなど他のアプリでも使用できます。 Fantasy Map Brushesはブラシで、ハンコみたいにポンポンと押すように山・森・木々・草・川・沼・道路・建物などを簡単に描けます。無料とは思えないほど大ボリュームで、予想を遙かに上回る思います。 Fantasy Map Brushes Fantasy Map BrushesのライセンスはCC0で、個人でも商用でも無料で利用できます。詳しくはライセンスページをご覧ください。 ブラシの数は膨大で、日本や世界の古地図ごとにダウンロードできます。ダウンロードはリンク先ページの下の方「Download」ボタンからです。 まずは、日本にインスピレー
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常の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 既存のアイコンを
ピクセルフォントが好きな人に！ JIS第1・第2水準漢字まで揃った、かわいさ全開の丸文字ピクセルフォント -マルミーニャＭ
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」（紹介記事）も第1・第2水準漢字対応です。 「マルミーニャＭ」はかわいさ全開の丸ゴシック体のピクセルフォントで、かわいいドット絵やゲーム演出にぴったりな丸文字フォントです。 マルミーニャＭ マルミーニャＭ -BOOTH マルミーニャＭのダウンロード マルミーニャＭの特徴 x0y0pxFreeFontの他のフォント マルミーニャＭのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイトから。x0y0pxFreeFontの本サイトはGitHubに移転され、そこからフォントをダウンロードできます。
2024年のCSSの書き方、ワークフローとツールについて
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は、素晴らしいの一言に尽きます。
2024年の実装に役立つCSSの新機能と使い方のまとめ
2023年の後半に、CSSの多くの新機能がすべてのブラウザにサポートされました。新機能が登場するときもワクワクしますが、やはりすべてのブラウザにサポートされてからが本番です。 2024年の実装に役立つCSSの新機能とその使い方を紹介します。セレクタを条件式のように記述できる:has()、複数のカード内でテキストを揃えられるsubgrid、CSS内でネストを使用できるCSSネスト、レスポンシブ対応のコンポーネントに役立つコンテナクエリ単位など、次のプロジェクトに役立つCSSがたくさんあります。 5 CSS snippets every front-end developer should know in 2024 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
明朝体の奥深さを学べる良書！ デザイン、さまざまな明朝体の比較、歴史など、明朝体のすべてを解説 -明朝体の教室
※本ページは、アフィリエイト広告を利用しています。 「こんな本、今までなかった」と本の帯にあるように、書体デザイナーが明朝体のデザインと作り方について言語化して解説することは日本の書体設計史上はじめてのことです。 書体デザインに携わる人をはじめ、書体を扱うデザイナーやフォントが大好物な人にかなりお勧めの解説書を紹介します。明朝体の奥深さを楽しめます。 著者の鳥海 修氏は、ヒラギノシリーズ、こぶりなゴシック、游明朝体・游ゴシック体など100以上の書体開発に携わった字游工房の書体設計士で、日本の書体デザインの第一人者。そんな氏による游明朝体を基準にした本文用明朝体の作り方、さまざまな明朝体の比較検討、明朝体のすべてを分かりやすく解説した一冊です。 本書は一昨日発売されたばかり、ほやほやの最新刊！
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
マンガや同人誌にぴったりなフリーフォント「GL-ノバンチカ源」 濁点・半濁点つきの仮名、小書き仮名、記号文字が盛りだくさん！
マンガ・同人誌向けのアンチック体フォントはたくさんあります。今回紹介する「GL-ノバンチカ源」はアンチゴチとしての読みやすさはもちろん、セリフや擬音・擬態語に使用する濁点・半濁点つきのひらがな・カタカナ、小書き仮名も揃っており、こんなにも仮名や記号文字が揃っているフォントはないと思います。小書きの「ん」や「ー」の濁点なども揃っています。 オープンソースなので、個人でも商用でも完全に無料で利用できます。しかも、改変や組み込みもOKの太っ腹ライセンス！ GL-ノバンチカ源 -GitHub 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」のダウンロード 「GL-ノバンチカ源」を使ってみた 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」は、「GL-アンチック」「GL-オとマのペ」などマンガ・同人誌向けのフリーフォントや「GL-築地初号などを多数リリースされているGutenberg Lag
2023年、Web制作・デザインに役立つ記事の総まとめ
2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
シドニーを拠点に活躍しているプロのファッションカメラマン Julia Trotti氏のPhotoshop用トーンカーブのコレクションが無料でダウンロードできるので、紹介します。 主にファッション系、特に女性をより印象的に美しく仕上げるものが多く、男性の写真にももちろん使用できます。 かなり前に一度紹介したのですが、最近になって見てみたらトーンカーブのコレクションが増えていたので、改めて紹介します。 まずは、Photoshop用トーンカーブファイルの利用方法を。 ダウンロードとインストールは簡単です。 各ページの左「download」からファイルをダウンロードし解凍、拡張子「.acv」がトーンカーブファイルです。 ※「.atn」のアクション形式もあります。 Photoshopのアプリケーションフォルダ内の「Presets/Curves」内にトーンカーブファイルを移動。これで準備は完了です。
2023年も新しいフリーフォントがたくさんリリースされました！ 2023年、日本語の新作フリーフォントのまとめ
2023年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 無料版で使ってみたらいい感じだったので、有料版を購入しました。 かもめ明朝 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 築地二号系で昭和初期に作られたであろう金属活字にインスパイアされて作成されたフォント。ひらがな・カタカナ・約物、漢字は4文字だけ収録されています。 フリーフォントのダウンロードは、サイドバーの「無料ダウンロード」から。 202
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2023年、UIデザインで人気のツールを調査 -UIデザインやプロトタイプでよく使用されるツール、UIデザイナーがAIをどのように使用しているのか
