デザイン - CSSの記事一覧
Web Vitals Chrome Extension - Web Vitalsの評価を可視化するGoogle Chrome機能拡張
最近GoogleがWeb UXの指標として提示しているのがWeb Vitalsです。3つの指標があり、ローディングとインタラクティブ性、そして視覚的安定性となっています。これらの3つの指標に沿って、Webページを判定します。そんなWeb Vitalsを判定するGoogle Chrome機能拡張がWeb Vitals C...
lit - 軽量なレスポンシブWebフレームワーク
CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけ...
pattern.css - 背景に使えるパターンをCSSで
Webサイトの背景というと、一色で塗りつぶされたものをつい想像してしまいます。派手なものになると画像を使いますが、用意するのも面倒です。もう少し手軽に、それでいて印象深い方法はないでしょうか。そこで使ってみたいのがpattern.cssです。繰り返しのパターンを背景に適用できるCSSライブラリです。## pattern...
98.css - Windows 98を再現するCSS
世の中は進化しており、どんどんいい方向に進んでいるはずです（恐らく）。コンピュータも年々進化しており、時代に合わせて使い勝手がよくなっています。しかし、人はつい過去の思い出を美化し、ノスタルジックに浸りたくなるもののようです。今回紹介する98.cssはWindows 98を彷彿とさせるCSSになります。## 98.cs...
SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集
Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。しかしWebブラウザ側でJavaScr...
css.gg - 500種類を超えるCSSアイコン集
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗...
CSSLive2d - Live2dをCSSだけで動かすチャレンジ
2Dのイラストをまるでアニメーションのように動かしてくれるのがLive2Dです。ノベルゲームなどで使うと、より臨場感が生まれることでしょう。最近ではVTuberなどでも活用されているようです。公式で提供されているリソースを使い、何とかCSSとJavaScriptでLive2Dのデータを動かしたのがCSSLive2dにな...
Izmir - 画像にマウスカーソルを当てると情報を表示
リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。## Izmirの...
System Font CSS - OSネイティブのフォントを利用するCSS設定
CSSでOS標準のフォントを使いたいときには `system-ui` という指定を行います。ただし古いWebブラウザで使えなかったり、解釈においてまだ課題があるようです。各OSともフォントにはこだわりを持っているはずで、その標準フォントはOSにマッチして表示されるはずです。そこで使ってみたいのがSystem Font ...
Distortion Hover Effect - マウスオーバーで画像を切り替え
Webページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。その中で最も簡単そうな、マウスオーバー時にエフェクトを起こすのがDistortion Hover Effectです。しか...
laptop CSS - ラップトップ風の枠を表示するCSS
同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。今回紹介するlaptop CSSはそんな映像を表示する枠のようなものです。何がマッチするのか考えさせ...
Windows 95 UI Kit - Windows 95風のWebサイトを作る際に
懐古主義という言葉があります。過去の出来事は美化される傾向にあり、当時味わったはずの嫌な思い出は忘却の彼方へ飛んでいってしまいます。その結果、古き良きなんて言葉が出てきます。今回紹介するWindows 95 UI Kitはその名の通り、Windows 95風のUIをWebブラウザ上に再現できるCSSデザインです。## ...
GoodTwitter - Twitterを見慣れたUIに戻す
どんなものでも慣れが存在します。よりいいものを目指していたとしても、かつての仕組みに慣れてしまった人にとっては使いづらく感じるものです。その変化がダイナミックであればあるほど、反発も大きくなるでしょう。TwitterのUIが大きく変わりましたが、それが嫌な人はGoodTwitterを使ってみましょう。元のUIに戻してく...
oldTerminal - Web上で昔懐かしいターミナルの画面を再現
開発者にとってターミナルは切っても切り離せない存在です。もしターミナルがなかったら仕事にならないという人も多いですし、Windowsのターミナルが新しくなることで生産性が向上する人も多いのではないでしょうか。そんなターミナルの画面をWeb上に再現するのがoldTerminalです。名前の通り、古いターミナルの画面です。...
Scene.js - JavaScriptでタイムラインベースのアニメーション
アニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。## Scene.jsの使い方JavaScr...
CSS-Only Chat - JavaScriptを使わないWebチャット
技術の凄さを感じるのはどんな時か。一見すると無理と思えるようなことを実現できてしまっている時もその一つです。最近では機械学習を用いて粗い映像を高画質化するプロジェクトもあります。SFと思わんばかりの世界が実現しようとしています。今回紹介するCSS-Only Chatもすごいです。JavaScriptを使わずにリアルタイ...
Simplify Gmail - GmailのUIをすっきりシンプルに
アプリケーションのUIはとても大事で、その見た目次第でやる気になったり、逆に削がれたりします。大事なのは不要な要素を省き、作業に集中できる環境を作り出すことです。かといってあまりなくすと機能があることにも気付いてもらえなくなるのでバランスが重要です。今回紹介するSimplify GmailはGmailのUIをシンプルに...
IsometricSass - CSSだけで実現する3Dライブラリ
Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現でき...
FullScreen Slider - アニメーションしながらコンテンツを切り替え
SPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。そうしないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。今回紹介するFullScreen Sliderもそんなスクロール用ライブラリです。表示範囲全体をスライドさせ...
Uix Kit - 120を超えるコンポーネントが用意されたBootstrap互換のUIキット
Webデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。しかし、このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。そういった点においてBootstrapの汎用性は高く、利用者も多いのです。しか...