ループさせる箇所に使うcssのメモ

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ

ループさせる箇所に使うcssのメモ

すこしづつ肌寒くなってきました。

おでんで一杯やりたいところですね。

ECサイトの構築やcmsを導入する際に、ループさせる箇所に割と使うcssのメモ

未対応ブラウザの事を考えcss3は使わず、またjavascriptも使わないので速攻コピペで簡単に使えます。

IE7も問題なく表示されます。

ニュースエリアの投稿日と投稿タイトル

sample02

liタグ等でコーディングしている方も多いと思いますが、
floatを使っていないのでレイアウト崩れの心配がなく、多用性があります。
dtやddをpaddingで調節し、backgroundでアイコンも簡単。

html

<div class="hoge1">
<dl>
	<dt>2013.01.08</dt>
	<dd>ここにテキストが入ります。ここにテキストが入ります。</dd>
	<dt>2013.01.08</dt>
	<dd>ここにテキストが入ります。ここにテキストが入ります。</dd>
	<dt>2013.01.08</dt>
	<dd>ここにテキストが入ります。ここにテキストが入ります。</dd>
</dl>
</div>

css

.hoge1 dl{line-height:3em;}
.hoge1 dt{border-bottom:1px solid #ccc; width:500px;}
.hoge1 dd{margin:-3em 0 0 80px;}

ポイント

  • dlのline-heightでテキスト上下の間隔を調節
  • dlのline-heightとddの上部ネガティブマージンの数値を同じにする
  • dtのwidthで全体のborderを調節

一番下のテキストだけborderを消す

sample01

html

<div class="hoge2">
<ul>
	<li>ここにテキストが入ります。</li>
	<li>ここにテキストが入ります。</li>
	<li>ここにテキストが入ります。</li>
</ul>
</div>

css

.hoge2{overflow:hidden; _zoom:1;}
.hoge2 ul li{margin-bottom:-1px; border-bottom:1px solid #666; padding:5px;}

横並びさせた際、1番右のmarginを0にする

sample03

html

<div class="hoge3">
<ul>
	<li><img src="img/sample01.png" />ここにテキストが入ります。</li>
	<li><img src="img/sample02.png" />ここにテキストが入ります。</li>
	<li><img src="img/sample03.png" />ここにテキストが入ります。</li>
</ul>
</div>

css

.hoge3{width:500px;}
.hoge3 ul{width:510px; margin:0 -10px 0 0; overflow: hidden; _zoom: 1;}
.hoge3 ul li {width:160px; float:left; margin:0 10px 10px 0; list-style:none;}

ポイント

  • liに指定したマージン分、ulにネガティブマージンを指定する
  • divのwidthは右端のマージンを入れない数値にする

横並びさせたボックスの高さを合わせる。(背景画像も含め)

sample04

一番テキストの量が多いボックスに合わせます。

html

<div class="hoge4">
	<div>
	<img src="img/sample01.png" />ここにテキストが入ります。
	</div>
	<div>
	<img src="img/sample02.png" />
	ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
	</div>
	<div>
	<img src="img/sample03.png" />
	ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
	</div>
</div>

css

.hoge4{overflow:hidden;}
.hoge4 div{width:160px; float:left; background:#ddd; padding:10px 10px 1000px 10px; margin:0 10px -1000px 0;}

ポイント

  • padding-bottomとmargin-bottomの数値は同じにする

まとめ

できるだけシンプルで多様性のあるソースを心がけ
チーム全体のコーディングスピードがあがるように意識しながら、日々の業務をこなす事も仕事の1つだと思います。

では、このへんで。

JOY
日々、黙々とコーディングしています。
好きな言葉は諸行無常、押したら引く。
時の流れに身を任せ 毎日平凡にニンマリと過ごしています。
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.