Zendesk Garden - Zendeskで使われているデザインコンポーネント
Zendeskと言えばWebベースのサポートデスクを提供するクラウドサービスですが、他にも様々なビジネス用サービスを提供しています。彼らのサービスは業務用ながらも旧来とは異なるデザインで使い勝手が良いのが特徴です。デザインポリシーも従来のものとはまったく違うのでしょう。 そんなZendeskの各サービスで使われているデザインをオープンソース化したのがZendesk Gardenです。 Zendesk Gardenの使い方 スクリーンショット多めで紹介します。まずはアイコン。 文字だけ出すSVGというのも新しいですね。 チャットやガイドなどサービスごとのアイコンと文字のセット。 アバター。 ボタン。 コールアウト。 アラート。 チェックボックスとトグルボタン。 縦型のアイコンメニュー。 ヘッダー。 タグなど。 グリッド。 メニュー。 メニューにアイコンを付けることもできます。 モーダル。 ペ
CSS Grid Highlighter for Chrome - CSS Gridをハイライト表示するChrome機能拡張
レスポンシブWebデザインの広がりに合わせて利用が広がっているのがグリッドベースのデザインです。そんな中、ついに登場したのがCSS Gridになります。Web標準だけで手軽にグリッドデザインが実現できるようになりました。 そんなCSS Gridもまだまだ普及していない技術だけに手探り感があります。そこで使ってみたいのがCss Grid Highlighter for Chromeになります。 Css Grid Highlighter for Chromeの使い方 Chrome機能拡張としてインストールします。 そうするとグリッドの設定がハイライト表示されるようになります。 複雑なデザインであっても（Aは横、Bは縦に二つ分です）分かりやすくなります。 さらに複雑なグリッド構成。 見た感じと実際の設定が異なる場合、ハイライト表示が役立ちます。 グリッド同士に幅がある場合の表示です。 CSS G
CrookedStyleSheets - CSSだけでユーザ行動をトラッキング
ユーザがどういった操作を行ったのか、それを知りたいと考える人は大勢います。Webの場合、JavaScriptを使うことで各イベントのトラッキングができます。しかしプライバシーを気にする方はJavaScriptをオフにすることでそれを防げます。 そんな中にあってもトラッキングできる技術がCrookedStyleSheetsになります。 CrookedStyleSheetsの使い方 例えばマウスオーバーします。 さらに入力フォームでtestと入力すると緑になるイベントもあります。 そうした行動がすべてトラッキングされています。 CrookedStyleSheetsはCSSを使っています。マウスオーバーなどのイベントによってcontentを追加しているのですが、この時にURLを指定してPHPを読み込んでいるのです。トリッキーですが、これでトラッキングできてしまうのがすごいです。
Mocka - モックアップの作成に使えそうなplaceholder
Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。 そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供します。 Mockaの使い方 実際に使う時のHTMLです。 <div class="mocka-container"> <span class="mocka-media"></span> <span class="mocka-heading"></span> <span class="mocka-text"></span> </div> こうすると表示が次のようになります。 四角いグレーの枠ですが、なんとなくそれっぽく表示されているのが分かります。画像部分はアニメーションしな
Mobi.css - モバイルファーストなCSSフレームワーク MOONGIFT
最近ではモバイルファーストというのも当たり前になっています。まずタブレットやスマートフォン向けに最適化されていれば、デスクトップ向けに考える時にも情報が整理された状態から考えられます。逆からは情報を削除する必要があり、ストレスです。 今回紹介するMobi.cssはまさにモバイル用のCSSフレームワークとなっています。 Mobi.cssの使い方 それほど多くのデザインに対応しているわけではありませんが、まずは定番のグリッド。 グリッドを使うとこんな会話型のインタフェースも作れます。 テーブル。上下へのスクロールはもちろん、右側にもスクロールできます。 フォーム。 長い文章をスクロールしながら表示する例。縦に長いデータを表示する際に使えます。 Mobi.cssはモバイル向けのフレームワークですが、デスクトップに対しても十分利用できます。サイズはGZip後で3.6KBとなっています。カスタマイズ
Kissui.scrollanim - CSS3/JavaScriptによるスクロールアニメーション MOONGIFT
SPA（シングルページアプリケーション）で効果的なのがスクロールに伴うアニメーションです。ページ全体が長くなりがちなので、アニメーションを盛り込むことで変化をつけられるようになります。 今回紹介するKissui.scrollanimはCSS3ベースのアニメーションライブラリになります。高速でスムーズなアニメーションが実現できるでしょう。 Kissui.scrollanimの使い方 Kissui.scrollanimはHTMLタグで指定できます。 <p data-kui-anim="fadeIn">Show this with fade-in</p> 実際のスクロールをしているところです。 Kissui.scrollanimではコンテンツが徐々に出現したり、バウンドする、大きさを変えるといったようなアニメーションがHTMLだけで簡単に指定できます。後はスクロールをJavaScriptが検知し
driveway - CSSだけで作られたMasonry
Pinterestで表示で一躍人気になったのがMasonryと言われる表示です。幅は固定しつつ、高さをずらして表示することで変化による印象付けを与えられます。女性向けのメディア、写真を多用するサイトで使われています。 多くがJavaScriptを使って表現するのですが、今回紹介するdrivewayはCSSだけで実現されています。 drivewayの使い方 デモの表示です。JavaScriptはオフになっています。 CSS3のアニメーションを使うことでフリップしたり、マウスフォーカスを実現しています。 drivewayが便利なのはJavaScriptがオフであっても利用できることです。もちろん、JavaScriptが自動的に行っていた部分は調整する必要があるかも知れません（画像の高さを予め割り当てるなど）。しかしdrivewayの方がデザイナーの方にとってはカスタマイズしやすく、使いやすいの
Spectre.css - 軽量で機能多数のWebデザインフレームワーク MOONGIFT
WebのデザインフレームワークというとすぐBootstrapやFoundationなどが挙がります。企業の管理画面などであれば良いのですが、よくあるフレームワークには臭いが感じられてしまうのが難点です。 そこで、という訳ではないですが他のフレームワークを使うことでオリジナリティを出してみてはいかがでしょう。今回は軽量なSpectre.cssを紹介します。 Spectre.cssの使い方 スクリーンショット多めで紹介します。まずはタイポグラフィ。 アジア系（日本含む）フォントのサポートも想定されています。 リスト。 テーブル。 ボタン。 ボタングループ。 フォーム。 インプットグループ。 メディア。 グリッド。 ナビゲーションバー。 何もない時の表示、なんて表示も。 アバター。 チップ。アイコン付きも。 自動補完系の表示例。 ツールチップ。 バッジ。 通知。 メニュー。 パンくず。 タブ。
Cutestrap - 8KBの軽量CSSフレームワーク
BootstrapやFoundationといったCSSフレームワークはフル機能が実装されており、便利な反面、融通が効きづらかったり、サイズが大きかったりします。かといってごくシンプルなものを使ってほぼ自作というのも面倒です。 そこで使ってみたいのがCutestrapです。定義としてはnormalize.cssとBootstrap/Foundationの間とのことです。 Cutestrapの使い方 スクリーンショットで紹介します。まずはフォーム。 ボタン。 グリッド。 タイポグラフィ。 後はユーティリティ用のクラス（非表示にしたり、文字寄せしたり）がある程度です。機能は多くありませんが、サイズが8KB程度で軽量です。ちょっとしたサイトであればCutestrapで作成できそうですね。 CutestrapはCSS製のオープンソース・ソフトウェア（MIT License）です。 Cutestrap
Material Kit - Bootstrapをベースにしたマテリアルデザインフレームワーク MOONGIFT
マテリアルデザインが人気です。単なるフラットなデザインだとどこがボタンなのか、さらにクリックした時の反応がないためアクションを起こしたのかどうかも分かりづらいと言った問題があります。マテリアルによって反応が得られるようになればユーザビリティが高くなるでしょう。 そこでBootstrapに対してマテリアルデザインを適用できるのがMaterial Kitです。雰囲気もがらっと変わるでしょう。 Material Kitの使い方 ボタンのデザイン。 マテリアルなのでマウスオーバー、クリック時にアニメーションが行われます。 リンク。 インプット。 チェックボックスやラジオボタン。 メニュー。 こういったナビゲーションメニューが作れます。 アイコン付きのタブ。 プログレスバー。 通知。 タイポグラフィ。 イメージの表示方法も多数用意されています。 モーダル。 ポップオーバー。 カレンダーを使った日付ピ
hack.css - ハッカー用のCSSフレームワーク MOONGIFT
CSSフレームワークがたくさん出ています。それぞれにコンセプトがあり、サイトの雰囲気に合わせて選択するのが良いでしょう。Bootstrapが人気ですが、何でもBootstrapが良いという訳ではありません。 もし開発者らしいサイト、プロジェクト用のページを立ち上げるならばhack.cssはいかがでしょうか。ハッカー用のシンプルなCSSフレームワークです。 hack.cssの使い方 全体の雰囲気です。Markdown風に書かれています。 グリッド。 フォーム。 ログインフォーム。 テーブル。 ボタン。 カード。 アラート。 メディア。 ローディング。 ハッカーらしく、ブラック主体のテーマも用意されています。 hack.cssはシンプルなCSSフレームワークと謳っていますが、機能が不足している訳ではありません。メディア表示やアラートなど、一通りの機能は揃っています。後はこの雰囲気に合わせて追加
Keen-UI - マテリアルデザインのUIコンポーネント集
デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。 今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを紹介します。 Keen-UIの使い方 スクリーンショットを多めに紹介します。まずはアラート。 入力補完。 アイコン付きの入力補完。 ボタン。 チェックボックス。 折りたたみ。 確認ダイアログ。 フローティングのボタン。 アイコンボタン。 アイコン。 メニュー。 モーダル。 ポップオーバー。 ローディング。 ラジオボタン。 ラジオグループ。 レーティング。 Keen-UIはUIコンポーネントなので、他のデザインフレームワークと組み合わせて使うのが基本になります。デザインに統一
HTML見出しにCSSのみで本の目次のような連番を振る方法
見出し要素に連番を振る方法 例えばHTML見出しのh2には、「1、2、3…」と連番を振っていき、h3見出しには「1.1、1.2、1.3…」もしくは「2.1、2.2、2.3…（h2の連番が2だった場合）」といったように番号を振るにはCSSで以下のように書きます。 /************************************ ** h2-h6の見出し要素に連番を振る ************************************/ .entry-content h2{ counter-increment: counter-h2; counter-reset: counter-h3; } .entry-content h2:before{ content: counter(counter-h2); margin-right: 0.6em; } .entry-content
css-keyframer.js - CSS3のスタイル設定を使ったキーフレームアニメーション MOONGIFT
アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化（または移動）を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。 今回紹介するcss-keyframer.jsはそんなキーフレームアニメーションをCSSのように指定できるソフトウェアです。 css-keyframer.jsの使い方 デモです。JavaScriptの中にCSS風にアニメーションを指定しています。複数のエフェクトが指定できます。 実際のアニメーションです。形を変えつつ、回転しつつ、さらに色が変わります。 css-keyframer.jsではCSS3で指定できるスタイル設定を、時間を変化させながら適用できます。例えば四角がいきなり角丸になるのではなく、徐々に変化していくことでユーザの目を引く
awsm.css - 標準タグのみを使った綺麗なデザインフレームワーク MOONGIFT
HTMLタグにはそれぞれに意味があります。その意味を活かしたデザインを行うことで、SEOのようにコンピュータはもちろんスクリーンリーダーなどでも使いやすいコンテンツに仕上がります。 しかし多くの場合、デザイン上の理由で全く関係のないタグが使われることがあります。そこで使ってみたいのがawsm.cssです。 awsm.cssの使い方 awsm.cssはクラスの指定もない、準ず否HTMLタグだけをデザインするフレームワークです。 まずはトップページ。 リスト。 テーブル。 インラインの装飾。 メディア。 フォーム。 awsm.cssはタグに余計な設定はいりませんので、プロトタイプなどを作る際に重宝しそうです。デフォルトのタグに設定が追加されてしまうので、細かいカスタマイズをしようとすると予定していなかった設定が入ってきてしまうかも知れません。 awsm.cssはCSS製のオープンソース・ソフト
Shine CSS Framework - ビビッドなカラーリングが特徴のCSSフレームワーク MOONGIFT
CSSフレームワークは多数ありますが、どうしても色が感じられるようになってしまいます。なんとなくBootstrapで作っただろうなと言うサイトは分かるはずです。便利だけど、あまり使われているものは避けたいと考えるのではないでしょうか。 今回は新しいCSSフレームワーク、Shine CSS Frameworkを紹介します。使っている人が少なければ、それっぽさを感じないで済みそうです。 Shine CSS Frameworkの使い方 スクリーンショット多めで紹介します。まずはグリッド。レスポンシブ対応です。 ボタン。 フォーム。 テーブル。 リスト。 テキスト。 スペース。 カラー。かなりビビッドです。 Shine CSS Frameworkを使うとこんな感じに作れるようです。 Shine CSS Frameworkはごく基本的なデザインだけを提供しています。細かな装飾については自作することに
RichCSS - 再利用性の高いスタイルシートを作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CSSはなんとなく書いてもそれなりに表示できてしまうため、適切に運用し続けるのが難しい技術です。企業によって様々なルールがあり、正解もなかなか見つかりません。むしろ一定の法則に載ってしまう方が楽と言えます。 今回紹介するRichCSSもそんなスタイルシートフレームワークの一つになります。デザインフレームワークではないので、RichCSSの法則に則って書くことで運用を楽にするというコンセプトです。 RichCSSの使い方 RichCSSはコンセプトに近いものであり、それを補助するCLIツールが出ています。初期化コマンドでCSSまたはSCSSに沿ったベールファイルが生成されます。 $ richcss init scss create box create elements create
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーの作業効率アップ、CSS情報を解析する拡張機能「CSS Peeper」 | ライフハッカー・ジャパン
マウスを乗せた部分のCSSを確認できる拡張機能「CSSViewer」 | ライフハッカー・ジャパン
CSSの効きをクールに表示するサイト「Visualising CSS selector matches」 | ソフトアンテナ
