デザインに使うのはいつも同じフォント、、、
たくさんのフォントの中からどう組み合わせたらよいのか分からない、、、

使用するフォントに悩む人に朗報です、センスのいいデザインになる3種類のフォントの組み合わせがすでに選ばれたフォント選びの革命書を紹介します。

日本語フォント・英語フォントの中から相性のいい3種類の組み合わせが、デザインの作例とともにたっぷり掲載されており、イメージにあったフォントがすぐに探せて選べるデザイン書です。

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。

メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。

この難しい条件をCSSの関数で実装するテクニックを紹介します。

Conditional Border Radius In CSS
by Ahmad Shadeed

先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。
※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。

aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。
CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。

CSS ways to Create Fixed Aspect Ratio

タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。

スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。

How to Build a Tab Component In Vue.js
by Luca Spezzano

Windows 11を試したいけど、インストールはしたくない、そんな人にUIを手軽に試せるReactで実装されたWindows 11を紹介します。

Windows 11 in ReactはブラウザでWindowsのUIが再現されており、さまざまな操作やアプリを楽しめます。

Windows 11 in React
Windows 11 in React Js 💻 🌈

モダンJavaScriptの基本からTypeScriptの実践的な内容まで、Reactを一から学び、しっかりと身につけたい人にお勧めの解説書を紹介します。

Reactを身につける上で、これだけは知っておいた方がよいというJavaScriptの知識も分かりやすく解説されており、基礎からしっかり身につきます。

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。

CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。

コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。
ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。

CSS Container Query Units
by Ahmad Shadeed

Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。

オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを用意できます。

Dopefolio -GitHub