2008/7/25

リストの左側に画像をフロートさせると正しいマージンが設定されない

かなりどうでもいい話かも知れないのですが、個人的に忘れないようにメモっておきたかったので、書いておきます。

<img src="image.gif" class="imagel">
<ul>
<li>…</li>
</ul>

こんな場合ですね。ちなみに画像の回り込みはalignでやるんじゃなくて、こんなスタイルシートを予め作っておきます。

.imagel {
float:left;
margin-right:10px;
margin-bottom:10px;
}

これがあると綺麗にレイアウトできます。マージンをどれくらいに設定するかは好みがわかれるかも知れませんけど、僕のデザインは基本的に構成要素を10px刻みで作っているものが多いので、画面的に10pxで用意しておくと、落ち着く感じです。当然、imagelだけではなくて、imagerも作っておきます。で、先ほどの表示ですが、実は単純な問題でulにfloatを入れれば解決されます。

<img src="image.gif" class="imagel">
<ul style="float:left;">
<li>…</li>
</ul>

この辺はスタイルシートに記述するのもかえって効率悪いので、XHTMLに直接書き込んじゃった方がいいように思います。これちなみに画像を右側に回りこませる時は、あんまり関係ないです。

理屈で考えれば当たり前のことなのかも知れないですけど。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円