IE6 でガタつかない positoin:fixed をさせるための詳細条件を調べてみた - Cyokodog :: Diary
「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」について、たくさんのコメント、フィードバックありがとうございます。 exFixed のうりとして「IE6 でもガタつかない position:fixed ができる」というのがありますが、フィードバックでいただいたバグを解消する際に、ガタつき防止の前提条件をいろいろと調べたので忘れないようメモしときます。 固定位置に表示させる処理 まず固定位置表示処理のおさらいから。 IE 固有機能の expression を使います。expression は CSS 定義内でも記述することができますが、JavaScript 内で記述する場合は以下のように書きます。コードは jQuery ベースです。 //位置調整ができるように position:absolute にします var el = $('#fixedE
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル
あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコードを表示してくれるアドオンだ。SitePointが公開している各種HTML, CSSリファレンスの一部をまとめた内容となっている。 主な機能は次のとおり。 HTML Elements Reference HTML Attributes Reference CSS Properties Reference サンプルコード リファレンス内検索 W3C勧告に準拠しているかどうか 各種ブラウザ対応状況(
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
はてなダイアリーにopera:configへのリンクを張る方法がわかった - by edvakf in hatena
下の記事を読んでひらめいた。 OperaのCSS『-o-link』について - ┐(´ー｀)┌なJavaScript雑記 はてなダイアリーにこのように書けば、 <a href="##" style="-o-link:'opera:config';-o-link-source:current;">隠し設定</a>こうなる。→隠し設定 あれこれ 一見無駄に見えるhref要素を付けるのは、そうしないと空間ナビゲーションでフォーカスできないため。 試してないけど、他のブラウザからはこう見えるはず。→隠し設定 試した。 もちろん、opera:config#User Prefs | Opera Directoryみたいなやつでも出来る。 開いてもリンクの色が変わらない。 本当は、opera:button なリンクを張りつけたかったんだけど、よくわからなかった。(いろいろ試すのがめんどくさかったとも言う
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
[JS]わずか1.3KBの軽量で、快適に動作するアコーディオンのスクリプト | コリス
Leigeberのエントリーから、以前紹介した「軽量でシンプルなアコーディオンのスクリプト」より更に軽量（1.3KB）になったアコーディオンのスクリプトを紹介します。 Animated JavaScript Accordion V2 demo Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。 ※Op9.6.0, Safari3.1.2 for Winで正常に動作しました。 仕様自体に大きな変更はなく、アコーディオンの開閉のタイミングやスピードを調整することができます。 アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。
The Performance of Dynamic Site (id:amachang) - monjudoh’s diary
日本Javaユーザーグループ 概要 JavaScriptの誤解 重くしている犯人 プロファイラ JavaScriptの誤解 JavaScriptは遅い 速いです 重くしている犯人 DOM DOMをフェーズに分けて考える JavaScriptとコンポーネント(C++)との通信(取得) DOMノードの追加、値の変更 スタイルの計算 レイアウトの計算 JavaScriptとコンポーネント(C++)との通信(取得) XPConnectやCOMとの通信 単純なプロパティアクセスの数十倍(IE以外は無視しておk) COMは重い 通信回数＝DOMのオブジェクトの「.」の数 DOMノードの追加、値の変更 取得の場合と同じ「.」の数 ノードに変更したというフラグが立つ parent.appendChild(child)だとparentとchildにフラグが立つ。 重要：再計算がJavaScriptの実行後に
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
プロジェクトベースのHTMLエディタ·SEEdit Maxi MOONGIFT
HTMLの編集ソフトウェアは、DreamweaverのようなWYSIWYGなものか、タグ入力を補助するタイプのものかに分かれる。前者の方が分かりやすいが、細かな設定やCSSベースで組み立てていく際にはタグ入力補助の方が便利な場合もある。 全体図 HTMLやCSS、JavaScriptを一手に作成できるのがこのソフトウェアだ。 今回紹介するフリーウェアはSEEdit Maxi、Mac OSX向けのHTMLエディタだ。 SEEdit Maxiはフォルダを指定することでそのフォルダ以下のHTML、CSS、JavaScriptファイルをSEEdit Maxi上で開いて編集できるようになる。フォルダをプロジェクト管理として利用するイメージだ。 ベースになるHTMLコード生成 HTMLは手打ちだが、HTMLのDTDを指定すると予め枠組みを作った状態で新規作成してくれる。タグは入力補助のウィンドウがある
ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript（マルチタッチ編）
90秒で理解するiPhone JavaScript（マルチタッチ編） Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length
JavaScriptでレンダリングする画像ライブラリ·HIWI MOONGIFT
まぁなんだろう…あえて言うなら「無茶しやがって」だろうか。 下の画像を見てもらえれば分かると思う。モナリザの画像が出ているが、右クリックしても、画像の保存は出てこない。もちろん、CSSでバッググラウンドに指定している訳ではない。 モナリザが表示されているが、これは画像ではない 答えは簡単だ。膨大な数のテーブルタグによって作られているのだ。 今回紹介するオープンソース・ソフトウェアはHIWI、JavaScriptによる画像作成ライブラリだ。 HIWIは画像を配列に分割し、それをテーブルタグを1ピクセルずつ定義することで画像をレンダリングしていくソフトウェアだ。画像をHTMLで再現するものは幾つかあるが、それの最極小版と言えそうだ。 これがモナリザのソース 1ピクセル単位なので、どれだけ精密な画像であっても再現できる。ただし遅い。163×218の画像で5秒程度レンダリングにかかるそうだ。また、
50超のCSSやJavaScriptで実装するタブ型ナビゲーション集
HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。 50+ Nice Clean CSS Tab-Based Navigation Scripts
HTML&CSS、プログラミング、データベースなどのチートシート集
Webmasters by Designのエントリーから、HTML, CSS, XML,やプログラミング、データベース、htaccess、DOCTYPE、SEOなどウェブ開発者のためのチートシートを紹介します。 The Best Developer Cheat Sheets Around HTML & CSS HTML HTML Cheat Sheet (PNG, PDF) HTML Help Sheet. Panic Over. (PDF) XHTML cheat sheet (HTML) CSS CSS Cheat Sheet (PNG, PDF) CSS Cheat Sheet (PDF) CSS Cheat Sheet (HTML) XML XML Quick Reference (PDF) XSLT Quick Reference (PDF) XML Syntax Quick R
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
あとで絶対活用してみたいと思いましたので一応書いておきます。 『誰でも使っていいよ！』との事なので興味のある方に。 CSSハックをしない、JavaScriptを使わないというもの。 参考：CSSハックってなんぞえ？ 詳細は以下に。 テンプレート色々 基本はダウンロードファイルは見つからなかったので各ページでソースを表示して参考にする感じ。 英語がわかる人は作者サイトから見た方が早いかも。 作者サイトは以下から。 Art and design by Matthew James Taylor 3カラム中央メインタイプ ピクセル割りem割りパーセント割り 3カラム左メインタイプ ピクセル割りem割りパーセント割り 2カラム右メインタイプ ピクセル割りem割りパーセント割り 2カラム右メインタイプ ピクセル割りem割りパーセント割り 2カラム均等割り パーセント割り このほか1カラムのタイプや、マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/03/form-design-2.html
CSS Based Web Design Gallery - Designers love nature!
eduStyle - Inspiration for Campus Web Desiners
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos