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

powered by hm solution

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

お問い合わせ
ブログTOP » web » コーディング » ループさせる箇所に使うcssのメモ

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

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

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

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
JOY
日々、黙々とコーディングしています。
好きな言葉は諸行無常、押したら引く。
時の流れに身を任せ 毎日平凡にニンマリと過ごしています。

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.