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を読み込んでいるのです。トリッキーですが、これでトラッキングできてしまうのがすごいです。
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
Keen-UI - マテリアルデザインのUIコンポーネント集
デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。 今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを紹介します。 Keen-UIの使い方 スクリーンショットを多めに紹介します。まずはアラート。 入力補完。 アイコン付きの入力補完。 ボタン。 チェックボックス。 折りたたみ。 確認ダイアログ。 フローティングのボタン。 アイコンボタン。 アイコン。 メニュー。 モーダル。 ポップオーバー。 ローディング。 ラジオボタン。 ラジオグループ。 レーティング。 Keen-UIはUIコンポーネントなので、他のデザインフレームワークと組み合わせて使うのが基本になります。デザインに統一
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
chewing-grid.css - ダイナミックにレイアウトが変わるカードデザイン MOONGIFT
プロフィールページなどではユーザアイコンと名前、加えて簡単な説明をつけたカードタイプのレイアウトがよく使われます。ユーザに限らずGitHubのリポジトリリストや商品一覧ページなどでもカード型のレイアウトは便利に使えます。 そんなデザインを提供するのがchewing-grid.cssです。幅や並べる個数なども細かく指定できるグリッドレイアウトが実現します。 chewing-grid.cssの使い方 chewing-grid.cssのデモです。3つ並んでいます。 幅を変更しても3つのままです。 個数を変更しました。ダイナミックに表示が変わります。 実際に動かしているところです。 chewing-grid.cssはカラムの数、隙間、カラムの最小幅と最大幅をダイナミックに指定できます。デザインはレスポンシブになっているので幅が変わってもきちんと揃ったままになっています。 デザインフレームワークの中
Label.css - 画像の上にラベルを自在に配置 MOONGIFT
Webサイトを作っていて画像はよく使われます。さらに画像にはキャプションとして説明をつけてあげることでより分かりやすいものになります。説明がない画像は一見すると何のことか分からない場合もあります。 そこで使えるのがLabel.cssです。単に画像の下に説明をつけるだけでないキャプションの使い方ができるようになります。 Label.cssの使い方 一例です。縦、横ともに中央寄せ。 左下への配置。 右上。 中央の右寄せ。 さらに表示の仕方を変更できます。分かりづらいですがフロートで表示しています。 写真の上にキャプションを重ねることで、視点の移動が少なくなり、より訴求できるようになります。その場所も写真によって効果的な配置が考えられるでしょう。ブログやメディアサイトで積極的に使っていきたいソフトウェアです。 Label.cssはCSS3製のオープンソース・ソフトウェア（MIT License）
Clairvoyance - CSSカバレッジツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。 プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。 Clairvoyanceの使い方 Clairvoyanceを実行します。 $ clairvoyance --css path/app.css --html path/index.html --reporter clairvoyance-html HTMLとCSSファイルを指定して実行すると、結果のHTMLファイルが生成されます。 レポートです。使われているクラスは緑色に
Milligram - ミニマムで格好良いCSS3フレームワーク
CSSのフレームワークはたくさん出てきていますが、その目的は2つに分けて考えることができます。一つはBootstrap/Foundationのように大型で、すべての機能を提供してくれる統合的フレームワークです。 もう一つは小さくて軽量で、カスタマイズや独自拡張して使えるものにしていくタイプです。Milligramは後者の、小さなCSSフレームワークになります。 Milligramの使い方 MilligramはGzip圧縮してわずか2KBしかないCSSフレームワークです。すべてのサイトがこれ一つでこなせるとは思いませんが、ベースとしては十分な機能が揃っています。 まずはタイポグラフィ。 引用。 ボタン。 リスト。 フォーム。 テーブル。 グリッド。 コード。 Milligramはすっきりとしたデザインで見やすいかと思います。バッチやタブ、モーダルのようなWebサイトを作る上では欲しくなるであ
HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク·DiagnostiCSS MOONGIFT
DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower