タグ: Web

Vercel Satori で縁取りを付ける

※Pull request がマージされたので、下のようなことをしなくても縁取りを付けることができるようになった。 HTML・CSS を SVG 画像に変換する Vercel 製ライブラリ、Satori でテキストに縁取 […]

Safari だけじゃなくてすべてのブラウザで入力時ビューポートがズレる (ので直しましょう)

なぜズレるのか Safari の有名なバグ？ というか仕様で、position: fixed; や position: sticky; で要素を固定しているとき、仮想キーボードを出すと正しい位置に表示されないというものが […]

HTML タグ何個覚えてる？ 腕試しできるサイトで「ウェブ力」をチェック

HTML を構成するタグは、なんと 114 個もあるらしい。 ではその 114 個のタグのうち、何個知っている・覚えているのだろうか――。 それをチェックできるサイトがある。「HTML Tags Memory Test」 […]

今のウェブに両端揃えはまだ早いのかもしれない

ウェブページで文章を両端揃えするには、text-align: justify; を使用する。 両端揃えにすることで文章の終端が揃い、美しい表示になる。がしかし、今のウェブにはまだ早いのかもしれないと考える。 基本的に組版 […]

picture 要素もちゃんと Preload Scanner が動くのでどんどん使っていこう

先日、このツイートを見た。 画像のサイズを変えてもパフォーマンスは改善されない、というのは同意できるが、2番目の「picture タグによる画像出し分けは、Preload Scanner が効かない～」について疑問が残る […]

KUSANAGI 8 から KUSANAGI 9 に移行してみた。migrate コマンドで楽々

以前から使用していた KUSANAGI 8 だが、今年 6 月末で EOL ということもあり、新バージョンである KUSANAGI 9 に移行したい。しよう。 基本的にはプライム・ストラテジーが公開しているドキュメントと […]

ウェブサイトを Astro で作り直した

このブログではなく、もうひとつのウェブサイト (https://aioilight.space/) を Astro で作り直した。 なぜ Astro なのか 元々は Nuxt.js というフレームワークで作られていたのだ […]

【HTML】レスポンシブ画像に対しての sizes=”auto” が実装される！ 地味に面倒なサイズ指定が条件付きで楽になる

HTML で画面の解像度に応じて画像を切り替えて表示させるには、srcset 属性と sizes 属性を使用する。 しかし、この sizes 属性は、微妙に使いづらい。sizes 属性に入る値は、vw や px といった […]

WordPress プラグイン「Autoptimize」を一時的に無効化する方法

そもそも論、Autoptimize による最適化はすべきではない、というのは一旦スルーしよう。 時には、仕方なく WordPress を使っていて、仕方なく Autoptimize が入っていて、仕方なく CSS の最適 […]

要素の角を丸くせずに面取りする CSS

CSS における border-radius は、いわゆる角丸を作るプロパティであって、丸く面取りをすることしかできない。 clip-path プロパティを使うことで、画像のように、要素の角を丸くせず面取りをすることがで […]

ユナイテッド・シネマのオンライン予約システムには意図せず会員に入会してしまうバグがある

普段は別の映画館で映画を観ることが多いが、そこで放映されない映画を観るために、福岡のユナイテッド・シネマで観ることにした。オンラインで予約したのだが、とんでもないバグを見つけてしまった。 意図せず会員に入会してしまうバグ […]

Web フォント やめた

僕の Web サイトである AioiLight.space で、Web フォントを使うのをやめた。今更感あるけど、Web フォントって諸悪の根源だな、って。そう思うようになった。 一番上の画像が Web フォントありの表 […]