デザイン - CSSの記事一覧
Mastodon Deck-Like Style - MastodonをTweetDeck風にするスタイルシート
MastodonをTwitterと使い分けている人が増えています。よりオフィシャルな内容はTwitterで、プライベートな会話はMastodonといった具合です。そこで大事になるのがUIです。使い勝手が異なるとストレスを感じてしまいます。そこで使ってみたいのがMastodon Deck-Like Styleです。普段T...
gitmoji - Gitのコミットメッセージに絵文字を使う
絵文字はテキストで書くよりも分かりやすく、多くの情報を含められます。言葉で書くと問題になりそうなことも、絵文字を使うことで回避できる場合もあるでしょう。チャットだけでなく、利用される場面が増えています。そんな絵文字をGitのコミットメッセージに使っていこうというのがgitmojiです。## gitmojiの使い方git...
Zendesk Garden - Zendeskで使われているデザインコンポーネント
Zendeskと言えばWebベースのサポートデスクを提供するクラウドサービスですが、他にも様々なビジネス用サービスを提供しています。彼らのサービスは業務用ながらも旧来とは異なるデザインで使い勝手が良いのが特徴です。デザインポリシーも従来のものとはまったく違うのでしょう。そんなZendeskの各サービスで使われているデザ...
SimpleBar - ページ内スクロールをサポートする軽量ライブラリ
Web上でダッシュボードなどを提供すると、様々な情報をまとめて表示しなければなりません。何も考えずに表示してしまうと、縦スクロールがすごいことになるでしょう。そこでページ内のコンポーネントごとにスクロールがあると便利です。SimpleBarはそんなページ内スクロールを提供するライブラリです。依存性もなく簡単に使えるのが...
CssGitHubWindows - GitHubにWindowsのデザインを適用したら…
GitHubがMicrosoftによって買収されたことによってどんな変化が起きるのか心配している人は多数います。無茶なことはしないと思いますが、それでも緩やかな変化は起こるかも知れません。もしかしたらこんな変化が起きるかも、というのがCssGitHubWindowsです。ジョークですが、意外と良くできています。## C...
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...