IMGタグのCSSスプライト簡単作成 山のスポット情報 クチコミTIM
の中等へコピー -->\n' + '\n\n' + '<-- 以下は、各行をそれぞれ画像の表示する場所へ -->\n' + html2; } document.getElementById("textareaCSSSHTML").value = html; var rows = 1; for(var i = 0; i < html.length; i++) if(html.charAt(i) == "\n") rows++; if(rows > 20) rows = 20; document.getElementById("textareaCSSSHTML").rows = rows; } function copyClipboard() { window.clipboardData.setData("text", document.getElementById("textareaCSSS
Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」
Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。 そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です… imgを圧縮してアップロードするだけ サイトに訪れたらまずは画像配置のレイアウトと吐き出すコードのフォーマットを決めます。 ちなみにフォーマットはCSSだけではなく、SCSSやSASSも選択可能です。 次に、CSSスプライトにする画像をひとまとめにして、そのフォルダを圧縮、ZIPファイルにしましょう。 そしてそのファイルを上の場所にアップロードすると… 自動的に「spritemachine」というフォルダがダウンロードされます:) フォルダの中身はpng画像とc
Webページの読み込み速度（表示速度）が遅いときの改善方法 | Webマーケティングブログ｜Webコンサルタント石田ヤス彦.
実は、今日は、ここからが本題だったりします。 画像の圧縮と是非併せて使ってもらいたいのが、jQueryプラグイン『Lazy Load』。 jQuery（ジェイクエリー）とは、JavaScript（ジャヴァスクリプト）ライブラリの1つ。 JavaScriptは、文字や画像などにさまざまな「動き」がつけられる言語です。まあ、とりあえず、難しいことは置いておきましょう。 『Lazy Load』をWebサイトに組み込むと、画像を一気に読み込まず、スクロールに合わせて読み込むようになります。 ページの表示と同時に画像をすべて読み込まないので、読み込み速度が短縮されるのです。 最近、いろいろなWebサイトで見かけるようになってきました。 ちなみに、このブログでも Lazy Load を組み込んでいるのですが、わかりますかね？？ わかりづらければ、こっちのサイトの方が顕著にわかるかもしれません。 それで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
