[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
![[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。](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)
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ（略）みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、
CSS 回り込み解除の決定版 | ユージック
CSS 回り込み解除の決定版 2007年1月19日 ここ最近コーディングをしていてDRY(Don’t Repeat Yourself)同じ作業を繰り返さないという考え方をCSSやマークアップにも取り入れていきたいと思うようになりました。そこで今回はfloatに関する便利なTIPSをご紹介します。 floatをかけた要素の後続要素は自動的に回り込んでしまいます。それを解除するためにclearを後続要素にかけてfloat解除しますが不自然さを感じます。というのも別の所でその後続要素を回り込ませたい場合などがあれば、floatの解除の解除といった同じ作業を繰り返してしまうからです。 そこでfloatの後続要素にclearをかけずにfloatした要素を含んだ親のブロック要素にclassをつけるだけで後続要素を回り込まなせないような方法があります。 classは2つでも3つでも付けることができますの
入れ子にしたfloatのclear
初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、floa
floatした際に背景が消える件【css tip】 - to-R
親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、以下のような表示になります。 サンプル これはIEがfloatの処理が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
