Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。Resetに変えてしばらくたって、いままで気付かなかったけどbodyの背景関係が困った事になるのね。dog.</p></body></html>[/html]最初何が原因かわからなくてブラウザが壊れたかと思った。Resetが残って判った。Resetがhtmlに指定した値を下で上書きでとりあえず解決みたい。フォントブログこちらで知って登録してみました(登録方法もスクリーンショット付きで詳しく書いてありました)。どんなサービスで、何が凄いかっていうとこんな感じらしい。使ってみるとこんな感じ。続きを読む2010.05.04ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。まとめのcssを書いてなかったので追加した。ddのfloatをleftからrightに変更したサンプルを追加してアップした。dl,dt,ddは普段からよく使うタグで、横並びの表示もとくに構えることなく使ってきました。今まで使っていたcssではdtの高さがddを越える場合にちょっと都合が悪くなります。ハイパスとアンシャープマスクを比較)を書いてる時に思い出したというか気づいたわけです。いう事で、2010年のいまさらですがddよりdtが高くなっても崩れないように定義リストを横並びさせる方法を考えてみました。確認用に作成したページ|ddよりdtの方が高い定義リスト(dl,dt,dd)を横並びさせる。(画面内で開く)続きを読む2010.04.29css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置ひとつ前の記事中に使った画像のサイズを勘違いして作成してしまい、テーマによっては段落ちが発生してた。それがどんな勘違いだったかというとそりゃもう酷い話で、まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。実際は両方の画像に右marginがつく為、本当のところmarginは2倍。画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。E:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。memocarilog2012年の記事だから今は他のブラウザにも実装されたのかしら?[追記ここまで]css3のbox-shadowを使うと(ベンダープレフィックスが必要だけど)簡単に影をつけられる。[ドロップシャドウ])みたいにオブジェクトの輪郭に沿って影がつくのだろうか?それとも画像の外側に四角い影がつくのだろうか?ドロップシャドウのようになったら素敵だなぁと思って試してみました。