タグ

Web制作に関するhtsignのブックマーク (5)

  • デベロッパーツール上での修正をローカルファイルにも反映·Chrome DevTools Autosave MOONGIFT

    Chrome DevTools AutosaveはGoogle Chromeのデベロッパーツール上での変更でローカルファイルも更新するソフトウェアです。 Google ChromeやSafariのデベロッパーツールやFirefoxのFirebugは便利な開発ツールですが、その場で修正しても再読み込みするとまた元に戻ってしまいます。それを防ぎ、修正を自動保存してくれるのがChrome DevTools Autosaveです。 サーバを起動しました。node.jsで作られています。 Google Chrome機能拡張をインストールします。 URLと保存するファイルのパスを紐づけます。 スタイルシートを変更すると、ローカルのファイルも更新されました。 更新処理部分のログ。 Chrome DevTools Autosaveはnode.jsで作られたサーバを使い、指定したURLのファイルをデベロッパ

    デベロッパーツール上での修正をローカルファイルにも反映·Chrome DevTools Autosave MOONGIFT
    htsign
    htsign 2013/01/22
    Webkitの開発に限定するならかなり役立ちそう。
  • リピート率に直結!ブラウザのレンダリング速度を高速化する5つのこと | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    最近上京してきたんだけど東京とか物価高くてやんなっちゃう。ほんともう特に家賃とか駅から徒歩30分とかそれってもう徒歩圏内じゃなくない?あ、どうも僕です。 今日はクライアント(ブラウザ)側で高速にページを表示させるために、最低限押さえておきたい簡単なテクニックを厳選してお届けしちゃうよ! WebサイトやWebサービスを作る上で、ユーザを獲得するには応答時間を早めることがとても重要なファクターなんだ。 統計的にも応答時間とユーザのリピート率との相関性は実証されていて、例えば、表示までに時間のかかるサイトなんかは、もう二度と使わねぇとか思っちゃうよね! それほど応答時間というものはユーザを獲得する上でもかなり重要なんだ! HTTPリクエスト数を少なくする Webページが表示される際、まずはベースとなるHTMLが読み込まれてから、ページにリンクしてある画像ファイルやスクリプトファイルなどを読み込ん

    リピート率に直結!ブラウザのレンダリング速度を高速化する5つのこと | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    htsign
    htsign 2012/12/20
    このページのheadタグ内にscriptタグ書かれてる
  • スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。

    こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅(この行だけでいいかな) var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込

    スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
    htsign
    htsign 2012/08/28
    モバイルでは表示領域のフレーム分割ができないのでこのテクニックは重要かな。
  • これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋

    よくリンクにアイコンを付けることってありますよね?アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか? そんなWEB屋なら一度は(?)考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです! 元記事はこちら! Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね! これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h

    これはお役立ち!リンク先のfaviconをリンクアイコンとして表示させる方法! | バンクーバーのうぇぶ屋
    htsign
    htsign 2012/05/30
    これは素晴らしいな。ファビコン取ってくるサービスなんてのもあったのか。
  • HTML5 のリセット・スタイルシート - html5doctor - HTML5.JP

    サイト内検索 この記事は、html5doctor に掲載されている記事「HTML5 Reset Stylesheet」を日語訳したものです。この記事では、HTML5 でマークアップしたページにも対応した、リセット・スタイルシートについて解説しています。最後に、HTML5 向けのリセット・スタイルシートもダウンロードできます。 原文タイトル HTML5 Reset Stylesheet 原文ページ URL http://html5doctor.com/html-5-reset-stylesheet/ 著者 Richard Clark 氏 原文投稿日 2009-07-27 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを

  • 1