CSS sprite 導入や javascript 最適化でブログ表示を高速化
７月下旬くらいから徐々に進めてきた作業ですが概ね形になりました。 このチューニング作業で当ブログの表示を約２倍に高速化することができました！ ∩(≧ο≦)∩ 高速化と行っても得意分野の動的コンテンツ（プログラムやＤＢのチューニング）ではなく静的コンテンツのチューニングです。チューニングの観点は文末の二冊の参考書を読むと理解が深まると思いますが、大きく分類するとサーバのチューニングとコンテンツのチューニングに分けられます。そして個人運営のサーバではちょっとチューニングの余地がなさそうな項目は除外すると次のような項目がチューニングポイントとなります。 コンテンツの構成によるチューニング HTTP リクエストを減らす → CSS スプライト導入、JavaScript/CSS ファイルを１つに統合 スタイルシートのロードを head 内に記述 可能な限りスクリプトのロードを /body タグ直前に
IT戦記 - Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い
今日は、まだまだ Safari 3 が熱い！ window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。 その名も getMatchedCSSRules ！！！ まずはデモをご覧ください 以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。 そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。 javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.j
HTML5 presentation
This presentation is an HTML5 website Press → key to advance. Zoom in/out: Ctrl or Command + +/- Having issues seeing the presentation? Read the disclaimer HTML5* Web Development to the next level *Including other next generation technologies of the Web Development stack Rough Timeline of Web Technologies 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tablel
特定のclass属性を持った任意の要素にマッチするXPath | 3.14
結論特定のclass属性を持った任意の要素にマッチするXPath(hogeは指定したいclass属性名) //*[contains(concat(" ",normalize-space(@class)," "), " hoge ")] 特定の要素にしたい場合は適当に div[contains(concat(" ",normalize-space(@class)," "), " hoge ")] などとする． 概要特定のclass属性を持った任意の要素にマッチするXPathというのはアドオンやUserJavaScript，スクレイピングの際にDOMノードを特定するために良く使いますが，XPathの書き方がマズイ人がたまにいます．普通に考えたらXPathはこうなります． XPath1:: //*[@class="hoge"] class属性は以下の引用部分に書かれているとおり，スタイルシート以
3周年記念セルフエントリーまとめ
Blog 開設 3周年を記念して過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。 早いもので、今月でこの Blog も開設から丸 3年が経過 （2005年2月スタート） しました。 そこで今回は、過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。たまには過去のエントリーを見直してみるのも面白いかもしれません。 ちなみに、このエントリーで 446件目のエントリーでした。3年間で 446件っていうのは多くはないと思いますが、平均すると年間で約 148件、大体 2、3日に 1エントリーくらいのペースで書いてることになりますね。チリも積もれば山となる、継続することは大切です。 (X)HTML、CSS 関連 まずは (X)HTML とか CSS 関連のエントリー。このサイトでメインの話題…… と思われている分野です
13 Awesome Javascript CSS Menus | The Jotform Blog
Every web designer tries to be creative when it comes to designing the main navigation of the website. Now we present you with 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Lets take a look at recent examples of these … Pro Tip 1) Sexy Sliding Menu Andrew Sellick decided to use mootools due to the smoothness of their effects, however, he developed a
CSSのセレクタをXPathに変換する - nazokingのブログ
Warning! 2008/5/22追記：このエントリは情報が不十分だったり間違いが含まれてたりするので、下記URLのページを参考にするようにしてください↓ http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm CSS3あたりをXPath1.0あたりに変換する表 CSSXPath .class//*[@class="class"]*1 .class//*[contains(concat(" ",@class," ")," class ")]*2 tag//tag #id//*[@id="id"] tag.class#id//tag[@class="class"][@id="id"] .class.class2//*[contains(concat(" ",@class," "
PJ Hyett : The Lightbox Effect without Lightbox
Particle Tree posted an article the other day on how to modify the Lightbox javascript to work with regular divs and not just images. A few days before that article went up, I had the same bit of inspiration for Wayfaring. We’re not afraid of pushing the envelope on the site, so if we like an idea, we’ll roll with it until too many of our users tell us it sucks. (That hasn’t ever happened incident
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
document.createStyleSheet で動的に CSS を生成 - IT戦記
今まで var element = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(element); if (ie) { var sheet = element.styleSheet; } else { var sheet = element.sheet; } みたいにやっていた。 ところが dojo のソースを眺めていたら IE には createStyleSheet という関数があるみたい。 createStyleSheet を使うとこうなる。 if (ie) { var sheet = document.createStyleSheet(); } else { var element = document.createElement('style'); doc
superbees · Agence de conseil et développement haut-de-gamme de solutions digitales sur mesure
superbees, votre agence de conseil et développement haut-de-gamme spécialisée dans la conception et le développement de solutions digitales sur mesure depuis 2015 superbees, agence de conseil et développement haut-de-gamme Notre référencement, c'est vous. La société superbees existe depuis 2015. Depuis plusieurs années, nous créons des applications et des sites internet. Tout commence par une miss
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ninjaui.com
CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳
ウインドウの横に隠れるサイドナビゲーションJavaScript （side-bar.js） - youmos