プログラミング用フォントとUIデザインのどちらにも使える! 美しさと読みやすさを兼ね備えたフォント「Martian Mono」

Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。

ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリのUIデザインにも適しています。

美しさと読みやすさを兼ね備えたフォント「Martian Mono」

Martian Mono -GitHub

続きを読む

最近よく使用されているCSSの実装テクニック! レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。

たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。

CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。

CSSの便利なツールが登場! レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できる -clamp() Calculator

clamp() Calculator

続きを読む

貴重なKindleセールが開催! 年に一度、翔泳社祭2023で人気のデザイン書・Web制作の解説書・イラスト本が超お買い得

年に一度の翔泳社祭2023が開催です!
当ブログでも最近紹介したばかりの新刊もたくさんセール対象になっており、デザイン書・Web制作の解説書・イラスト本がたくさん揃っています。

セール期間は、2/10の金曜日まで。
期間が短いので、お見逃しないように!

去年暮れに発売されたばかりのKindle本もたくさんあり、驚きのセールです。

セール対象のKindle本

翔泳社祭2023: Kindleストア

続きを読む

iPadではじめるデジタルイラスト! Procreateの良さとさまざまなイラストやグラフィックの作り方が分かる解説書 -はじめてのProcreateイラスト入門

iPadでイラストを描くときの候補の一つが、Procreateです。
Procreateはプロのイラストレーターや漫画家も使用している本格派ながら、割と安価(2023年現在、2000円)で、しかも買い切りなので、これから始める人にも敷居が低いアプリです。

Procreateの初心者向けに、基本的な操作方法からさまざまなイラストやグラフィックのテクニックまで学べる解説書を紹介します。入門書なので、バリバリ使用している人には物足りないかもしれません。

はじめてのProcreateイラスト入門

続きを読む

知っておくと便利! CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック

ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。

ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。

CSS Flexboxで左と右の両端揃えにする実装テクニック

Justify Space Between Individual Items in Flexbox
by Jim Nielsen

続きを読む

かわいいゴシック体の新作日本語フリーフォント「源暎ぽっぷる」 マンガや同人誌、動画にぴったり、柔らかい雰囲気で読みやすい

マンガや同人誌にぴったりなアンチゴチのフリーフォントをたくさんリリースされている、おたもん氏の新作フリーフォントがリリースされました。今回は柔らかい雰囲気で読みやすくて、かわいいPOP風ゴシック体で、マンガや同人誌のセリフ、動画のテロップなどにぴったりなフリーフォントです。

源暎ぽっぷる

源暎ぽっぷる

続きを読む

CSSって難しい! セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む

CSSの:is()疑似クラスが各ブラウザにサポート(参考: Can I use)されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。

:is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。

たとえば、下記の.a .b .c.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。

CSSのセレクタ「.a .b .c」と「.a :is (.b . c)」は同じように見えるけど実は違います

Using :is() in complex selectors selects more than you might initially think
by Bramus

続きを読む

おしゃれな手書き! 筆記体の英語フリーフォントの総まとめ

商用でも無料の英語フリーフォントをいざ探すとなると面倒だと思うので、まとめました。ブラシやペンで書かれたようなおしゃれな筆記体・手書き・スクリプト系の英語フリーフォントを紹介します。

画像にぽんと添えるだけで、おしゃれなデザインになる素敵なフォント達です。

おしゃれな手書き! 筆記体の英語フリーフォントの総まとめ

続きを読む

top of page

©2023 coliss