書籍の目次のようなデザインにする:CSS小技

ブログが作りたい!CSSの小技 > 書籍の目次のようなデザインにする:CSS小技

書籍の目次のようなデザインにする:CSS小技

書籍の目次リストのようなデザインにする:CSS小技

CSSの小技(31)

今回は、書籍の目次のようなデザインにする CSSの小技です。

左側に見出しがあって、それを点線でつないで、何ページ目かが表記されているようなレイアウトです。

言葉だけでは分りにくいでしょうから、良かったらご覧くださいませ。ちょっとしたリストを作るときなどに役立つはずです。


書籍の目次のようなデザインとは?

次のような、書籍の目次(インデックス)っぽいデザイン表現になります。

書籍の目次のようなデザイン

左側の見出しの文字列の長短に係わらず、点線がふられるのが、良きところざます。

ちょっと見難いかもしれませんが、点線には以下の画像を、背景画像として使っています。10×10のサイズで、点自体は 2×2ピクセルの大きさです。

背景画像の点

良かったらサンプルもご覧になってみてください。より実際の雰囲気が感じられるはずです。


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

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:dl(定義リスト)タグの簡単な説明

このブログでは dl(定義リスト)タグについて説明したことがないようなので、まず簡単にお話します。

イメージとしては、ul(箇条書きリスト)タグを思い浮かべていただくと分かり良いように思います。ulタグの各項目(li)に、説明をつけたものが dl(定義リスト)タグです。

形式としては、次のようになります。

dl(定義リスト)タグの形式

例えば、「うんこちんちん」を定義リストとして書く場合は、次のように dtで囲んで書けば良いわけです。

そして、さらに「うんこちんちん」に関する説明を、ddで囲んで次のように書きます。

このように、言葉を定義するようなリストを作る場合に、dlタグを利用します。ただ、定義する場合にだけ利用されているわけではなく、汎用的にいろいろな用途で使われています。

dl(定義リスト)の例

3:ポイント解説

1つ目のポイントは、dl定義リスト内の dtで「float: left;」し、回り込みを行っていることです。

dl定義リストは前述しているように、こんな形をしています。

dl定義リストの通常の状態

それを dtに「float: left;」をかけることで、次のように ddが隣にくるんですね。

dtに「float: left;」をかけた状態

現状にそって、一組だけ取り出してもう少し正確に書くと、次のように dtは ddに囲まれています。(なぜかは不明)

そして、dtと dd内のそれぞれの <a>タグが、隣り合っている形です。(試しに、borderなどを入れてみると分かるはずです)

aタグが、隣り合っている

2つ目のポイントは、ddに「text-align: right;」をして、右に寄せていることです。これによって、dd内のリンク(ページや日付の表記)が、右寄せになります。

dd内のリンクを右に寄せている

そして、ddの背景画像として、点の画像を repeat-xで横方向にだけ繰り返しています。

点の背景画像

最後に、3つ目のポイントは、<a>タグに背景色を入れて、点の画像を隠していることです。

背景色を入れて点の画像を隠している

そうそう、今回も何でもかんでも clearfixという感じで使ってしまっていますけれども、次のようにしても良いかもしれません。

前の記事へ
次の記事へ

次回予告

次回は、未定です。(CSSについては、見出しの先頭に背景画像を表示する CSS小技を書きました)


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/27 更新日:2009/05/27

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

素晴らしい!!とても解りやすいですね

こんにちは
初めて訪問させていただきました

マニュアル本よりも解り易くて、感動です!

私も、最近、HTMLやCSSの勉強を始めたんですが

いまいち、理解に苦しむ事ばかりで・・・
また、訪問させていただきます。

HTML+CSS

若いお爺さんさん、こんにちは!(・∀・)/はろー
コメントありがとうございます。

HTML+CSS難しいですよねぇ。(´Д`;)
やればやるほど、知らないことが出てくる感じです。

また、遊びにきてくださいー。((*´∀`))

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/521-5f7485a8
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて