JavaScriptやCSSの外部ファイルに手を加えサイトの表示速度を改善する3つの方法
色々スクリプトを設置してヘッダーがJavaScriptやCSSの外部ファイルでいっぱいになっていることはありませんか?外部ファイルが多くなればもちろん表示速度への影響も大きくなります。 サイトの表示速度はGoogleの検索順位にも反映されますし、そもそも訪問者のことを考えると少しでも表示速度は速い方がいいですね。 JavaScriptやCSSファイルを軽量化する 空白や改行をなくしてJavaScriptやCSSファイルを軽量化します。簡単に圧縮してくれるオンラインツールがたくさんありますが個人的なおすすめはこちら。 Compress javascript and css シンプルで使いやすいと思います。「basic compress」は空白のみ、「powerful compress」は改行も圧縮してくれます。 dean.edwards.name こちらも、同じように圧縮してくれます。軽量化
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
クリックジャッキングってこうですか？ わかりません
↑ この透過されているiframeは、ブラウザの最前面に配置されています ※はてなにログインしていると、どのようにボタンが被っているのかわかりやすくなります
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
CSSで要素の左側に画像を背景として配置する | Igaloglog
要は、フッターなどでこういうデザインを実現したいときってことです。 text自体は左寄せで、p要素は右寄せ。そいでそのp要素の左側に画像を背景として配置する、ということです。 こいつのHTMLはこうなっています。 <div id="footer"> <p>仙台で働くウェブ屋さんの技術メモ<br /> Copyright (C) 2008 igarashi of MagicalRemix&Co.</p> <!--/footer--></div> span や div を使ってみようかとも思いましたが、装飾のためにHTMLに記述増やすのは本末転倒じゃね？と脳内神から神託が下ったので、HTMLはそのままでCSSでどうにかしました。 その分ちょいと迷いましたが、まぁ、わりとあっさり解決できたほうなんじゃないのかな？ 背景イメージbgfooter.gifを用意します。 ほいで、CSSの記述は
よくある質問っぽいののjQueryを使ったサンプル｜CSS HappyLife
2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 （単純にボクがこのスタイルが一番見やすくて好きってだけだったり） サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル （サンプ
素晴らしいJavascript&CSSナビゲーションメニュー13選『13 Awesome Javascript CSS Menus』 | CREAMU
DiaryTechnology 素晴らしいJavascript&CSSナビゲーションメニュー13選『13 Awesome Javascript CSS Menus』 CSSでメニューを簡単にコーディングしたい。 そんなあなたにおすすめなのが、『13 Awesome Javascript CSS Menus』。素晴らしいJavascript&CSSナビゲーションメニュー13選だ。 以下にいくつかご紹介。 » Sexy Sliding Menu MootoolsとScript.aculo.usのバージョンがある » Webber 2.0 Dock Menu ドックタイプのナビゲーション » Phatfusion- Image Menu javascriptを使った画像メニュー » LavaLamp jQuery Sliding Menu jQueryを使ったナビゲーションメニュー » Moot
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry
コリス