プログラミング用フォントとUIデザインのどちらにも使える! 美しさと読みやすさを兼ね備えたフォント「Martian Mono」
Post on:2023年2月8日
Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。
ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリのUIデザインにも適しています。

最近よく使用されているCSSの実装テクニック! レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
Post on:2023年2月7日
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()
関数を使用した流体タイポグラフィです。CSSのclamp()
関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。
たとえば、小さいスクリーンでは最小値の16px
、スクリーンが大きくなるにつれ、最大値の24px
になるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。
CSSのclamp()
関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。

貴重なKindleセールが開催! 年に一度、翔泳社祭2023で人気のデザイン書・Web制作の解説書・イラスト本が超お買い得
Post on:2023年2月6日
年に一度の翔泳社祭2023が開催です!
当ブログでも最近紹介したばかりの新刊もたくさんセール対象になっており、デザイン書・Web制作の解説書・イラスト本がたくさん揃っています。
セール期間は、2/10の金曜日まで。
期間が短いので、お見逃しないように!
去年暮れに発売されたばかりのKindle本もたくさんあり、驚きのセールです。

iPadではじめるデジタルイラスト! Procreateの良さとさまざまなイラストやグラフィックの作り方が分かる解説書 -はじめてのProcreateイラスト入門
Post on:2023年2月3日
iPadでイラストを描くときの候補の一つが、Procreateです。
Procreateはプロのイラストレーターや漫画家も使用している本格派ながら、割と安価(2023年現在、2000円)で、しかも買い切りなので、これから始める人にも敷居が低いアプリです。
Procreateの初心者向けに、基本的な操作方法からさまざまなイラストやグラフィックのテクニックまで学べる解説書を紹介します。入門書なので、バリバリ使用している人には物足りないかもしれません。

知っておくと便利! CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
Post on:2023年2月2日
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。
ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。

Justify Space Between Individual Items in Flexbox
by Jim Nielsen
かわいいゴシック体の新作日本語フリーフォント「源暎ぽっぷる」 マンガや同人誌、動画にぴったり、柔らかい雰囲気で読みやすい
Post on:2023年2月1日
マンガや同人誌にぴったりなアンチゴチのフリーフォントをたくさんリリースされている、おたもん氏の新作フリーフォントがリリースされました。今回は柔らかい雰囲気で読みやすくて、かわいいPOP風ゴシック体で、マンガや同人誌のセリフ、動画のテロップなどにぴったりなフリーフォントです。

CSSって難しい! セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
Post on:2023年1月31日
CSSの:is()
疑似クラスが各ブラウザにサポート(参考: Can I use)されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。
:is()
疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。
たとえば、下記の.a .b .c
と.a :is (.b . c)
は同じように見えるかもしれませんが、実は異なります。

Using :is() in complex selectors selects more than you might initially think
by Bramus
おしゃれな手書き! 筆記体の英語フリーフォントの総まとめ
Post on:2023年1月30日
商用でも無料の英語フリーフォントをいざ探すとなると面倒だと思うので、まとめました。ブラシやペンで書かれたようなおしゃれな筆記体・手書き・スクリプト系の英語フリーフォントを紹介します。
画像にぽんと添えるだけで、おしゃれなデザインになる素敵なフォント達です。
