NexTech » スクロールバーの有無によるセンタリングのずれを解消するには
IEでは右端のスクロールバーが常に表示されているのに対して、FireFoxではコンテンツが少ないと スクロールバーがなくなってしまう。そうするとコンテンツをセンタリングさせた時などにずれる。 で、最終的にIEでもOperaでもFireFoxでもずれをなくす方法はコレ。 ※ 但し、最下部にフッター固定のテクニックを使っている人は使用に際して注意されたし。 html { height:100%; margin-bottom:1px; } 基本的な考え方 とりあえずFireFoxで常にスクロールバーを出すには html{overflow-y:scroll;} と指定してあげればいい。 bodyに適用するとIE6と7で二重にスクロールバーができてしまうので htmlに適用しているのがポイントです。 ところが、これだとOperaには対応していない。 overflow-yは元々はIE独自でcss3にな
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
リストを横並びにした時の空白をなくす方法
リストを横並びにした時の空白 リストをdisplay:inline;などで横並びにすると、リストとリストの間に空白ができちゃうんですよね。これを知らないと、paddingを0にしたりとかmarginを0にしたりとか、そういうのでがんばろうとしてしまうんだけど、実はそうじゃなくてHTMLの書き方によって(改行)空白できちゃうんですよね。 これをdisplayプロパティで横に並べる時、どの方法なら隙間なく並べられるか！他の方法とかを含めて検証してみましょう。 いろいろ検証してみる ネタ元の方法が実際にどうなのか、そして、他の対処法も含めて検証してみます。 尚、今回の検証では、IE6、IE7、IE8、Firefox2、Firefox3.0、Opera9.6、Safari、Chromeで検証しました。 １、単純に改行した場合 ■HTML <ul> <li>サンプル</li> <li>サンプル</l
Image Rollover Borders That Do Not Change Layout
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s a fact of CSS life that the ‘border’ of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves,
jQueryを使ってメニューを装飾：LavaLamp menuを使ったメニューを作ってみる
同じ会社のYさんが、動くメニューが作りたいということで、 JavaScriptでアニメーションするようなメニューを探していた。 そしてYさんが「Fancy menu」というのを見つけていた。 Mootoolsのライブラリを使って動作するものらしい。 MootoolsではなくてjQueryのプラグインで無いかなって探したところ、 「LavaLamp menu」というプラグインを発見。 いろいろなところで利用できそうなので、試しに使ってみた。 ※現在IEだとうまく動作しない様子。 CSSの設定がうまくいっていないのもあるので後ほど調節予定。 ※追記（8/22） IE7ではうまく動作するようです。 IE6ではここのブログ上ではうまく動作しない現状です。 ※追記 全体的にうまく動作していないので後で修正します。 今はまだスムーズに動いてくれないようです。 ※追記（8/22） Fx,Opera,Sa
『現場のプロから学ぶXHTML+CSS』サポートサイト
認証のため、コメントができなった方、大変失礼しました。下記の方法にてコメントできるようになっていますので、ご利用ください。 匿名でのログイン（captcha：暗号みたいな英数字の読み取り） mixiのIDでのログイン 「ID：guesst、パスワード：（書籍の2ページに掲載しているパスワード）」でのログイン ご質問はこちらのエントリーでコメントとして書き込んでいただければ幸いです。 CSS Nite ビギナーズでいただいたご質問に回答します。 ご質問の内容は「同じ目的を達成する方法として、JavaScriptライブラリを利用する方法とCSSを利用する方法、両方がある場合どちらを利用すればよいのか?」というものでした。 ケースバーイケースです、とお答えしましたが、いくつかのパターンを紹介いたします。 デメリット、メリットを考慮して、どちらの手法がそのサイトに対して有効かを見極めるとよいでしょ
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
今よりコーディングのスピードを上げるには
「今よりコーディングのスピードを上げる17の方法」とかってタイトルにしたら、いかにもそれっぽい感じがするなぁ（笑） さて、仕事をする上でもっとも重要な要素の一つに、作業スピードって有ると思うけど、正直最近の自分が以前に比べて早くなっている気がしない今日この頃。 一応、現状の作業スピードでも期間内に納品は出来てるから最低限の作業スピードは確保されてると思うんだけど、コレが1.5倍くらい早くなったら、空いた時間に勉強したり、もっとガンガン組んでいけるから、速さを極める事はとても重要だよなーと。 なので、自分がやろーとしてる思いついた方法をメモ。 コーディングのスピードが上がりそうな事 無理やり出した感も有るけど、取り合えず思いついた方法を。 1）基本的なタイピング速度を上げる。 タイピングソフトとかを活用して、基本となるタイピング速度を上げれば少しはコーディングのスピードも速くなるかもって思っ
CSSバグリスト＠CSSバグ辞典スレッド
『CSSバグ辞典スレッド』の要約 ここは、2ちゃんねるweb制作管理板内のCSS/DHTMLのバグを扱うスレッドで挙げられた、各ユーザエージェントのCSSやDHTMLの実装上のバグをまとめているサイトです。 更新履歴 WinIE171, 172、NN031、Opera091を追加。WinIE151を修正。（2004-11-29） WinIE169, 170、Moz085を追加。WinIE030, 039、Moz070、Opera048を修正。（2004-10-09） NN029, NN030、Moz084を追加。Moz033を修正。（2004-08-23） WinIE168、Moz082, 083を追加。WinIE022, 166を修正。（2004-08-08） Moz081、Opera090、Safari022, 023を追加。（2004-07-26） 以前の履歴 本拠地スレッド CSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
リンクをデザインするCSSいろいろ - DesignWalker
スッキリかんたんスタイルシート