[JQuery] ロールオーバーをinput要素にも対応させる | F+R (FplusR)
本当にこのサイトを放置していましたが、一応生きています。 MT4移行計画も準備中です。ですが忙しくてなかなかできません。 さて、本題ですが、input要素のボタンをロールオーバーさせたい案件がありまして、いろいろと調べてみました。 はじめは、「jQueryだけで画像のロールオーバーを実装する方法」を参考にしていましたが、Image Rollover Codeに慣れた身に関しては、個別にファイル名を記載してプリロードさせるやり方はやはり面倒です。クラスを割り当てて、特定のファイル名を記述するとロールオーバーを勝手にやってくれる方が、制作する方としては非常に楽です。 そこで、Easy Image Rollover Script With jQuery ~ PEPS.caのロールオーバースクリプトが、input要素にも対応しています。 ただ、このままだとおもしろくないので、すこし改良してみまし
DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法 | F+R (FplusR)
今日は、DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法を紹介します。 DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまいます。 私はデザインビューをあてにしないで作業していますが、たまにはあてにしたくなる時もあります。 そんなときには、clearfixを指定している部分に、「overflow:hidden;」「overflow:auto;」のどちらかを指定します。 これで、デザインビューでclearfixが原因でレイアウトが滅茶苦茶になる時はなくなるでしょう。 ただし、「overflow:hidden;」「overflow:auto;」は、諸刃の刀ですので、本番環境でのブラウザ確認はしっかりとやられたほうがいいでしょう。 これが原因で本番環境でレイアウトが変になっても責任は取れな
スタイルシートのコンポーネント要素 | F+R (FplusR)
あけまして、おめでとうございます（とてもそんな気分ではないが）。本年度もよろしくおねがいします。 去年の10月くらいから先日まで、すざましい仕事等の嵐でblogの更新もままなりませんでしたが、今年はテキトー[謎]に更新をがんばっていきたいとおもいます。 ほんとうは、blogのリニューアルとかもやってみたかったのですが、忙しいのと、時と場合によってコードが違うので、管理がややこしくなってきています。 仕事でも、他人の書いたコードを管理するときとかも、訳わからずに力技[謎]でケリつけていますが、自分のコードも進化しているので「訳わからん」状態になっています。 そこで今年は（去年の春から少しずつ実験しているのですが）、CSSのコンポーネント管理を本格的におこなってみることにしました。 コンポーネントを構成する要素 一覧 現在時点での、コンポーネントを分類してみました。これくらい用意すれば、8
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
「餃子ハック」な "@media all" cover hack | F+R (FplusR)
転職してから仕事が忙しくて、blogもまともにやっていませんでしたので、久しぶりなエントリーです。今回は単なる備忘録ですが。Internet Explorer 7 が一応正式版になったので、ハックのまとめとかメモしてみました。以前に記事にしたネタとか、新しいネタとかありますが。 「Internet Explorer のハックのメモ」というタイトルで、「カニの人[誰]の雑誌の記事のネタ」にして、マイミクさんのヘルプネタとして終わる予定だったのですが、公開してみます。 一応、ブログのリニューアルも考えていて、新しいハックのルールにしています。もっとも、作業の方はまったくすすんでいませんが（笑）。 ハックの適用順位とか FirefoxとSafariには、まったくCSSハックを使用しません。できるだけ最小限のCSSコードを実装します。 Safariでバグとか出た場合（ほとんどない気がするけど）「
コンテンツエリアの2段組レイアウトパターンについて考える | F+R (FplusR)
現在のXHTML+CSSで、コンテンツエリアのレイアウトパターンについて考えてみました。 そのついでに、おもしろい(!?)テクニックを偶然発見してしまったので書いてみました（むしろそっちが本題かも!?）。 コンテンツエリアのレイアウトパターン コンテンツエリア（たとえば、本文など）のデザインは、普通は1段組が基本で、たまに2段組とかが出てきます。3段組とか、それ以上はそれほどありません。商品紹介などで使うくらいではないでしょうか。 ほとんどの場合は、1段組のレイアウトパターンを基本として考えていけばいいかと思います。そして2段組のレイアウトパターンをテンプレートとして用意しておけばいいのではないでしょうか。 2段組のレイアウトパターンを考えてみる 2段組の構成を行う場合、どういう使い方をするのか考えてみました。 ほとんどの場合で、画像を片側に寄せて、余った領域に本文を入れていく」パター
IE7のCSSバグとOpera CSS Hack | F+R (FplusR)
少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。 IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。 検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。 また、W3C CSS validator でValidなもののみに限定しています。 Internet Explorer 7のハック 「*+html hack」（*+html bodyのハック）は、じつはOpera 8.0 以降にも適用され
XHTML+CSSでの効率的な制作をおこなう上でのポイント Part5 | F+R (FplusR)
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントをいくつか考えてみました。 予告しなかった第5回目です。今回は残りの部分を一気に行きたいと思います。すごく長くなるのでお覚悟を。 Web標準に準拠したブラウザを基準に制作する よく、Internet Explorer 5 or 6を基準にして作成してFirefoxやOperaやSafariでレイアウトが崩れるという話を聞きます。しかし、制作思想が根本的に間違えています。Internet Explorer 7が（いや、Microsoftが）、批判はともあれ、（曲がりなりとも）Web標準に準拠してい
XHTML+CSSでの効率的な制作をおこなう上でのポイント Part4 | F+R (FplusR)
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。今回はPart4です。CSS編のPart 3です。前回は嘘みたいな話ばかりでしたが今回は普通の話(!?)です。短くしたいのですが、どうしても長くなってしまいます。 CSSの記述順序は明確にする CSSの記述順序は明確にすることは、メンテナンスにも関わる問題です。ある程度パターン化しておくことが重要です。記述例を以下に書きます。 初期化CSS レイアウト構成divタグなど 共通モジュール ヘッダー、フッダー、コンテンツエリア、ナビゲーションなど Mach
HTML+CSSに足りない要素 | F+R (FplusR)
XHTML+CSS (r)evolutionに反応してなにか書いて見る記事のPart 1です。 「XHTML+CSSに足りないコト、ご意見募集」なんてネタに反応してみたりする（笑）。XHTMLには結構足りない要素があるとおもうので思うところを書いてみました。 サイト名に関するタグ Webサイトを見ていると、サイト名を必ずページの上部に示しています。サイト名がないWebサイトのページは見たことがありません。また、企業のブランドサイトでは、ブランドロゴと、企業名が両方入っている例（東京電力「Switch」など）もあります。 不思議なことに、XHTMLではサイト名に関するタグがありません。そこで、ある人は<h1>タグをサイト名に、ある人は<p>タグをサイト名にしています。そして、<h1>タグは、ページのもっとも重要なタグに付加しています。その基準は、人によってバラバラです。人によってばらばらな「
XHTML+CSSでの効率的な制作をおこなう上でのポイント Part2 | F+R (FplusR)
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。今回はPart2ということでCSS編です。長くなったので、今回はPart 1です。 最初は設計図を書くこと 慣れたら頭の中でできますが、最初はデザイン案を印刷して紙の上でどこにどのようなidやclassを振っていくか、幅や高さをどう指定するか書いておくといいでしょう。 当然ながら、1枚では書ききれないので複数に分けて書くといいと思います。また、デザイン案のPSDファイルの中に記録しておく手もあります。 CSSはブロックごとに設定する XHTMLの構成
XHTML+CSSでの効率的な制作をおこなう上でのポイント Part1 | F+R (FplusR)
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。Part1はXHTML編です。 XHTML文書の構造化をしっかりとおこなう 見出し、段落、リストなどの文章を構造化するタグをうまく活用していき、divタグはレイアウトブロックとして使うようにしていけば、余計なidやclassの数が大幅に減り、ソースがシンプルになります。 XHTML文書の構造化とは、イメージ的には、見出し、段落、リストなどの文章を構造化するタグをdivタグで包んでいます。包んだdivタグがいくつもあるとわからなくなるので、idやclas
hr要素と「clear:both;」 | F+R (FplusR)
Web Designningの記述から、Veerle's blogで使っているclear:bothをhrをうまく使ってやっている手法が気になったのでいろいろとやってみた。 hr要素にclear:both;を指定 はじめは。hr要素にclear:bothを指定しているものだと思ったのだが、実際のところ、やってみるとうまくいかなかったりする。ここで意外と問題になったのはNetscape7だった。ハックとかかけて書いてみても、Netcape7でうまくclear:bothが適用されなかったのでhr要素によるclear:both;は断念しました。 hr要素と「clear:both;」サンプル1 サンプルページへ div要素にclear:both;を指定してみる その1 Veerle's blogの記述を見てみると、「<div id="content-footer"><hr /></div>」という記
li要素のナビゲーションにおけるトラブル解決法 | F+R (FplusR)
トラブルの多いli要素のナビゲーションとは Internet Explorer 5 and 6 に限らず、Mozilla FirefoxやSafariでも実はけっこうあるのがli要素をナビゲーションで使うとき、すきまが開いてしまうとかという問題だったりする。 li要素の中にa要素で「display:block;」を指定するとInternet Explorer（5、6、7 Beta2）ですきまが開いてしまう問題が比較的有名である。 意外と知られていないのが、li要素に「display:inline;」を指定すると、左側にわずかなすきまが開いてしまう問題だ。空いてしまう間隔は5pxほどになる。 FirefoxやSafarinなど、どのブラウザでもこのすきまができるので、きっと仕様なのだろう。 「float:left;」を指定すればこのすきまは消えるが、すべてにおいて「float:left;
デフォルトスタイルの差異を無くすCSSで気をつけること | F+R (FplusR)
Universal selector（*）の指定 font-size:100%;を指定しない。 これは、Windowsの「ユーザー補助」関連の機能を有効にしたときに、Internet Explorer 6で画面が乱れるバグがあるため Universal selectorにline-heightを指定しない。 Universal selectorにline-heightを指定すると、一部分のみに違うline-heightを指定することが困難になるので、指定しない事が無難。 その他の指定 a[name]:hover{text-decoration:none !important;outline:0 !important;} Mozilla Firefox、Netscape7などのGecko系のブラウザのバグ対策。 ul li,ol li 使う事がおおいタグなので、細かい指定は各エリアごとに指定
overflow:auto;と印刷用CSS | F+R (FplusR)
overflow:auto;と印刷用CSSの問題とは 「overflow:auto;」で印刷用CSSを作成時に痛い目にあったのでメモ Mozilla Gecko系のブラウザ、Mozilla Firefoxや、Netscape7.1などで痛い目にあいます。 具体的には、印刷時にoverflow:auto;を指定した部分が１枚に印刷できないときに改ページせずに消えてしまう現象があります。Internet ExplorerやOperaでは問題なかったので、明らかにMozilla Gecko系のブラウザでの問題／バグだと思われます、 印刷用CSSでの対策 幸い、印刷用のCSSのみのバグなので、印刷用のCSSを書くときに@media printで印刷用CSSには「overflow:visible !important;」と指定しています。 @media print{*>/**/.ClearFix{
STUDIO NH | blog » ソーシャルブックマークを使ったネタの収集法
2006年5月18日、銀座で開催された「CSS Fight」（CSS Niteのアフターイベント）にて、「ソーシャルブックマークを使ったネタの収集法」というテーマでプレゼンをさせていただきました。 皆様、話を聞いてくださいまして、どうもありがとうございました。 プレゼン資料 プレゼン資料を以下にアップしました。 （XHTML+CSS形式） http://www.studionh.net/res/CSSFight20060518/ 付属資料 ソーシャルブックマークタグのRSSの一覧例（bloglines blog） 紹介したurl（補足） CSS Rounded Corners 'Roundup 角丸アイテムのまとめ JAVASCRIPT MOTION TWEEN JavaScriptでモーショントゥイ－ン Multifaceted Lightbox CSS Re
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
min* hack | F+R (FplusR)
CSSハックのまとめサイト | F R (FplusR)