ブログのデザインをリニューアルしてみた
何気にブログデザインを変更してみました。
できるだけがぞうを使わず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の動作の違いのようなので、注意が必要なようです。
左側へ移動
今後もちょこちょこ変更予定
現在はとりあえず様子をみつつ、変更していっています。まだ今後も変わっていく箇所があると思いますので、お楽しみを。また、こんなの入れたらどうですか〜なんてのがあればぜひ教えてくださーい。
どうぞよろしくお願いします。
先日ＣＳＳ勉強会に参加した高橋ともみです！うんち頭にかぶった人です！
とってもタメになりましたし、参加できてよかったです！
ハムさんは勉強はじめてまだ１年半だったのですね！？すごい驚きです！
私も１年たつころなのですが、いまだにヘッポココーディングでよく怒られます…
私も見習わなくては思いました。
年明けにまたあれば参加したいなと思います（＾＾）
そのときはまたよろしくおねがいします！
では！
コメント＆先日のSaCSSありがとうございます。
１年半の情報はどこから（笑）
１年半は今の会社に来てからですから、本格的にWebの勉強をはじめてからで考えると３年半になります。まだまだ自分もへっぽこですよ。
また是非参加してください！
こちらこそ、どうぞよろしくお願いいたします。