css, tipsというわけで、searchform モジュールの入力欄とボタンに別々のクラスがついたので、やってみました。CSS の Tips 的な記事なんて何年ぶりだろう。 IE6, Firefox3, Opera9.5, Safari3 で確認してます。準備として、ボタンの画像を用意し、その画像の高さを幅を把握しておきます。border は鬱陶しいので無し、 width と height を指定します。ここでは 30x30 であるとします。 input.searchform-button { width: 30px; height: 30px; border: none; } 次に「検索」という文字が見えなくなるように細工します。 input.searchform-button { width: 30px; height: 30px; border: none; text-inden

ローカライズについて Web Develoerの日本語にかかわる問題が、ほぼすべて解決したことと、Infoaxia社から管理を移管したことを受けて、今後のWeb Developerのローカライズは、BabelZillaで行うことにしました。ローカライズの議論については、BabelZillaのディスカッションパネル、またはメッセージボードでやりとりできればと思っています。自分のアカウントは「minato」です。遠慮なくお声をかけてください。 Webdeveloperとは Web Developerとは、ウェブ制作を補助する拡張機能です。拡張機能は、Firefox, Seamonkey, Flockのツールバーとして組み込まれます。そのため、それらのブラウザが動作する環境であれば、OSに依存せずに利用することができます。現在、Windows, MacOS X, Linuxでの動作を確認していま

すぐに使えそうなネガティブマージン 2008-05-15 0 0 XHTML/CSS CSS, margin margin にはマイナスの値を入れることができます。マイナスの値を持つ margin を「ネガティブマージン」と言ったりします。 あまりむずかしくなく，すぐに使えそうなネガティブマージンを紹介してみましょう。 見出しにネガティブマージン 本文の左に見出しよりも大きな余白をとりたいというとき。 <div class="section"> <h3>見出し</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> </div> div.section { padding-left: 15px; } div.section h3

仕事で z-index プロパティを使う機会があったんですが、なんだか上手くいかなかった。いろいろ試行錯誤してようやく思い通りの動きをしてくれたので、ここに z-index プロパティの仕様を含めたまとめを書いてみる。 まずは z-index プロパティの仕様から。引用するのが面倒なので仕様書をそのまま見てください。 Visual formatting model - 9.9 階層化表示 簡単に仕様をまとめると、 position プロパティで [fixed] [absolute] [relative] のいずれかの値を持つ要素（つまり [static] 以外の値）にのみ適用される z-index プロパティの [auto] はボックスの重なり順が親要素と同じになる [整数] は値が大きいほど値が小さいボックスよりも前面になり、小さいほど大きい値よりも背面に配置される [整数] はマイナス

Mac 版 Firefox の標準のテーマでは、ブックマークツールバーに favicon が表示されません。これはこれですっきりとしてんですが、スペースを取らない様に名前を無しにして favicon だけにするってことが出来ないんですね。 そうなるとお決まりのユーザスタイルシートでとなる訳ですが、既にそのものズバリがGrApple - Aronnax`s Firefox Themes にありました。ただこれだとフォルダーのアイコンも表示されてしまうので、ほんのちょこっと手を加えてみました。 画像の上半分がスタイル適用前、下が適用後です。そして以下がそのユーザスタイルシート。 Firefox 2 用 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* ラベルを非表示にするにはコメン

The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code

CSS | 22:40 | 最近記事部をリキッドレイアウトにして、サイドバー部を固定幅にするっていうのが個人的なブームで、下の記事で書いた公開デザイン「muffler」もそういう形で作られているのですが、これが割と変わった方法が必要でかなり苦労したのでメモとして残す事にします。マフラー部の指定方法として、background-positionでパーセント指定することで揃えています。 /* 下に延びる部分 */ body{ background: #3F3010 url(http://f.hatena.ne.jp/images/fotolife/c/chepooka/20071119/20071119215510.gif) repeat-y 80% top; } /* 横に伸びる部分と上のくにゃってなってる所 */ h1{ background: #E74F00 url(http://f.h

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

Hi, I’m Dan Cederholm. SimpleBits® is my tiny design studio, type foundry, and goods shop. We make letters and numbers (and goods with those letters and numbers on them) for people like you. Handmade in Salem, Massachusetts. SimpleBits has been my design studio and hypertext home for over 20 years. At times, I’m available for select logo design projects. Previously, I co-founded Dribbble. I also i

Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。