グラフィックデザイナーのためのCSSレイアウトメモTIPS「position : absoluteについて」
CSSレイアウト[TIPS] position : absoluteについて 「position : absolute」はpositionプロパティのなかの１つで、ボックス要素を絶対的な位置で配置する。 position:absoluteで指定されたボックスは、他の要素との関係は切り離され別物になる。親ボックス以外の他のボックス要素から影響を一切受けない。 position:absoluteには必ず「親」がいる。これが大事。 親にしたいボックスに「position：static」以外のposition指定をし（たいていはrelativeでOK）、そのなかに子を入れてposition:absolute指定をする。「top」「bottom」「left」「right」の値は、親ボックスからの距離。 親ボックスを指定しなければ「ブラウザウィンドウ」が親になる。 結論から言うと、親ボックスが「ブラウ
スタイルシート［CSS］/テーブル/表のフロート（浮動化）を指定する - TAG index
フロートを指定する場合は、回り込みを解除するもご覧ください。 IEの不具合について IE 6以下では、次の不具合が発生する場合があります。（IE 7からは、この不具合は解消されているようです） 背景色（または背景画像）が設定された要素内でフロートを指定すると、回り込んだテキストの一部が消えたり、背景の一部が反映されなかったり、といった不具合が発生する場合があります。（親要素に対して幅（width）を指定しておくと、この不具合を回避することができます） フロートを指定した方向にマージンを設定すると、そのマージンの大きさが2倍になってしまいます。（例えば float: left を指定した表に margin-left: 30px を指定すると、そのマージンが 60px になってしまう）
vim カーソルの単語を検索する方法
FreeBSDユーザの間で大人気のエディタvimについて。 vimで文字列の検索をするときには、/や?を使います。 カーソルの下にある単語を検索したいときがあります。 それは非常に簡単に検索することができます。 カーソルの下にある単語を後方検索するには、単語の上で * を実行するだけです。 カーソルの下にある単語を前方検索するには、単語の上で # を実行するだけです。 例えば、 vi という単語の上で*を実行すると /\<vi\>を実行したのと同じ 意味になります。そのため、viはマッチしますが、vimはマッチしなくなります。 カーソルの下にある単語が含まれる文字列を後方検索するには、単語の上で g* を実行するだけです。 カーソルの下にある単語が含まれる文字列を前方検索するには、単語の上で g# を実行するだけです。 viという単語にカーソルを合わせて、g*やg#を実行すると、viを含む
続 検証：IEではなくFirefoxのみで発生するCSS styleトラブル？
原因は大文字小文字ではなかった というわけで、こちらも直した文字を全部小文字に直して見てみると……おっしゃるとおりスタイルが適用されています。修正したのを元に戻しただけなのに、なぜ元の状態に戻らないのか？確かに修正前はスタイルがまったく適用されていませんでした。 続・IEではなくFirefoxのみで発生するCSS styleトラブル やはりここは検証した通り、 大文字小文字が原因ではなかったのですね。 僕個人としては、それだけでもわかっただけでかなり十分安心でした。 では、何が原因だったのか？ 「charset」の部分に目がいきやすいですが、問題はそこではありません。「Content-Style-Type」は小文字ですが、これもどうやら違うことがわかっています。となると残っているのは、「text/css」と「style/css」の部分しかありません。 続・IEではなくFirefoxのみで発
Redline Magezine：：AJAXでポップアップしてみるサンプル
予め、script.aculo.usからjsファイルをダウンロードしておく。 普通はscriptaculous.jsにリンクするのだが、今回はscriptaculous.jsがインクルードするjsファイルの中でもeffects.jsしか使用しないので、読み込み量をケチるために、effects.jsを単体で読み込む。また、このライブラリはprototype.jsが必要となるので、先にprototype.jsも読み込んでおく。 ●マウスオーバーでフェードインバージョン ※ちと急に現れるのでユーザーの心臓には悪げ。 ・後から現れる部分 <div id="sample01" style="width:●px;height:●px;background:url(xxx.gif) no-repeat;padding:10px;display:none;"> <p>サンプルでーす</p> </div>
Lightbox JS
Overview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnail or text link below: Benefits Places images above your current page, not within. This frees you from t
簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | WEBシステム開発 | HAPPY*TRAP
URL:jQuery popin solution – prettyPopin – by Stephane Caron jQueryプラグイン「prettyPopin」を使うと簡単にポップアップが実装できます。 サンプルはこちら(別ウィンドウで開きます)。 使い方を紹介します。 1. 「jquery.js」と「prettyPoint.js」の読み込み <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.prettyPopin.js" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPopin.css" type=
Firebugの意外と知られていない機能紹介（プログラマ向け） - KAYAC engineers' blog
羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。 意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture
Welcome to nginx!
サービス終了のお知らせ