フォント選びの革命書!センスのいいデザインになるフォントの組み合わせがよく分かる -マネするだけでセンスのいいフォント

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

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

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

マネするだけでセンスのいいフォント

続きを読む

レスポンシブ対応にメディアクエリなしで、CSSの関数で定義!border-radiusの値を変えるテクニック

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

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

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

border-radiusの値をスマホとデスクトップで変えるテクニック

Conditional Border Radius In CSS
by Ahmad Shadeed

続きを読む

CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法

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

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

CSSのaspect-ratioプロパティの使い方、画像をアスペクト比で実装する今までとこれからの実装方法

CSS ways to Create Fixed Aspect Ratio

続きを読む

Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説

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

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

再利用可能なタブのUIコンポーネントをVue.jsで実装する方法を解説

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

続きを読む

Windows 11をインストールせずに、UIを試せる!Reactで実装されたWindows 11

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

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

Windows 11 in Reactのキャプチャ

Windows 11 in React
Windows 11 in React Js 💻 🌈

続きを読む

モダンJavaScriptを基礎からしっかり学びたい人、Reactを身につけたい人に最高の入門書 -React実践の教科書

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

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

モダンJavaScriptの基本から始める React実践の教科書

続きを読む

CSSの新しい単位がすごく便利!コンテナベースの相対単位「コンテナ単位(qw, qh)」の基礎知識と使い方

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

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

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

CSSの新しい単位、コンテナ単位

CSS Container Query Units
by Ahmad Shadeed

続きを読む

Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio

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

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

Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio

Dopefolio -GitHub

続きを読む

top of page

©2021 coliss