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

デザイン - CSSの記事一覧

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

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

もっと見る

List

  • 2018/12/15

NES.css - ファミコン風サイトになるCSS

コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。...

List

  • 2018/12/02

Gmail Classic - Gmailのデザインを旧来のものに戻す

ソフトウェアの進化は決して悪いものでもありませんが、使い慣れてしまっていると従来の手法が使えなくなって生産性が落ちてしまうことがあります。Webサービスの場合、多くは強制的なアップデートであり、古いバージョンを使い続けられないのが不便です。今回紹介するGmail Classicは新しくなったGmailのUIを以前のもの...

List

  • 2018/12/01

Clock Shop - JavaScript/CSSを使ったすごい時計たちを陳列

世の中には時計が好きという方がたくさんいます。時間くらいスマートフォンで見られる一方、手首にする腕時計にこだわる方は多いです。ウォッチフェイスにもこだわりがあり、デジタルで任意の変更できるものの場合、テーマを入念に選ぶ人もいます。そんな時計好きに送りたいのがClock Shopです。時計店といってもECではありません。...

List

  • 2018/11/12

The Every Day Calendar - 日々タスクを達成し続けるカレンダー

ロボットやIoTといった分野で活躍しているSimone Giertzさん。口紅を塗ったり、頭を叩いて起こしたりとロボットとプログラミングを組み合わせて楽しい動画を公開しています。そんな彼女が作った毎日のタスク達成を記録するガジェットがThe Every Day Calendar

List

  • 2018/10/13

Mastodon Deck-Like Style - MastodonをTweetDeck風にするスタイルシート

MastodonをTwitterと使い分けている人が増えています。よりオフィシャルな内容はTwitterで、プライベートな会話はMastodonといった具合です。そこで大事になるのがUIです。使い勝手が異なるとストレスを感じてしまいます。そこで使ってみたいのがMastodon Deck-Like Styleです。普段T...

List

  • 2018/10/03

gitmoji - Gitのコミットメッセージに絵文字を使う

絵文字はテキストで書くよりも分かりやすく、多くの情報を含められます。言葉で書くと問題になりそうなことも、絵文字を使うことで回避できる場合もあるでしょう。チャットだけでなく、利用される場面が増えています。そんな絵文字をGitのコミットメッセージに使っていこうというのがgitmojiです。## gitmojiの使い方git...

List

  • 2018/09/08

Zendesk Garden - Zendeskで使われているデザインコンポーネント

Zendeskと言えばWebベースのサポートデスクを提供するクラウドサービスですが、他にも様々なビジネス用サービスを提供しています。彼らのサービスは業務用ながらも旧来とは異なるデザインで使い勝手が良いのが特徴です。デザインポリシーも従来のものとはまったく違うのでしょう。そんなZendeskの各サービスで使われているデザ...

List

  • 2018/09/08

SimpleBar - ページ内スクロールをサポートする軽量ライブラリ

Web上でダッシュボードなどを提供すると、様々な情報をまとめて表示しなければなりません。何も考えずに表示してしまうと、縦スクロールがすごいことになるでしょう。そこでページ内のコンポーネントごとにスクロールがあると便利です。SimpleBarはそんなページ内スクロールを提供するライブラリです。依存性もなく簡単に使えるのが...

List

  • 2018/07/28

CssGitHubWindows - GitHubにWindowsのデザインを適用したら…

GitHubがMicrosoftによって買収されたことによってどんな変化が起きるのか心配している人は多数います。無茶なことはしないと思いますが、それでも緩やかな変化は起こるかも知れません。もしかしたらこんな変化が起きるかも、というのがCssGitHubWindowsです。ジョークですが、意外と良くできています。## C...

List

  • 2018/07/19

Micron.js - CSSアニメーションをJavaScriptで制御

CSS3によってアニメーション機能が強化されています。JavaScriptで動きを書かなくて良くなっているのは良いことですが、それでもユーザ操作を受けて動かしたり、より細かく制御するためにはJavaScriptの存在は欠かせません。そこで使ってみたいのがMicron.jsです。CSSアニメーションをJavaScript...

List

  • 2018/07/16

BoxIcons - シンプルで使いやすいアイコンセット

テキストによる説明よりもアイコンの方が分かりやすいケースは多いです(逆もありますが)。アイコンは言語を超えて使えるので、多言語対応しなければならない場合にもほぼ同じものが使えます。今回は400を超えるシンプルなアイコンセットを提供するBoxIconsを紹介します。## BoxIconsの使い方一例です。単色で分かりやす...

List

  • 2018/06/24

GitHub XP - GitHubをWindows XP風に

GitHubがマイクロソフトに買収されました。かつてのマイクロソフトとは違うとはいえ、Skypeのことを思うと一抹の不安を拭えずにはいます(CEOも代わるので)。今後数年は色々あるかも知れません。そんなGitHubをWindows XPにしてしまうデザインテーマがGithub XPです。## Github XPの使い方...

List

  • 2018/06/22

TODC Bootstrap - Google風のBootstrapテーマ

Bootstrapの良いところは簡単にある程度デザインが整ったサイトが作れるだけではありません。多彩なテーマが作られていることで、あっという間にサイトの雰囲気を変えられるのも魅力です。今回はそんなテーマの一つ、TODC Bootstrapを紹介します。Google風なサイトが作れるBootstrapテーマです。## T...

List

  • 2018/06/11

PatternFly - Red Hat製のWeb UIフレームワーク

HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...

List

  • 2018/05/05

Vivify - 多彩なパターンのCSSアニメーションライブラリ

Webアプリケーションが多機能化するのに合わせてアニメーションは欠かせない要素になってきています。ユーザがボタンを押した時、エラーになった時などアニメーションによってユーザビリティが大幅に変わってきます。そんなユーザ操作の結果などに使いたいCSSアニメーションライブラリがVivifyです。## Vivifyの使い方Vi...

List

  • 2018/04/25

Twemoji Awesome - Twitter風の絵文字デザイン

メンテナンスを停止していますが面白いのでご紹介。Font Awesomeはフォントアイコンの地位を一気に有名にしました。多くのアイコンが登録されており、Webサイトやアプリ開発用途において、ほぼ問題ないレベルになっています。そんなFont Awesome風にTwitterが提供するアイコンデザインをCSS化したのがTw...

List

  • 2018/04/15

blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ

一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...

List

  • 2018/04/13

CSS ICON - ピュアなCSSだけで作られたアイコンセット

アイコンセットはいくらあっても便利です。昔は小さな画像の集まり、その後はCSSスプライト、そして最近ではアイコンフォントを使うパターンが多くなっています。アイコンフォントは便利ですが、読み込みに失敗するとトウフだらけになってしまうのが難点です。そこで使ってみたいのがCSS ICONです。ピュアなCSSだけで作られたアイ...

List

  • 2018/03/26

Shards - Bootstrap4に対応したデザインテーマ

Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。ということでテーマも新しいものに乗り換える必要がありま...

List

  • 2018/02/22

Image Glitch Effect - ホラー映画風のグリッチ効果を演出

ホラー映画などで、映像に突然ノイズが入って乱れるという効果がありますが見たことはあるでしょうか。映像の不安定さによって感情も不安になり、何か起こるのではないかと心配になってしまいます。そんなグリッチ効果をスタイルシートだけで実現できるのがImage Glitch Effectです。## Image Glitch Eff...