THE HAM MEDIA BLOG

ブログのデザインをリニューアルしてみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
デザイン
タグ:
HTML
CSS
デザイン
ブログ

THE HAM MEDIA BLOG

何気にブログデザインを変更してみました。

できるだけがぞうを使わずCSS3などの新しい技術を利用していますので、IEなんかで見るときはちょっと残念なこと...すみません。

box-shadowでちょっとハマる

今回のデザインでは、うまい利用のしかたじゃないとは思うのですが、ちょこちょこbox-shadowを使っています。

使ってみてき気づいたのですが、横幅が100%で表示されているような部分でbox-shadowなどを使うと、100%の横幅を超えて横スクロールバーがでてしまうという。横を0pxにしていても、ぼかしで数pxつけた分のスクロールバーが出てしまいます。

//Firefoxでは横が100%を超えてスクロールバーが出る
-moz-box-shadow:0px 1px 3px #000000;

解決方法

これの解決方法は、単純にx軸のずらしをぼかしと同じ分だけ、ネガティブに指定するだけです。

//スクロールバーが出ない
-moz-box-shadow:-3px 1px 3px #000000;

webkitでネガティブ指定すると

Firefoxはこれで解決するのですが、webkitでは同じようにネガティブで指定すると、ネガティブ方向へ移動します。上記の場合、webkitでも同じ指定をしてしまうと、左側へ3px移動してしまうのです。この点はFirefoxとwebkitの動作の違いのようなので、注意が必要なようです。


左側へ移動

今後もちょこちょこ変更予定

現在はとりあえず様子をみつつ、変更していっています。まだ今後も変わっていく箇所があると思いますので、お楽しみを。また、こんなの入れたらどうですか〜なんてのがあればぜひ教えてくださーい。
どうぞよろしくお願いします。

この記事へのコメント
突然おじゃまします!
先日CSS勉強会に参加した高橋ともみです!うんち頭にかぶった人です!
とってもタメになりましたし、参加できてよかったです!

ハムさんは勉強はじめてまだ1年半だったのですね!?すごい驚きです!
私も1年たつころなのですが、いまだにヘッポココーディングでよく怒られます…
私も見習わなくては思いました。

年明けにまたあれば参加したいなと思います(^^)
そのときはまたよろしくおねがいします!

では!
Posted by Tommi at 2010年11月29日
>Tommiさん
コメント&先日のSaCSSありがとうございます。
1年半の情報はどこから(笑)
1年半は今の会社に来てからですから、本格的にWebの勉強をはじめてからで考えると3年半になります。まだまだ自分もへっぽこですよ。

また是非参加してください!
こちらこそ、どうぞよろしくお願いいたします。
Posted by ハム at 2010年11月29日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。