CSSCheckTweetこんにちは。日本にいるのと同じ感覚で、職場の自分の机上にアップル社のiPhoneGを置いていたらいつの間にか盗まれていたmartinです。購入して2ヶ月も経ってなかったと思うけどなぁ。こちらでは、たとえ自分のデスクに置いていても、それが貴重品であれば「どうぞご自由に持っていって下さいませ」ということになるらしい。おかげ様で、今ではトイレに行く際にも、いちいちノートパソコンを隠すようにしています。人を見たら泥棒と思えなんて実践したくはないけど、この国ではしょうがないです。愚痴ったところで、正式版で実装予定のボタンのデザインについてメモしておきます。最終的に目指すのは以下のようなボタンです。呼ばれるよく知られたテクニックを用いて実現していました。)バージョン1.6までは、素直にBUTTONタグを使っていたんですが、これだとデザイン上の制約があるなぁ、と思ってました。各種ブラウザでBUTTONタグに対するpaddingの解釈も違うしなぁというのもあって。デザインに関してこれらの点はクリアできることが分かりました。個人的に、BUTTONタグを使う際にデザイン上のネックであった点を挙げてみると、IEで、ボタン内のテキスト左右に指定を無視したパディングが取られること。Firefoxで、BUTTON要素内に入れたSPAN要素周りのパディング(マージン?)をなくすことが出来ない。これの回避方法が分からなかったというのもあり、A要素とSPANとを用いていたんですが、解決しました。以下のような記述の実際例を下に挙げます。スクリーンショットのように、IEではボタンが横長(縦方向もですが)になり、パディングの指定を無視してるのが分かります。山のフドウ左がFirefox、右がIE7。visible;を追加すれば良いです。絡みだとは思いますが・・・。この方式では、この指定によって他のブラウザが影響を受けないのがグーです。山のフドウ2番目のネック、FirefoxでBUTTON要素の入れ子要素に余分な余白が付く件ですが、これも実例で。次のようにスタイルを指定します。期待するのは、BUTTON要素の背景色である赤が見えずに、入れ子のSPAN要素に適用した背景色の黄のみが見えることです。指定をすることでSPANの高さを親要素のBUTTONの高さと一致させていることに注目。block;">雲のジュウザ</span></button>さて、実例を見てみましょう。5でも同様)、意図しない余白が左右と上に現れ、BUTTONタグの背景色の赤色が見えると思います。他のブラウザでのスクリーンショットを以下に。IE6だと下の部分にパディングが現れるかもしれません(下に赤いラインが入る)。このFirefox特有の振る舞いを回避する方法ですが、この構造(BUTTON要素にSPAN要素を入れ子にする)を維持したいのであれば、スタイルシートに以下の指定を追加します。これは色々試してようやく辿りついた方法ですが、左右の余白までは消すことは出来ません。}どうせなら他のブラウザみたく左右の余白も消し去りたいです。doorsのテクニックは使いたいので、入れ子構造は必須です。実は、簡単で、BUTTONタグの中に別の要素を入れ子するのではなく、BUTTONタグを入れ子の対象にしてやれば良いです。具体的には、以下のような感じになります。visible;">海のリハク</button></div>実際のサンプルは下。DIV要素は別にP要素でも構いませんが、BUTTON要素にはブロック要素も含めることが出来るので、そんな場合はインライン要素のみを包括できるP要素では役不足になります。余白が消えたのはいいですが、今度はBUTTONタグを囲ったDIV要素の背景色の赤が、ズラッと端まで伸びてます。これはDIVがブロックレベルの要素なので当然の振る舞いです。これを回避するには、具体的な横幅を指定するというのがありますが、長さが予め分かっていて決め打ちなら良いのですが、このブログでの使用例のように(コメント数に応じて)長さが変わることもあります。あるのはフロートを使うやり方。left;を追加します。この修正をしたのが以下。海のリハク正しくレンダリングされていればBUTTONタグの黄色の背景色と黒い文字しか見えないはずです。これでオッケーですね。うーん、確かにフロートを使用すると、この辺りの扱いが難しくなります。CSSには、ブロックレベルの要素をあたかもインライン要素のように扱える指定があって以下のやつです。そのまんまの名前が付いてます。Firefox2.xは上に未対応なので独自のやつで。hasLayoutをかまし、さらにIEだけにinline指定。*/何だかちょいと入り組んでます。これは説明が必要ですね。1段目は、まっとうな指定でこれに対応しているのは、Opera9.2xとSafari3x、Firefox3.x、そして条件付きでIEです。Firefox2.xは未対応ですが、独自の-moz-inline-boxで対応できます。「条件付きで」IEにも効くと書きましたが、これはどういうことかというと、もともとインライン要素のもの(SPANとかSTRONGとか)に対しては、これを指定するとインラインブロックとして振る舞いますが、もともとブロックレベルの要素(DIVとかPとかH3とか)に対してはこの指定は無効です(それどころか振る舞いが更におかしくなる)。同じ振る舞いをします。DIV要素はもともとはhasLayoutが無効なので、zoom:1;(常にhasLayoutが有効になる)を指定します。inline;という指定をしますが、これだと他のブラウザ向けの指定を上書きしてしまうので、IEしか解釈しないように、頭にスター(*)を付けます(スターハック。htmlのスターハックとは別物です)。この修正を施したものを見てみましょう。扱いづらいフロート属性はもはや不要です。海のリハクちゃんとセンタリングも出来ますね。以上の指定でようやく各ブラウザでの差異を吸収できて、ボタンタグを使う準備ができました。IE6は、これらでも完璧にはならないけど、まぁいいか。前置きが長くなりましたが、こうやってパディングやマージンの指定がきちんと効くやり方(最初はゼロを指定してそれがきちんと適用されるか)を抑えておけば、後は、それを弄るのは簡単です。次のページで、背景画像を利用したボタン効果を見ることにします。思いましたが、疲れたのはとりあえず今日はここまで。デモページへのリンクを貼っておきます。2008/05/04@22:06:34こんにちは。仕様というか、BLOCKQUOTEの入れ子には色々解釈があるようなので、まぁ何もしないのが良いかなと思ったんだと思います、自分もいつ頃そうしたか把握していませんが・・・。最近の動向を見てから正式版に反映させようと思います。2008/05/04@22:53:28>色々解釈なるほどなるほど。2008/05/05@00:17:21いやぁ、まぁいつでも良いのですけどね、最近は大きなバグの報告もないようですし。来週中(ウィークデーに)と答えておきます。2008/05/05@19:13:55先ほど、テスト・サイトで、カテゴリを削除しましたら、親カテゴリは削除できたが、子カテゴリでは削除できませんでした。子カテゴリ名が消えませんでした。確認だけお願いします。(すぐ手動でファイルからカテゴリ名を消しましたので、ログのほうはどうだったか、確認しませんでした。2008/05/09@23:11:26確かにそうなりました。PHPの処理的に、ちょっと納得がいかない部分があるのですが、うまく行くようにしました。2008/05/05@21:22:32>Weekday了解です。現行で完成させることにします。2008/05/09@23:05:51こんにちは。考えたことはありませんが、まぁそうですね。'';みたくすればOKかなと思います。2008/05/06@12:27:35ページ作成画面のローカルプレビューが付いたので大分作るのが楽になったと思うのですが、それについての提案です。ページのローカルプレビュー時に、div#preViewAreaにclass="page-box"かあるいは順ずるページプレビュー用のクラスを設定するか、#preViewArea内にdiv.page-boxを生成するというのはいかがでしょうか。ページ用の指定は実質page-boxクラスを元に指定することが多いと思うので、よりローカルプレビューの精度を上げやすくなるかと思います。(現行でも#preViewAreaに対して指定をすれば問題ないと言えばないのですが、エントリのローカルプレビューと干渉してしまうので......)>サブカテが削除できない私も確認しました。iniファイルの方にも残ったままですね。2008/05/09@23:09:32ページ作成の方は、page-boxというクラス名を予め入れ子にするようにしました。カテゴリー、ようやく昨日見てみました。2008/05/10@11:43:12対応感謝です。ブログバー、久しぶりに使ってみようかなとテーマに組み込んでみたのですが、これって定期的に生成しなおす必要がありますよね?そうなると、生成しなおすときに前回の入力値を覚えていてくれないために生成しなおすのが若干面倒になるかと予想されるので、入力値を覚えてくれていると便利かと思います。defined」というJSエラーが出てます。2008/05/10@23:16:33あれっ、ブログバーは、色とかサイズとかはクッキーに食わせる処理をしているのですが、動いてないですかね。こちらのテスト環境ではちゃんと覚えてくれてるようです。掛けて、残骸はないと思っていたんですが、助かりました。ありがとうございました。[追記]クッキー処理は、期限の指定が抜けてました。仕様上ブラウザを閉じると消えちゃいますね。このサイトのやつを試して「あれっ?」と思いました。これは長めに設定しておきます。URL:設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。(U):タグは使えません。この非公開機能を使うにはブラウザのクッキーが有効である必要があります。レスを確実に知ることができます。最新10件のコメントmimimimifaghasegawahiroshimartinsarutarosスーパーコピースーパーコピーウブロスーパーコピー時計のブランド時計コピー通販です。弊店のウブロコピー時計等のブランドコピー時計は送料手数料無料で、業界NO.1品質2年無料保証です。全サイト15%OFFキャンペーン実施中です。