指定したサイトのCSSを徹底的に解析してくれるサイト「CSS Stats」 | ライフハッカー・ジャパン
「CSS Stats」は指定したサイトのCSSを徹底的に解析してくれるサイトです。CSSで使われている要素数や色の数、フォントファミリーをはじめ、CSSの詳細度をグラフで表現してくれたり細部まで解析されます。 以下に使ってみた様子を載せておきます。まずCSS Statsへアクセスしましょう。解析したいサイトのURLを入力します。しばらくすると解析結果が表示されるのでチェック。 フォントや背景色に使われている色の一覧です。 CSSの詳細度（specificity）をグラフであらわしたものです。なるべくなだらかなグラフになるほうがよいそうです。CSSを見直す際のひとつの参考としてご活用ください。 CSS Stats （カメきち）
ColorBlender.com | Your free online color matching toolbox
To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated. You may swicth to Direct Edit mode to tweak or edit individual colors of your blend. Saved blends will be associated with your account if you signed in or stored in your browser cookies if you are not a member yet.
使われていないCSSを探す方法
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
スタイルシートをすっきりと見やすくしてくれる『styleneat』 | 100SHIKI
シンプルで素敵なツールだったのでご紹介。 styleneatはCSSファイルを見やすく整形してくれるツールだ。 これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。 またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。 スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか。
WatchReload.app - ウェブ開発者向けブラウザ自動リロード
ブラウザをリロードして欲しい時に勝手にリロードしてくれるウェブ開発者向けのMacOSX用アプリケーションです。 HTMLやCSSなどのファイル編集を監視し、保存と同時に今開いているブラウザのタブをリロードします。動作確認をするためにブラウザをリロードする手間が省きウェブ開発に快適さをもたらします。 対応するブラウザは、現在のところChromeとSafariです。 ダウンロード 使い方 CHANGELOG フィードバック 過去のビルド ダウンロード 以下のリンクからzipをダウンロードし、適当な場所に解凍すると使えるようになります。動作確認はMaxOSX Lionで行なっています。 WatchReload-0.0.1.app.zip 使い方 WatchReloadを起動すると、メニューバーにWatchReloadのメニューが表示されるようになります。 メニューからStart Watching
【特集】業務で使える！ 無料Webサイト作成ツール集（1/3） － ＠IT
上記ツールの詳細や、ほかのさまざまな無料Webサイト作成ツールについて知りたい読者は本稿に併せて、連載「どこまでできる？ 無料ツールでWebサイト作成」もぜひご参照ください。 Webサイト開発はテキストエディタだけで行えるのか？ ■ 今後もWebサイト開発にHTMLコーディングは必要なのか？ Web標準にのっとった制作、CSSによるレイアウト、Ajaxなど、HTMLとCSS、JavaScriptなどで実現可能なことは意外と多いものだ。その中でも、特にAjaxはこれまでシステム開発をしてきたプログラマが得意とする部分だろうし、世の中のデザイナーには、デザインだけではなくこれからはHTML制作に進もうと考えている人もいることだろう。 こういったことから、たとえ世の中がリッチなコンテンツ、Web 2.0、CMSという方向に進んでいったとしても、HTMLベースのWebサイト構築というものは、尽きる
HEPBET Yeni Adres
HEPBET Bahis Sitesi‘nin heyecan verici dünyasına hoş geldiniz! Özellikle internet üzerinden bahis yapma deneyimini yeni bir seviyeye taşımak isteyenler için ideal bir seçenek olan HEPBET, her zaman Türkiye’de popülerlik kazanmıştır. HEPBET Popüler Bahis Sitesi HEPBET, online bahis ve casino oyunları sunan bir platformdur. Kullanıcılarına geniş bir oyun yelpazesi ve çeşitli bahis seçenekleri sunara
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
【アプリ開発日誌】 行動観察調査がやっぱり大事... アプリ申請前にユーザーテストを実施したら辛辣なフィードバックの嵐。行動観察調査の大切さを痛感した一週間の開発日誌。cmuxやCodexなど気になるツールの話題も。 昨日 【macOS/iOS】 メニューバーに常駐する3ページ限定のメモアプリ、『IDEA*PAD』をリリースしました メニューバーに常駐する3ページ限定のシンプルなメモアプリ「IDEA*PAD」をmacOS/iOS向けにリリースしました。iCloud同期対応、無料で利用可能です。 11日前 【アプリ開発日誌】 Apple AdsのマーケティングをGitHub Actionsで自動化した Apple Ads APIの発見からGitHub Actionsでのマーケティング自動化まで。App Store審査の遅延対策やGhosttyへの移行など、今週の開発トピックをまとめました。
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
HTMLチェックとかリンク切れチェックでこれくらいは知っておきたいツール | 初代編集長ブログ―安田英久
Web担のサイトを少しずつ改善するなかで、久しぶりにサイト全体にわたってHTMLが正しく使われているかをチェックしてみました。結論としては、やっぱり、ちゃんとHTMLチェックとかしないとダメですね……。 というのも、先日、Operaでだけトップページの表示が崩れるという現象があったのです。Web担では、記事ごとのHTMLは基本的にすべてHTMLチェッカーを通して確認していて、記事本文のHTMLは公開前にチェックされています。しかし、一覧ページに表示されるHTMLの部分（「ティーザー」と呼んでいます）がそのチェックフローから漏れていたことが判明したのです。早速、社内で使っている記事HTMLチェックの仕組みを修正して、ティーザーもHTMLチェックされるようにしました。 そういうことがあったので、サイト全体のテンプレートなどもHTMLチェックを通してみました。もともと、Web担のテンプレートのH
窓の杜 - 【NEWS】米MS、HTML構造やレイアウトを検証できるWeb制作者向けIEプラグインを正式公開
米Microsoft Corporationは9日（現地時間）、Webページの構造を検証できるIE用プラグイン「Internet Explorer Developer Toolbar」の正式版を無償公開した。Windows XP/Server 2003/Vista上のIE6/7に対応し、現在同社のダウンロードセンターからダウンロードできる。 「Internet Explorer Developer Toolbar」は、IEのエクスプローラバーとして動作するWeb制作者向けのプラグイン。ローカルまたはインターネット上のWebページのHTML/CSS構文を解析でき、レイアウトや色合いの調整、W3Cの文法チェックサービスを利用した構文エラーチェックなど、アクセシビリティに配慮したWebページ作成に便利な機能が多数搭載されている。 エクスプローラバーはWebブラウザー画面の下側へ表示され、上部に各
ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum
Web担編集部の安田です。Web担のはてブ件数1万件超え（）を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。 akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。 名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。 使い方その1普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」（IEの場合）または「このリンクをブックマーク」（Firefoxの場合）してください。 IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか？」とのセキュリティ警告が出ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://macaw.co/
(id:hungchangさんの指摘を受け修正) 主語 (id:deamuさんの指摘を受け修..
Brackets - Web デザインを認識する最新のオープンソースコードエディター
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表
Pingdom Tools
W3C CSS 検証サービス
Cacoo - Web上で図の作成とリアルタイムコラボレーション