ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - CSSの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2019/11/27

Izmir - 画像にマウスカーソルを当てると情報を表示

リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。## Izmirの...

List

  • 2019/11/20

System Font CSS - OSネイティブのフォントを利用するCSS設定

CSSでOS標準のフォントを使いたいときには `system-ui` という指定を行います。ただし古いWebブラウザで使えなかったり、解釈においてまだ課題があるようです。各OSともフォントにはこだわりを持っているはずで、その標準フォントはOSにマッチして表示されるはずです。そこで使ってみたいのがSystem Font ...

List

  • 2019/11/15

Distortion Hover Effect - マウスオーバーで画像を切り替え

Webページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。その中で最も簡単そうな、マウスオーバー時にエフェクトを起こすのがDistortion Hover Effectです。しか...

List

  • 2019/09/30

laptop CSS - ラップトップ風の枠を表示するCSS

同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。今回紹介するlaptop CSSはそんな映像を表示する枠のようなものです。何がマッチするのか考えさせ...

List

  • 2019/09/15

Windows 95 UI Kit - Windows 95風のWebサイトを作る際に

懐古主義という言葉があります。過去の出来事は美化される傾向にあり、当時味わったはずの嫌な思い出は忘却の彼方へ飛んでいってしまいます。その結果、古き良きなんて言葉が出てきます。今回紹介するWindows 95 UI Kitはその名の通り、Windows 95風のUIをWebブラウザ上に再現できるCSSデザインです。## ...

List

  • 2019/09/09

GoodTwitter - Twitterを見慣れたUIに戻す

どんなものでも慣れが存在します。よりいいものを目指していたとしても、かつての仕組みに慣れてしまった人にとっては使いづらく感じるものです。その変化がダイナミックであればあるほど、反発も大きくなるでしょう。TwitterのUIが大きく変わりましたが、それが嫌な人はGoodTwitterを使ってみましょう。元のUIに戻してく...

List

  • 2019/07/10

oldTerminal - Web上で昔懐かしいターミナルの画面を再現

開発者にとってターミナルは切っても切り離せない存在です。もしターミナルがなかったら仕事にならないという人も多いですし、Windowsのターミナルが新しくなることで生産性が向上する人も多いのではないでしょうか。そんなターミナルの画面をWeb上に再現するのがoldTerminalです。名前の通り、古いターミナルの画面です。...

List

  • 2019/07/04

Scene.js - JavaScriptでタイムラインベースのアニメーション

アニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。## Scene.jsの使い方JavaScr...

List

  • 2019/06/13

CSS-Only Chat - JavaScriptを使わないWebチャット

技術の凄さを感じるのはどんな時か。一見すると無理と思えるようなことを実現できてしまっている時もその一つです。最近では機械学習を用いて粗い映像を高画質化するプロジェクトもあります。SFと思わんばかりの世界が実現しようとしています。今回紹介するCSS-Only Chatもすごいです。JavaScriptを使わずにリアルタイ...

List

  • 2019/05/30

Simplify Gmail - GmailのUIをすっきりシンプルに

アプリケーションのUIはとても大事で、その見た目次第でやる気になったり、逆に削がれたりします。大事なのは不要な要素を省き、作業に集中できる環境を作り出すことです。かといってあまりなくすと機能があることにも気付いてもらえなくなるのでバランスが重要です。今回紹介するSimplify GmailはGmailのUIをシンプルに...

List

  • 2019/05/23

IsometricSass - CSSだけで実現する3Dライブラリ

Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現でき...

List

  • 2019/05/23

FullScreen Slider - アニメーションしながらコンテンツを切り替え

SPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。そうしないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。今回紹介するFullScreen Sliderもそんなスクロール用ライブラリです。表示範囲全体をスライドさせ...

List

  • 2019/05/20

Uix Kit - 120を超えるコンポーネントが用意されたBootstrap互換のUIキット

Webデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。しかし、このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。そういった点においてBootstrapの汎用性は高く、利用者も多いのです。しか...

List

  • 2019/05/16

Remix Icon - 小さめな表示にぴったりなSVGアイコン

アイコンはWebサイトのデザイン、特徴によって雰囲気に合わせて選ばなければなりません。そのため、一つのアイコンセットを知っていれば良いのではなく、様々なものを見ておくと良いでしょう。フォントと変わらない存在です。そんなアイコンセットとしてRemix Iconを紹介します。小さめのアイコンで、控えめなデザインが特徴です。...

List

  • 2019/05/13

SakubunCSS - 作文用紙風CSS

Web上の文章などは横書きが多いですが、日本語は本来縦書きのために作られています。それだけにWeb上であっても縦書きで文章を公開したいと考えている人は多いでしょう。アラビア語などは右から表示されるのに、日本語にしても横書きのままなのは気になります。そこで使ってみたいのがSakubunCSSです。振り仮名まで含めて日本語...

List

  • 2019/05/11

Water.css - 読み込むだけでちょっと綺麗なデザインに

Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。## ...

List

  • 2019/04/28

Twemoji-Picker - Twitterの絵文字Twemoji用ピッカーライブラリ

絵文字はテキストで送るよりも感情豊かになったり、感情がぶつからないように緩衝材として使うことができます(逆もありますが)。そんな絵文字をオープンソースとして公開しているのがTwitterで、Twemoji

List

  • 2019/04/14

natUIve - UIコンポーネントが多数揃ったCSSフレームワーク

WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...

List

  • 2019/04/09

Hello, Goodbye - Webチャットウィンドウを消す

個人的にこれは欲しかった。最近、多くのWebサイトで導入されているチャットシステム。利用者はそこそこいると聞いたことがありますが、個人的には全く使ったことがありません。それだけに勝手にメッセージが幾つも出てくるのはうざったいと感じています。同じように邪魔だと思っていた方に使ってみて欲しいのがHello, Goodbye...

List

  • 2019/03/12

RTS - レスポンシブにテキストサイズを変える

レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。## RTSの使い方B...