サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
web.helog.jp
5年ほど前に以下の記事を書きました。 jQueryプラグイン「jquery.cookie.js」でお手軽にクッキーを操作する 久しぶりに公式サイトをのぞいてみるとjQueryを使わない、JavaScriptのプラグインとして開発が移っていたようです。 js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies 改めて、便利な使い方を確認したいと思います。 導入方法 導入方法はとても簡単です。 上記サイトから「js.cookie.js」をダウンロードして読み込みます。 <script type="text/javascript" src="/js/js.cookie.js"></script> cookieの操作だけが目的の場合に、jQueryを読み込まなくてもよいので容量が軽く
Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要:スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。 レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。 (CSSについては別途考えます) そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。 概要 HTMLのソースは上から順に解析されます。 ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。 少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。 読
helog.jp
レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。 Google Mapsの埋め込みコードをそのまま設置すると、レスポンシブサイトの画面サイズを変更した際に、地図表示エリアが画面をはみ出したり、他のコンテンツに重なったりと、表示崩れが発生します。 そこで、以下のようにレスポンシブ対応することで崩れを回避することができます。 <div id="map_canvas"> <iframe...(埋め込みコード略).../iframe> </div> #map_canvas{ position: relative; padding: 0 0 56%; height: 0; overflow: hidden; } #map_canvas iframe{ position: absolute; top: 0; left: 0; width: 100% !important; heig
このページを最初にブックマークしてみませんか?
『web.helog.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く