position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
jQueryを使ってメニューを装飾：LavaLamp menuを使ったメニューを作ってみる
同じ会社のYさんが、動くメニューが作りたいということで、 JavaScriptでアニメーションするようなメニューを探していた。 そしてYさんが「Fancy menu」というのを見つけていた。 Mootoolsのライブラリを使って動作するものらしい。 MootoolsではなくてjQueryのプラグインで無いかなって探したところ、 「LavaLamp menu」というプラグインを発見。 いろいろなところで利用できそうなので、試しに使ってみた。 ※現在IEだとうまく動作しない様子。 CSSの設定がうまくいっていないのもあるので後ほど調節予定。 ※追記（8/22） IE7ではうまく動作するようです。 IE6ではここのブログ上ではうまく動作しない現状です。 ※追記 全体的にうまく動作していないので後で修正します。 今はまだスムーズに動いてくれないようです。 ※追記（8/22） Fx,Opera,Sa
STUDIO NH | blog » Lightbox.jsのネタまとめ
いつも鷹野さん[誰]にネタを使われて（!?）います、CSS Niteに先日もいってきました。 そこであげられていたのも含め、今回のお題、Lightbox jsのネタをいくつかまとめてみました。 ちなみに、うちの倉庫[謎]には、当面ストックはありませんのであしからず。 Lightbox http://www.huddletogether.com/projects/lightbox/ 本家本元。すべてはこれがはじまり。 LightBox Plus http://serennz.cool.ne.jp/sb/sp/lightbox/ Lightbox 本家の改良版。拡大できたり閉じられたり。 Lightbox coolness http://mudabone.com/aietc/?p=383 Lightbox 1.0の亜流。 Leightbox http://www.e
CSS切替スクリプト - 徒委記
CSS切替スクリプト 目標/特徴 ソース 使い方 利用許諾 要望 今後の予定 既知の問題 変更履歴 経緯 利用サイト 他にスタイルシート切り替えスクリプトを提供しているところ なるべくDOM標準に沿うようにCSS切替スクリプトを書いてみる試み。 いちゆうさんのスタイルシート切り替えスクリプトを元にしています。 目標/特徴 なるべくDOM標準に沿った方法を用いています。 でもIE5以上で動作するようにしています。 付随的な特徴: application/xhtml+xmlなページにも対応しています。 Opera 7でも動作するようになりました。 MacIE 5でも動作するようになりました。 動作しないブラウザでも、スクリプトのエラーダイアログを出さないようにしています(WindowsのNN3, IE4でエラーダイアログが出ないことを確認)。 ソース 徒委記で動かしているスクリプト /* cs
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
あれこれポップアップ
ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑） 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2
RED LINE : スタイルシートの切替 - livedoor Blog（ブログ）
ブログネタ：Web制作全般 に参加中！ 文字サイズ可変がユーザー側で自由にできるように、文字サイズは制作者が固定すべきではない、という話を以前にも書いたと思う。 ブラウザの設定で文字サイズを自由に可変できるのは大変有効的だと思うのだが、実際その機能に気づいているユーザーばかりではない。 最近サイトの中に「文字を大きくする」「文字を小さくする」等のボタンを配置し、Javascriptを利用してcssを切替て文字サイズの可変を可能にしているサイトも多いように感じる。 cssを差し替えるということだが、テキスト関連のcss指定だけ別ファイルにしておくのも１つの手だし、テキスト部分だけ文字サイズを変えて単一のcssファイルで管理する方法でも構わない。管理のしやすさを考えれば前者がおすめめである。 もちろんスタイルシートを切り替えるJavascriptなので、デザインごとごっそり変更する事も可能。使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
7 Steps for Systematizing The Design & Build Process - noupe
[JS]フォームにさまざまなスタイルのデザインを適用するスクリプト -Sexy Forms
Blogger
プロとして恥ずかしくないスタイルシートの大原則