簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG

グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは? 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に…

WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法

2022年6月8日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います! ↓私が10年以上利用している会計ソフト! ヘッドレスCMSとは? ヘッドレスCMSはコンテンツの管理のみをするCMS(=Content Mana…

ソースコードの断片をスタイリッシュな画像にするVisual Studio Code拡張機能/Twitterなどで共有したいときに便利なインスタントプリントツール「Polacode」【レビュー】

ソースコードの断片をスタイリッシュな画像にするVisual Studio Code拡張機能/Twitterなどで共有したいときに便利なインスタントプリントツール「Polacode」【レビュー】

悪しきコードの痛みを知り、設計スキルを高める方法を学ぶ 全17章からなる『良いコード/悪いコードで学ぶ設計入門』

4/30発売の『良いコード/悪いコードで学ぶ設計入門』を紹介する「『良いコード/悪いコードで学ぶ設計入門』著者トーク」。ここで著者の仙塲大也氏が登壇。続いて、各章の概要について話します。前回はこちらから。 第1章:悪しきコードの弊害から痛みを知る 仙塲大也氏(以下、仙塲):ここからは各章の紹介です。本書は…

CSSでfont-sizeをレスポンシブ対応にする最新テクニック! clamp()関数で定義する便利ツール -Min-Max Calculator

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、と…

デンソーウェーブ、細長く狭いスペースにも印字できる、長方形型の新しいQRコード「rMQRコード」を開発

デンソーウェーブ、細長く狭いスペースにも印字できる 長方形型の新しいQRコード「rMQRコード」を開発 デンソーウェーブは、長方形型の新しいQRコード(注1)「rMQRコード(アール・エム・キューアールコード:長方形マイクロQRコード)」を開発しました。rMQRコードは、QRコードの特性である優れた読み取り速度とデータ…

これは便利で簡単! モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチ…

これは覚えておきたい! 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパ…

動く流体シェイプをコピペで作成 Blob Animation + SVGおすすめツール – PhotoshopVIP

液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与えることができます。 スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール「Blob Animation」が公開されています…