IE6でブロック要素をセンタリングする - 毎日がひとりオフ
ものっそ今更な記事。 XML宣言掛けたXHTMLだと、IE6が後方互換モードで動作するため、marginのauto指定でブロック要素のセンタリングができない。 <body> <div class="content"> <p>ですとろーい</p> <!-- /div.content --></div> </body> 上記の場合、margin: autoを掛けただけでは、div.contentがIE6で左側に表示されてしまう。 ただし、IE6以前のIEでは、text-alignで内包するブロック要素まで配置を変更する仕様になっているので、以下のCSSで対処可能。 div.content{ width:500px; margin:0 auto; } /* ie6対策 */ * html body{ text-align:center; }* html div.content{ text-ali
それなりに使い勝手が良さそうなヘッダーのサンプル4種｜CSS HappyLife
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？ ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。 文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。 今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。 感謝感激でございまする。 デザイン提供してくれた方は
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
Properties - CSS 2.1 Reference - Cultured Code
show yes table cells with separated borders FF Op Sa table-layout table-layout Enables fast table layout Either auto or fixed. If table-layout is set to fixed than the width of the table columns are computed after the first row. Explicit values for width on column elements are honored. auto no tables and inline tables having their width property not set to auto. FF Op Sa IE caption-side caption-si
CSS だけでフォトギャラリー - lucky bag
CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。 gallery.html (X)HTML は下記のように、画像を順不同のリストで並べている。 <ul id="gallery"> <li><a href="#empty-anchor"><img src="01.png" /></a></li> <li><a href="#empty-anchor"><img src="02.png" /></a></li> <li>
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マージンの相殺について：CSS | Tech de Go