clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
リスト全体の余白を調整する
margin の値には auto（自動）を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン（外側の余白）を指定する ボックスのパディング（内側の余白）を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u
[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
![[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
背景画像の表示方法-基本編
今回は、「角が丸い背景（角丸）の実現方法」をご紹介していきます。 サイドメニューや、コンテンツをグループ毎に表示する際など、 角が丸くなっている枠で囲まれているページを見たことがあるかと思います。 この角が丸くなっているボックスのことを通称「角丸」といいますが、 みなさんはこの角丸をどのようにコーディングされていますか？ css3では、角を丸くするスタイルや １つの要素に複数背景画像を設定することができますが、 まだ策定段階（対応していないブラウザがほとんど） のため、今回は触れません。 角丸の実現方法はいくつかあると思いますが、 私からは下記の3パターンご紹介します。 ・分割なし ・2分割 ・3分割 （通常はこちらを使用） 「分割なしのパターン」 これは、普通に背景に設定するだけのパターンです。 （htmlコーディング例） <div class="entry1"> テキスト<br />
【CSS】Safari4 でも効く CSS ハック | バシャログ。
自宅用に新しく購入したパソコンに早速 iTunes をインストールして手持ちの CD をインポートしたところ、想像以上に取り込みスピードが速くて感激しきりの sakai です。 週末は 1 日中 CD をインポートして過ごしてしまいました。 今回は Safari 用の CSS ハックについてです。 ハックを使わないのがベストだと思いつつも、どうしても Safari 用に CSS ハックをする必要がありました。 使用した Safari3 のハックは以下です。 html[xmlns*=""] body:last-child セレクタ { } 有名です。Safari 用のハックを使う時はいつもこれを使っていました。 しかし、このハックが Safari4 では効かず、ついでに同じ WebKit 系の Chrome2 でも効かなくてほとほと困ってしまいました。 そして、Web で検索して見つけました
safari4のCSSハック | WEB MEMO:RE
今まで使ってたsafari3のハックがsafari4では通用しなかった。 下記、safari4でも効くCSSハックです。 body:first-of-type example : body:first-of-type body { back-ground: #333333; margin: 10px }
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
floatした際の背景表示-IE-CSS TIPS
floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。 逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適応した場合、FirefoxとIEはともに同じ表示になります。 サンプル fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『（ＢＬＯＧ）リンク・フォーカス時の点線が画面外まで拡張される問題』へのコメント
