imaiの記事一覧

リンク画像をonmouseを使わずにcssで変化させるTips

リンクになっているバナーなどの画像を簡単にonmouseで変化させたい時のちょっとしたTipsです。

jQueryを使った外部のhtmlの読み込みTips

jQueryを使ってヘッダ、フッタなど共通部分のhtmlを本体のページに読み込むカンタンTipsです

文字数の違う複数の項目をliタグを使って綺麗に並べるTips

フォームの選択項目をliタグとcssのfloat、min-width、white-spaceを使って綺麗に並べるTipsです。

スタイルシートの小ネタ〜idとclassの合わせ技で指定する〜

スタイルシートを適用するのにidやclassを使いますよね。今回はその使い方の中から、たまに役立つ小ネタを紹介します。

サイトの配色を助けてくれる「Color Scheme Designer」

こんにちは。まいです。サイトのデザインを作るとき、色をどうするか？というのも一つの悩みどころですよね。そんな悩みをそっとサポートしてくれるのが「Color Scheme Designer」。デザイナーにとっては色を決める時のサポートに、デザイナー以外にとっては、サイト全体の配色をおまかせできちゃう優れたサイトです。  実際にちょっと使ってみましょうー。

list-style-imageを使わずにリストマーカーに画像を使う

こんにちは、maiです。今回は初心に返って、ごく簡単で使いどころが多い「リストマーカーを画像にする」について。 リストマークを画像にする場合、list-style-imageというプロパティが既にありますが、これを使うとちょっとズレたりしちゃうのでデザインとしてちょっと…ということがあります。そういうズレを防ぐためにも、リストマークを画像にする時はbackgroundで入れてしまいましょう。 具体的にはこんな感じ↓

ブラウザのデフォルトスタイルをリセットする

こんにちは、maiです。今回はコーディングでデザイン用にcssを書き出す前の下準備のお話。ただhtmlを書いただけでも、見出しは大きかったり、リストには黒い丸が表示されたり、strongは太字になったりemは斜体になったり、そのすべてはブラウザがもともと持っているstyleです。 まあ…正直邪魔ですよね。リストのマークは黒丸じゃなくて画像で作った矢印にしたいし…とか。 そんなとき、いちいちlist-style: none;なんて書くのはめんどくさいことこの上ない。１カ所だけならいいんですけどね。  なので、もう最初からなかったことにしたいstyleはリセットしてしまいましょう。↓に実際に使ってるリセット用cssを一気に公開です。

CSSハック〜IE8編

そろそろIE6が世の中から消えてもいいと思うmaiです。ほんと…IE6がなくなるだけでもだいぶ色々楽になるのに。IE6がまだまだ現役の中、IE8が登場してきました。beta版の頃は一部のマニアックな人だけだから！とか言ってられたんですが、正式版になってしまったのでいつまでも対象外にはしていられません。というわけで、IE8にだけ適用するハックを調べてみました。 実はまだ実践してないのでメモですが… 間違っていたので修正しました。今度こそ多分…(2009/6/3)

IE6で背景が出たり消えたりする件について

こんにちは。maiです。 cssでレイアウトを組んでいるとIE6とは日々戦いです。 今回は、スクロールしたりリロードしたりしたときに、 IE6だけ背景が表示されないことがあるという めんどくさいバグ（通称いないいないばあバグというらしい）の対処法について。

IE6でposition:absoluteしたボックスが消えるバグ

こんにちは。maiです。 IE7の登場により徐々にシェアを減らしつつあるIE6ですが、 そうはいってもまだまだ健在です。 そしてそのバグもまだまだ健在です…。 今回はpositionの値をabsoluteにしたボックスが、 なぜかIE6で見えなくなってしまうバグについてその対処法をご紹介です。

clearfix for Firefox3

最近htmlとcssばっかり書いてるまいです。 ruby?なにそれおいしいの？状態… そんな最近作業をしてて、先日書いた「clearfixでfloat解除」のclearfixでは Firefox3でちょっとおかしなことになってしまったので、 さらに手を加えてみました。

CSSハック〜モダンブラウザ（IE、Safari）編

こんにちは。maiです。 web標準化の波のおかげで、時代はcssレイアウト。 でもcssってブラウザごとにズレたりするのが困りものですよね。 そんなときにブラウザを限定してcssを適用するハックをご紹介します。 ちなみに、Firefoxが一番仕様に近い動作をするので、 cssを書くときはまずFirefoxで確認しながら書きます。 そのためFirefox向けのハックは基本やりません。

Ruby、Railsインストール for MacOSX

最近ようやくド初心者は脱出できてきた感のあるmaiです。先日、ちょっとした事情でMacにRubyをインストールしなおしたのですが、半分くらい助けてもらったので、自分でもちょっとわからないところもあり。 ちょっとでも記憶が新鮮なうちに、一連の作業をメモ。できるだけ私みたいな初心者にもわかるように！  

clearfixでfloat解除

こんにちは。最近Rubyをあんまり触ってないmaiです。 あんまり触ってなくて、Rubyについてあまり語れるほどのことが無いので、今日はstylesheetのちょっと役立つTipsをご紹介。cssでfloatを使うと、画像やらボックスやらが親要素からはみ出しちゃうことがあります。これを解消するには、親要素を閉じる前にfloatをclearで解除すればいいのですが、空divでclearさせるのは無駄なソースだし美しくない。そんな美学か美意識を持ってる人にお役立ちなのがclearfixというテクニックです。 ----------------------------------- 以下のclearfixはFirefox3でうまくいかないことがあります。 Firefox3にも対応したバージョンは 「clearfix for Firefox3」で。 -----------------------------------

エラー表示で意図しない改行を解消する−fieldWithErrors、ActionView::Base、field_error_proc

こんにちは。maiです。Ruby on Railsにはいろいろと便利機能がありますが、フォームでvalidationに引っかかると該当箇所が赤く強調されるというのもその一つですね。ただ赤く強調されるだけなら、とっても便利な機能がありますで終了なのですが、この機能、該当箇所を強調するだけじゃなく、改行まで入っちゃうのです。 sample:元々の表示 sample:エラーになったときの表示かなりカッコ悪いことになっています。サイトのクオリティを考えれば、ぜひとも元の表示のように1行の状態で赤枠が出る状態にしたいですね。

mongrelとの戦い〜503エラー？mongrelが死んだってことさ…

mongrelがあまりにも死ぬのでdeploy恐怖症にまでなった初心者のmaiです。mongrelってよく死にますよね。体感的には10回restartしたら1回はダメになる感じです。つい昨日もmongrelは沈黙しました。もやしっこめ。 そんなもやしっこmongrelを叩き起こす方法の一つを拙いながらもご紹介します。