ホームページのネタ帳

書籍の目次のようなデザインにする方法

2012年4月12日

書籍の目次のようなデザインにする方法を紹介します。

 

■例:

テキストが入ります。

P1~P10

テキストが入ります。

P11~P20

テキストが入ります。

P21~P30

テキストが入ります。

P31~P40

テキストが入ります。

P41~P50

 

【html】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="sample_1 clear">
	<p class="sample_2">テキストが入ります。</p>
	<p class="sample_3">P1~P10</p>
</div>
<div class="sample_1 clear">
	<p class="sample_2">テキストが入ります。</p>
	<p class="sample_3">P11~P20</p>
</div>
<div class="sample_1 clear">
	<p class="sample_2">テキストが入ります。</p>
	<p class="sample_3">P21~P30</p>
</div>
<div class="sample_1 clear">
	<p class="sample_2">テキストが入ります。</p>
	<p class="sample_3">P31~P40</p>
</div>
<div class="sample_1 clear">
	<p class="sample_2">テキストが入ります。</p>
	<p class="sample_3">P41~P50</p>
</div>

 

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.sample_1 {
	background-image: url("images/dotted.gif");
	background-repeat: repeat-x;
	background-position: 0% 50%;
	margin: 0px;
	padding: 0px;
}
.sample_2 {
	float: left;
	margin: 0px;
	padding: 0px 5px 0px 0px;
	background-color: #FFFFFF;
}
.sample_3 {
	float: right;
	margin: 0px;
	padding: 0px 0px 0px 5px;
	text-align: right;
	background-color: #FFFFFF;
}

 

簡単に説明すると、cssで背景に端から端まで点線を表示して、テキストが入っている部分には「background-color」を指定して点線を隠している、という感じです。
class「clear」は「float」を解除するために記入しています。
テキストが入っているclassに「padding」が指定してあるのは、下のsample画像のように点とテキストの間が狭くて見た目が悪い部分があったので、間をあけるために指定しています。

 

■sample画像



投稿タグ関連記事


カテゴリー関連記事

お問い合わせはこちら

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

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