https://b.hatena.ne.jp/crema/float/ floatに関するcremaのはてなブックマーク (7) http://h2ham.seesaa.net/article/109568808.html crema 2009-04-21T06:49:43Z float css <blockquote cite="http://h2ham.seesaa.net/article/109568808.html" title="float関連の問題で覚えておくべき５つの対策"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fh2ham.seesaa.net%2Farticle%2F109568808.html" alt="" /> <a href="http://h2ham.seesaa.net/article/109568808.html">float関連の問題で覚えておくべき５つの対策</a></cite><p><a href="http://h2ham.seesaa.net/article/109568808.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2ec71514b0d3548b26c9156eb450fdf4c1723f36/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fh2ham.up.seesaa.net%2Fimage%2F20071020_138961.jpg" alt="float関連の問題で覚えておくべき５つの対策" title="float関連の問題で覚えておくべき５つの対策" class="entry-image" /></a></p><p>CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこな...</p><p><a href="https://b.hatena.ne.jp/entry/h2ham.seesaa.net/article/109568808.html"><img src="https://b.hatena.ne.jp/entry/image/http://h2ham.seesaa.net/article/109568808.html" alt="はてなブックマーク - float関連の問題で覚えておくべき５つの対策" title="はてなブックマーク - float関連の問題で覚えておくべき５つの対策" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/h2ham.seesaa.net/article/109568808.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 80 http://www.d-spica.com/try/dt-float.html crema 2008-10-11T03:38:24Z dl html css float <blockquote cite="http://www.d-spica.com/try/dt-float.html" title="CSS - dtをfloatする場合の注意点 | Try | d-spica"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.d-spica.com%2Ftry%2Fdt-float.html" alt="" /> <a href="http://www.d-spica.com/try/dt-float.html">CSS - dtをfloatする場合の注意点 | Try | d-spica</a></cite><p><a href="http://www.d-spica.com/try/dt-float.html"><img src="" alt="CSS - dtをfloatする場合の注意点 | Try | d-spica" title="CSS - dtをfloatする場合の注意点 | Try | d-spica" class="entry-image" /></a></p><p>dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り &lt;dl class=&quot;recent&quot;&gt; &lt;dt&gt;2008-05-12&lt;/dt&gt; &lt;dd&gt;ページ5を更新しました。テキストテキストテキスト。&lt;/dd&gt; &lt;dt&gt;2008-05-10&lt;/dt&gt; &lt;dd&gt;ページ4を更新しました。テキストテキストテキスト。&lt;/dd&gt; &lt;dt...</p><p><a href="https://b.hatena.ne.jp/entry/www.d-spica.com/try/dt-float.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.d-spica.com/try/dt-float.html" alt="はてなブックマーク - CSS - dtをfloatする場合の注意点 | Try | d-spica" title="はてなブックマーク - CSS - dtをfloatする場合の注意点 | Try | d-spica" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.d-spica.com/try/dt-float.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 506 http://blog.d-spica.com/entry/080512dtfloat.html crema 2008-10-11T03:37:54Z css dl float <blockquote cite="http://blog.d-spica.com/entry/080512dtfloat.html" title="dtをfloatする場合の注意点 | d-spica"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fblog.d-spica.com%2Fentry%2F080512dtfloat.html" alt="" /> <a href="http://blog.d-spica.com/entry/080512dtfloat.html">dtをfloatする場合の注意点 | d-spica</a></cite><p><a href="http://blog.d-spica.com/entry/080512dtfloat.html"><img src="" alt="dtをfloatする場合の注意点 | d-spica" title="dtをfloatする場合の注意点 | d-spica" class="entry-image" /></a></p><p>dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで，dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで，更新日を dt で，更新内容を dd でマークアップした場合を想定してみましょう。 まず，XHTMLでのマークアップは次...</p><p><a href="https://b.hatena.ne.jp/entry/blog.d-spica.com/entry/080512dtfloat.html"><img src="https://b.hatena.ne.jp/entry/image/http://blog.d-spica.com/entry/080512dtfloat.html" alt="はてなブックマーク - dtをfloatする場合の注意点 | d-spica" title="はてなブックマーク - dtをfloatする場合の注意点 | d-spica" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/blog.d-spica.com/entry/080512dtfloat.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 94 http://pc-training.hp.infoseek.co.jp/lab/dl-table-test.html crema 2008-10-11T03:36:45Z css html dl float <blockquote cite="http://pc-training.hp.infoseek.co.jp/lab/dl-table-test.html" title="【インフォシーク】Infoseek ： 楽天が運営するポータルサイト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fpc-training.hp.infoseek.co.jp%2Flab%2Fdl-table-test.html" alt="" /> <a href="http://pc-training.hp.infoseek.co.jp/lab/dl-table-test.html">【インフォシーク】Infoseek ： 楽天が運営するポータルサイト</a></cite><p><a href="http://pc-training.hp.infoseek.co.jp/lab/dl-table-test.html"><img src="" alt="【インフォシーク】Infoseek ： 楽天が運営するポータルサイト" title="【インフォシーク】Infoseek ： 楽天が運営するポータルサイト" class="entry-image" /></a></p><p>日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、...</p><p><a href="https://b.hatena.ne.jp/entry/pc-training.hp.infoseek.co.jp/lab/dl-table-test.html"><img src="https://b.hatena.ne.jp/entry/image/http://pc-training.hp.infoseek.co.jp/lab/dl-table-test.html" alt="はてなブックマーク - 【インフォシーク】Infoseek ： 楽天が運営するポータルサイト" title="はてなブックマーク - 【インフォシーク】Infoseek ： 楽天が運営するポータルサイト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/pc-training.hp.infoseek.co.jp/lab/dl-table-test.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 18 https://bashalog.c-brains.jp/07/03/08-194820.php crema 2008-10-11T03:35:20Z css float dl <blockquote cite="https://bashalog.c-brains.jp/07/03/08-194820.php" title="【CSS】 dl で float を使う | バシャログ。"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fbashalog.c-brains.jp%2F07%2F03%2F08-194820.php" alt="" /> <a href="https://bashalog.c-brains.jp/07/03/08-194820.php">【CSS】 dl で float を使う | バシャログ。</a></cite><p><a href="https://bashalog.c-brains.jp/07/03/08-194820.php"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5daa55489c1ad26a219643d0705eb421667c6fc1/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png" alt="【CSS】 dl で float を使う | バシャログ。" title="【CSS】 dl で float を使う | バシャログ。" class="entry-image" /></a></p><p>サイトトップページのニュースリリースなどで、dlによるfloatはよく使用してます。 昔はtableタグを使用して実現していましたが、「表組み以外でtableタグは使用しない」ことにしています。 WEB標準に順ずるシーブレインの取り組みです。 今回は、dtに日付、ddにニュースタイトルの場合を例としてご紹介します。 サンプ...</p><p><a href="https://b.hatena.ne.jp/entry/s/bashalog.c-brains.jp/07/03/08-194820.php"><img src="https://b.hatena.ne.jp/entry/image/https://bashalog.c-brains.jp/07/03/08-194820.php" alt="はてなブックマーク - 【CSS】 dl で float を使う | バシャログ。" title="はてなブックマーク - 【CSS】 dl で float を使う | バシャログ。" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/bashalog.c-brains.jp/07/03/08-194820.php"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 13 http://mb.blog7.fc2.com/blog-entry-70.html crema 2008-05-08T15:05:08Z css webdesign position float <blockquote cite="http://mb.blog7.fc2.com/blog-entry-70.html" title="floatとpositionの使い分け"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fmb.blog7.fc2.com%2Fblog-entry-70.html" alt="" /> <a href="http://mb.blog7.fc2.com/blog-entry-70.html">floatとpositionの使い分け</a></cite><p><a href="http://mb.blog7.fc2.com/blog-entry-70.html"><img src="" alt="floatとpositionの使い分け" title="floatとpositionの使い分け" class="entry-image" /></a></p><p>CSSで段組をやるには普通floatかpositionを使いますが、どのように使い分けるのか。 これはいろいろと試行錯誤しているうちにわかってくるものなので、「そんなこと知ってる」という人も多いかと思いますが、まとめてみます。 条件としては以下のような感じ。 HTMLの記述順は「（ヘッダ→）記事→サイドバー（→フッタ）」...</p><p><a href="https://b.hatena.ne.jp/entry/mb.blog7.fc2.com/blog-entry-70.html"><img src="https://b.hatena.ne.jp/entry/image/http://mb.blog7.fc2.com/blog-entry-70.html" alt="はてなブックマーク - floatとpositionの使い分け" title="はてなブックマーク - floatとpositionの使い分け" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/mb.blog7.fc2.com/blog-entry-70.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 116 http://3ping.org/2007/11/14/1530 crema 2007-11-22T14:13:57Z float css <blockquote cite="http://3ping.org/2007/11/14/1530" title="floatプロパティのテスト - 3ping.org"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2F3ping.org%2F2007%2F11%2F14%2F1530" alt="" /> <a href="http://3ping.org/2007/11/14/1530">floatプロパティのテスト - 3ping.org</a></cite><p><a href="http://3ping.org/2007/11/14/1530"><img src="" alt="floatプロパティのテスト - 3ping.org" title="floatプロパティのテスト - 3ping.org" class="entry-image" /></a></p><p>Comments:7 MaKOTO 2007年11月15日 01:27 こういう授業を受けている生徒さん達が羨ましいです。 web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、 ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。 ※役所関連の仕事ではネ...</p><p><a href="https://b.hatena.ne.jp/entry/3ping.org/2007/11/14/1530"><img src="https://b.hatena.ne.jp/entry/image/http://3ping.org/2007/11/14/1530" alt="はてなブックマーク - floatプロパティのテスト - 3ping.org" title="はてなブックマーク - floatプロパティのテスト - 3ping.org" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/3ping.org/2007/11/14/1530"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 61