高品質な CSS を書く助けになるツール「Nozomi」を作った - I'm kubosho_
2015-06-29 高品質な CSS を書く助けになるツール「Nozomi」を作った CSS Gulp 登壇 リポジトリは kubosho/nozomi です。 JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。 その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。 どんなツールか 書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。 具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。 Autoprefixer ベンダープレフィックスを自動的に追加 CSSComb プロパティの順番を設定ファイルをもとに並び
楽しく役に立つCSSのプロファイリング | POSTD
私はここ最近、いわゆるシングルページWebアプリケーションのパフォーマンスの最適化に取り組んでいます。そのアプリケーションは非常に動的かつインタラクティブで、新しいCSS3の利点が詰め込まれたものです。単に角丸やグラデーションの効果にとどまらず、影やグラデーション、要素の変形がふんだんに使われており、加えてtransition効果（時間的変化）や多彩な半透明色、疑似要素をベースにしたCSSの巧妙なトリック、それに実験的なCSSの特徴がちりばめられています。 分析する際には、Javascript/DOM側のボトルネックだけではなく、CSSの領域にも踏み込んでみました。上に挙げたすばらしいUIの要素が、パフォーマンスにどのような影響を及ぼしているかを見たかったからです。このアプリケーションのベースにあるJavascriptのロジックは以前（表面的な装飾のないバージョン）からさほど変わってはいま
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
「StyleStats」を活用してCSSを評価する、Evaluating CSS─Frontrend Conference
「StyleStats」を活用してCSSを評価する、Evaluating CSS─Frontrend Conference 石本 光司（Kaizen Platform, Inc...） 本記事は、2015年2月21日に行われたFrontrend Conferenceの「Evaluating CSS」の内容を紹介します。 はじめに こんにちは、@t32kです。今日はEvaluating CSSというタイトルでCSSの解析ツール、StyleStatsに関して説明したいと思います。ちなみにEvaluateというのは『評価する、価値を見極める』といった意味の単語です。 宣伝ですが、今年からFrontend Weeklyという無料のメールマガジンというか、海外の役立つリソースを紹介するウィークリーメールをやってますので、こちらも登録いただけると大変私嬉しいです。 なぜCSSはそんなに難しいのか？ で
ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
JavaScriptとCSSによるアドベンチャーゲームの作成（JavaScript, DHTML, CSS, スタイルシート） : CodeZine
はじめに 小さなミニゲームの場合、画像を動かし文字を表示することができれば、ある程度は満足のいくものを作ることができますが、より本格的なゲームを開発する場合はそう簡単ではありません。 例えばアニメーションであれば、アニメーションGIFファイルを使ったり、実行時にImageオブジェクトを連続して変更するという方法が考えられます。しかし、フェードイン／フェードアウトを行うのに、全てのイメージに対して専用のアニメーションを作ることはあまりにも馬鹿げています。 そこで本稿では、よりゲームらしい高度な演出をスクリプトで実現する方法を、JavaScriptを使って説明します。filterオブジェクトとフィルタ効果 前回、JavaScriptとCSSによるブロック崩しの作成で、スタイルシートを使った絶対座標によるオブジェクトの配置を解説しましたが、さらにスタイルシートを使って高度な演出を実現することがで
覚え書き@kazuhi.to: Chris Casciano氏の選んだCSSティップス10選
Chris Casciano氏の選んだCSSティップス10選 Chris Casciano氏が「Ten Simple CSS Tips」という記事のなかで、知識レベルを問わずスタイルシートを書く誰にとっても便利であろう10のヒントを公開していました。個人的にナルホドと思った部分があったし、もしかすると参考になると思う人もいるかもしれないので、以下に訳文を晒しますね。原文はCreative Commonsライセンスでしたが、一応Chris本人から訳文掲載の許可も得ています。あーちなみに例によって英語は苦手なので（おい）、誤りとかあったら指摘してください＞誰 スタイルを適用し始める前に、文法チェックによりマークアップを妥当なものにしましょう。 基本となるスタイルシートは* {margin:0; padding:0; }という規則集合で書き始め、（マージンやパディングは）それが必要な箇所に必要な
ちょっとしたメモ - 輝度比による文字色と背景色のコントラスト評価
先日登場した11月23日付のWCAG 2.0草案に、文字色と背景色のコントラストを評価するための新しい方法が組み込まれたので、色の組み合わせチェックにも試験的に採用してみた。このアルゴリズムは、ガンマ補正を踏まえたHDTVの輝度信号の算出式を応用しているらしいことは分かったものの、今ひとつ基準値などの根拠が判然としなかったのだが、どうやらこれはWCAG2.0のエディタの一人である、Gregg Vanderheidenらが考案したものらしい。 Gez Lemonの記事 Luminosity Contrast Ratio Algorithm によると、GreggらTrace R&D Centerのメンバーが、従来のWCAG草案でも参考として示していたAERTの「色の差」によるコントラスト評価法に代わる方法としてこのLCRを案出したということだ。AERTはYIQのYを「明るさ」（brightne
Nifty Corners
Nifty Corners: rounded corners without images By Alessandro Fulciniti Update This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
牛蒡 無題