デザイン - CSSの記事一覧
Micron.js - CSSアニメーションをJavaScriptで制御
CSS3によってアニメーション機能が強化されています。JavaScriptで動きを書かなくて良くなっているのは良いことですが、それでもユーザ操作を受けて動かしたり、より細かく制御するためにはJavaScriptの存在は欠かせません。そこで使ってみたいのがMicron.jsです。CSSアニメーションをJavaScript...
BoxIcons - シンプルで使いやすいアイコンセット
テキストによる説明よりもアイコンの方が分かりやすいケースは多いです（逆もありますが）。アイコンは言語を超えて使えるので、多言語対応しなければならない場合にもほぼ同じものが使えます。今回は400を超えるシンプルなアイコンセットを提供するBoxIconsを紹介します。## BoxIconsの使い方一例です。単色で分かりやす...
GitHub XP - GitHubをWindows XP風に
GitHubがマイクロソフトに買収されました。かつてのマイクロソフトとは違うとはいえ、Skypeのことを思うと一抹の不安を拭えずにはいます（CEOも代わるので）。今後数年は色々あるかも知れません。そんなGitHubをWindows XPにしてしまうデザインテーマがGithub XPです。## Github XPの使い方...
TODC Bootstrap - Google風のBootstrapテーマ
Bootstrapの良いところは簡単にある程度デザインが整ったサイトが作れるだけではありません。多彩なテーマが作られていることで、あっという間にサイトの雰囲気を変えられるのも魅力です。今回はそんなテーマの一つ、TODC Bootstrapを紹介します。Google風なサイトが作れるBootstrapテーマです。## T...
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...
Vivify - 多彩なパターンのCSSアニメーションライブラリ
Webアプリケーションが多機能化するのに合わせてアニメーションは欠かせない要素になってきています。ユーザがボタンを押した時、エラーになった時などアニメーションによってユーザビリティが大幅に変わってきます。そんなユーザ操作の結果などに使いたいCSSアニメーションライブラリがVivifyです。## Vivifyの使い方Vi...
Twemoji Awesome - Twitter風の絵文字デザイン
メンテナンスを停止していますが面白いのでご紹介。Font Awesomeはフォントアイコンの地位を一気に有名にしました。多くのアイコンが登録されており、Webサイトやアプリ開発用途において、ほぼ問題ないレベルになっています。そんなFont Awesome風にTwitterが提供するアイコンデザインをCSS化したのがTw...
blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ
一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...
CSS ICON - ピュアなCSSだけで作られたアイコンセット
アイコンセットはいくらあっても便利です。昔は小さな画像の集まり、その後はCSSスプライト、そして最近ではアイコンフォントを使うパターンが多くなっています。アイコンフォントは便利ですが、読み込みに失敗するとトウフだらけになってしまうのが難点です。そこで使ってみたいのがCSS ICONです。ピュアなCSSだけで作られたアイ...
Shards - Bootstrap4に対応したデザインテーマ
Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。ということでテーマも新しいものに乗り換える必要がありま...
Image Glitch Effect - ホラー映画風のグリッチ効果を演出
ホラー映画などで、映像に突然ノイズが入って乱れるという効果がありますが見たことはあるでしょうか。映像の不安定さによって感情も不安になり、何か起こるのではないかと心配になってしまいます。そんなグリッチ効果をスタイルシートだけで実現できるのがImage Glitch Effectです。## Image Glitch Eff...
Arakawa Template - シンプルで実用性の高いWebテンプレート
Webデザインは多彩ですが、多くの機能は他のWebデザインでも使われているものです。例えばレスポンシブWebデザインへの適用は大抵のWebサイトで実現されており、イチから作る必要はないでしょう。WebデザインもDRYの考えが大事です。そこで使ってみたいのがArakawa Templateです。汎用的なWebサイトテンプ...
CrookedStyleSheets - CSSだけでユーザ行動をトラッキング
ユーザがどういった操作を行ったのか、それを知りたいと考える人は大勢います。Webの場合、JavaScriptを使うことで各イベントのトラッキングができます。しかしプライバシーを気にする方はJavaScriptをオフにすることでそれを防げます。そんな中にあってもトラッキングできる技術がCrookedStyleSheets...
emoji-awesome - 絵文字版Font Awesome
Font Awesomeを使うと手軽にアイコンを差し込めるとあって利用者はとても多いです。最近よくある単色系のモダンなWebページを作ろうと思ったらとりあえず入れておくという方も多いのではないでしょうか。そんなFont Awesomeの絵文字版を目指すのがemoji-awesomeです。JavaScriptは使わず、ク...
Slide Presentation Framework - HTMLスライドのフレームワーク
HTMLでプレゼンテーションを作るケースが増えています。HTMLであれば専用のソフトウェアを使わずに済み、バージョン管理も簡単です。さらにアニメーションなどは難しい分、逆にコンテンツに集中できるのが利点です。最近ではMarkdownベースのものが増えていますが、今回紹介するSlide Presentation Fram...
Slack Black Theme - Slackアプリを黒ベースのデザインに
コミュニケーションツールは一日に目にする機会の多いサービスと言えます。それだけに目を刺激しない、低刺激なデザインやカラーリングになっていると嬉しいでしょう。現在最も使われているであろうSlackについてはどうでしょう。プログラミングエディタは黒ベースなのに、Slackが白ベースだと目が痛くなってきます。そこで使ってみた...
o-grid - グリッドだけ提供するCSSライブラリ
最近のレスポンシブWebデザインを支えるのはグリッドデザインです。画面幅を幾つかに分割し（大抵12個が多いですが）、画面幅によってその内幾つのブロックを横に並べて表示するかを決定します。多彩なUIフレームワークと共に提供されることが多いですが、今回はごく基本的なグリッド機能だけ提供するo-gridを紹介します。## o...
Mavo - Webアプリケーションを作る新しいアプローチ
最近、ReactやVueなどのビューエンジンに人気が集まっています。双方向更新が可能で、データをアップデートすれば自動的にUI側も更新されます。これにより、DOM周りのステータス管理から解放されるようになります。今回紹介するMavoもビューエンジンですが、半分ロジックも加わったような作りになっています。## Mavoの...
mini.css - 小さくても多彩なUIを提供するスタイルシートフレームワーク
CSSフレームワークはたくさん存在します。それぞれにコンセプトがあり、使いやすいものを選択するでしょう。特にUIパターンが多いものはデザイン的に統一感が出やすく、場当たり的に素材を探さずに済むので重宝します。今回はそんな多数のUIを揃えたCSSフレームワーク、mini.cssを紹介します。## mini.cssの使い方...
ColorMe - Webブラウザ上で色の調整
色を生み出すというのは大変なことです。ぴたりと当てはまる色がすぐにできあがれば良いですが、そうそう簡単にできるものではありません。だいたいの色を決め、そこから徐々に絞り込んでいくのが良いのではないでしょうか。そんな色の作成作業をサポートしてくれるのがColorMeです。様々な要素を使ってベースになる色を変化させられます...