iOSシミュレータでWebインスペクタが利用できる「iWebInspector」
iOSシミュレータでWebインスペクタが利用できる「iWebInspector」 「iWebInspector」はiOSシミュレータのiPhoneやiPadでWebインスペクタを利用できるようになる画期的なアプリです。Macでスマホサイトを作っている人には必須なツールですね。 iWebInspectorを立ち上げるとこんな画面が表示されます。見た目はアレですがすごく使えるやつです。 まずは左上の「Open iOS Simulator」をクリックしてiOSシミュレータを立ち上げます。次は立ち上げたiOSシミュレータにサイトを表示します。 次にiWebInspectorにもどって「Load from Safari」をクリック。するとiOSシミュレータに表示したサイトのタイトルが表示されます。 最後にタイトルをクリックするとWebインスペクタが立ち上がります。 これでiOSシミュレータでデバッグ
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
SYMBL (◕‿◕) Symbols, Emojis, Characters, Scripts, Alphabets, Hieroglyphs and the entire Unicode
Top Symbols ❤ ♫ ☎ • ° ♨ ✈ ✣ ☏ ■ ☀ ➑ ✂ ☑ ✉ ☼ ☆ ✄ ✔ ✆ — ☁ ★ ♕ ✘ № ‰ ♠ ✪ ✝ ╳ © … ♥ ✰ † ✎ ® ¶ ♦ ✧ ‡ ✍ ™ ❆ ♣ ✦ ◑ ♀ ℮ ❅ ♤ ♡ ♪ ♂ ·
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
