[JS]ローカル環境でも利用できるダミー画像を生成するスクリプト -Holder.js
サイズやカラーをテキストで指定するだけで簡単にダミー画像を生成できる超軽量（4KB）のスクリプトを紹介します。 Holder.js -GitHub [ad#ad-2] Holder.jsのデモ Holder.jsの使い方 Holder.jsのデモ 対応ブラウザ Holder.jsはcanvasとdata URI schemeを使用しているため、下記のブラウザでご覧ください。 Chrome 1+ Firefox 3+ Safari 4+ Internet Explorer 9+ Holder.js [ad#ad-2] Holder.jsの使い方 使い方は、2ステップです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="holder.js"></script> Step 2: HTML ダミー画像を設置したい場所にimg要素で記述します。
自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
2つの画像の差分を比較できるツール「DiffImg」 : 二十歳街道まっしぐら
DiffImgは画像の差分を抽出するツールです。 2つの画像を指定して、その差分を示してくれます。 間違い探しの画像を2つ比較したらすぐに答えが分かりそうですね。 また、加工された画像かどうかなどの比較にも使えそう。 以下に使ってみた様子を載せておきます。 04/28 ～ 05/06 ゴールデンウィークということで更新お休みします。 まず「DiffImg」にアクセスしましょう。 ツールをダウンロードしてインストールしましょう。 インストールは特に難しいこともなく、一瞬で終わります。 この2つの画像を比較してみます。 一見同じ写真？と思ってしまいますね。 比較するとこのとおり。差分が表示されました。 元の画像と横に並べて比較することもできますよ。 画像の比較をしたいときにどうぞ！
Webデザインの評価項目をつくる
Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
レスポンシブデザインのテストツールx4 – creamu
Device-Agnostic Approach To Responsive Web Designという記事で、レスポンシブデザインのテストツールが4つ紹介されています。 Responsive Design Testing URLを入れると4つの画面でプレビューできるツール Responsive.is URLを入力すると、デバイスごとのアイコンクリックで表示を切り替えられる Responsinator URLを入力すると、デバイスごとの見え方をざっと見渡すことができるツール BriCSS ブックマークレットとして追加して、ワンクリックでデバイスごとの表示を確認 via. Device-Agnostic Approach To Responsive Web Design
WEBサイト負荷テストツール7選 | さぶみっと！JAPAN
WEBサイトに情報を入力するだけで負荷テストができるLoad Impact、GUIから操作できるApache JMeterや、コマンドラインから使うcurl-loader・httperf・Siege・Pylot・abを簡単な使い方と共に紹介していきます。 Load Impact http://loadimpact.com/ Load ImpactはスゥエーデンのGatorhole AB社が管理している、フォームに必要な情報を入力するだけで負荷テストをしてくれるWEBサイトです。 ツールをインストールしたりする必要が有りませんので、非常に楽です。 毎月5回まで無料で負荷テストができます。 それ以上は10回/$30のクレジットを購入する事になります。 トップページのフォームにURLを入れて「Run free test」をクリックすると、世界各地のいずれかのAmazon EC2サーバから負荷テス
全て同時に確認できる、スマートフォンやデスクトップなどさまざまなサイズで表示できるブックマークレット -Responsive Design Test
全て同時に確認できる、スマートフォンやデスクトップなどさまざまなサイズで表示できるブックマークレット -Responsive Design Test
アンカーを:hover状態にすると後続するフロートの一部が消える - CSSバグリスト
以下の条件に該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると最もボックス高が大きいフロートのうち、2番目にボックス高が大きいフロートの高さを超える部分が消える。 （【アンカーを:hover状態にすると親ブロックの高さが変化する】が発生するような入れ子構造があり、バグ対策を施している【アンカーを:hover状態にすると親ブロックの高さが変化する】の「補足」を参照）。 上記の入れ子ブロックの後にフロート化したボックスが複数並んでいる。 それらのフロートの下に何も（clearプロパティがnone値以外のボックスなどが）存在しない。 最も前にあるフロート（左フロート(float:left;)が複数ある場合は最も左上方に置かれるフロート、右フロート(float:right;)が複数ある場合は最も右上方に置かれるフロート）のボックス高が最も大きい。 例示 <div style=
スマホで復権ジャパニーズチラシの実力。「Shufoo!」と「チラシ部」を勝手に検証 | 企業ホームページ運営の心得
と思われるかもしれませんが、同様のサービス「Shufoo!」もあり、こちらは凸版印刷によって運営され、今年で10周年を迎えました。つまり、チラシはいまだ健在です。住宅街の宅配新聞では、土曜日や祝日になると新聞本紙より分厚くなる枚数のチラシが届けられています。そしてチラシ市場にスマホが加わり、新たなチャネルとなる可能性が生まれました。 商売はインターネットだけでは完結しません。検索連動型広告よりもリアルのチラシの方が効果的な場合もあります。というわけで今回は「チラシ」が拓く可能性と「Shufoo!」と「チラシ部」について。 ジャパニーズオリジナルメディア「チラシ」とは、日本独自の広告メディアです。紙切れ一枚に情報をまとめる「チラシ」は世界中にありますが、宅配されるところが日本オリジナルです。それを支えるのが新聞戸別宅配制度で、明治の後期にはすでに確立していたといわれています。早くから戸別宅配
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」:phpspot開発日誌
W3CのValidatorをサイト全体にかけてサイトマップも作ってくれるツール「W3Clove」 2011年12月07日- W3Clove :: site-wide markup validation tool W3C Validator の結果を一括で得られ、サイトマップのXMLも生成してくれる便利なサービスのご紹介です 最初にトップページのURLを入力すると、サイトをクロールしてくれるのでしばらく待ちます。 まっていると結果が次のように出ます。 OKなものはグリーンデ表示され、赤でエラー、オレンジで警告といった具合に分かりやすくW3C Validatorの結果が閲覧できます サイト全体で多く見られたエラーのサマリも見ることができ、どこを集中的に改善すればいいのかが分かりやすいです 関連エントリ スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」
お役立ち！PC/スマートフォン/ガラケー/IE6のみとしてWebサイトを検証するブックマークレット·mecalint MOONGIFT
mecalintはPC/スマートフォン/ガラケー/IEのみという視点でWebサイトを検証してくれるブックマークレットです。 mecalintはPC/スマートフォン/ガラケー/IE6のみとして任意のWebサイトを評価してくれるブックマークレットです。W3Cの検証とはまた異なる基準でWebサイトを検証してくれます。 ブックマークレットを実行しました。ページ下にツールバーが表示されます。 PC向けで評価したところです。IEのPNG、classの小文字キャメルケースで大きな減点が… スマートフォン向けとして評価したところです。若干低いといった程度です。 PC向けサイトを携帯電話向けとして評価するとやはりすごい点数が。 mecalintでは全部で20項目のテストを行ってくれます。ついやってしまいがちなミスを防ぐのに役立ちそうです。特にスマートフォンとガラケーの違いをまとめてチェックしてくれるのが便利
iOSシュミレーター上でのWEBサイト開発に使える「iWebInspector」:phpspot開発日誌
Debugging tool for Safari on iPhone, iPad and PhoneGap apps - Remote Inspector (Firebug) for JavaScript, HTML and CSS iOSシュミレーター上でのWEBサイト開発に使える「iWebInspector」 iPhone用サイトはSafariやChromeでテストして後は実機で動作確認なんていう手順をとっていましたが、iOSシュミレーター上でやるとより状態が再現できてよさそうですね。 更にこのツールを使えば、FirebugやChromeのDeveloperTool風の機能も提供してくれてデバッグに便利そうです。 PhoneGapをAdobeが買収したり、今後はHTMLベースのアプリの躍進が予想され、開発環境周りも整っていきそうですね 関連エントリ 秀逸なiOSアプリケーションアイコ
iPhoneとiPadの切り替えが可能で、ランドスケープ(横向き表示)対応のブラウザシミュレーター・Electric Plum結構ｲｲ！（・∀・）※Win用 - かちびと.net
iPhoneとiPadをサクッと切り替え 出来て、ランドスケープ（横向き） にも切り替え可能なiOS向けの無料 のシミュレーターが結構良かった のでシェア。Windows用です。表示 の確認には結構いいんじゃないかな と思います。 iPhoneとiPadの切り替えが出来て横向きにも出来るiOSブラウザシミュレーター。個人的には確認も楽で動作も軽いので結構いいなと思いました。ただし、Windows用です。 起動するとiPhoneとiPadを選べます。選んでURLボックスにアドレス入れてアクセスしまｓ・・ やっぱり説明下手なので動画みて頂けますか。 iPadのランドスケープだけウィンドウを小さくしていたため微妙な感じですが、表示はちゃんとしてます。どうも不慣れで申し訳ないです。 一応機能をご紹介。 iPhone ⇔ iPadの切り替えが楽 iPhoneとiPadの切り替えが凄い楽です。これだけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
仮想環境でブラウザテストができるサイト「browserling」 : ライフハッカー［日本版］
スマートフォンブラウザ不具合特集
Screenqueries – iPhoneやiPadでの表示を確認できるサイト – creamu
http://designaholic.cc/2012/03/web1support-detail.html
