ホームページのネタ帳

画像などを間をあけてfloatしたときに、一番端だけあけた間をなかったことにする方法

2012年7月26日

画像などをfloatさせたときにあけた間を、一番端の画像などだけなくしたい。

 

■sample 1

そんなときは、marginのあいてない別のclassを指定したりしますが・・・

そんなことをしなくても、marginをなかったことにできる方法をご紹介します。

 

 

まずは、何もせずに普通にfloatさせた場合。

 

■sample 2

※画像は「ul li」、テキストは「div」「p」でつくってます。

※「clear」はfloatを解除するのに入れてます。

 

【html】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 画像 -->
<div class="sample_1">
	<ul class="clear">
		<li><img src="images/sample_20120726_02.jpg" width="160" height="120" alt="sample_02" /></li>
		<li><img src="images/sample_20120726_02.jpg" width="160" height="120" alt="sample_02" /></li>
		<li><img src="images/sample_20120726_02.jpg" width="160" height="120" alt="sample_02" /></li>
	</ul>
</div>
 
<!-- テキスト -->
<div class="sample_2_1">
	<div class="sample_2_2 clear">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 画像 */
.sample_1 {
	width: 500px;
	margin: 0px;
	padding: 0px;
}
.sample_1 ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.sample_1 li {
	float: left;
	width: 160px;
	margin: 0px 10px 0px 0px;
	padding: 0px;
}
 
/* テキスト */
.sample_2_1 {
	width: 500px;
	margin: 0px;
	padding: 0px;
}
.sample_2_2 {
	margin: 0px;
	padding: 0px;
}
.sample_2_2 p {
	float: left;
	width: 158px;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	border: solid 1px #FF0000;
}

 

まぁ、何もしていないので入りきらずに下へいってしまっています。

では今度は、横に並ぶようにしてみます。

 

■sample 3

 

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 画像 */
.sample_1 {
	width: 500px;
	margin: 0px;
	padding: 0px;
}
.sample_1 ul {
	margin: 0px -10px 0px 0px;
	padding: 0px;
	list-style: none;
}
.sample_1 li {
	float: left;
	width: 160px;
	margin: 0px 10px 0px 0px;
	padding: 0px;
}
 
/* テキスト */
.sample_2_1 {
	width: 500px;
	margin: 0px;
	padding: 0px;
}
.sample_2_2 {
	margin: 0px -10px 0px 0px;
	padding: 0px;
}
.sample_2_2 p {
	float: left;
	width: 158px;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	border: solid 1px #FF0000;
}

 

何をしたかと言うと、「margin」に「-10px」を指定しただけです。

しかし、「-10px」を指定したclassにwidthを指定すると効果がありません。

なので、どうしてもwidthを指定しないといけない場合、タグが一つ増えてしまう訳ですが・・・。

自分としては、どうしてもって事はあまりないので、結構使えそうです。


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp