Web用の魅力的な絵目次を作成する

長い記事/ウェブ上のコンテンツだけでなく、表の内容によって提供されます。 本書では、彼らの増加ユーザビリティの読者に直接特定のセクションにではなく、ジャンプに苦心して何かを見つけるために、記事全体をスクロールすることにより、同様に。 典型的な目次のではなく、聞かせ退屈少し色やイラストが少しのスパイスに！

ここでは何を構築することです：

1。 ソース材料

我々が使用されます文字の図は、ベクトル画像iStockPhotoの上で 、イラストレーター9Livesから入手可能です。 ベクトルファイルが非常によくので、女性のグラフィックを分離するのは簡単だった建設された。 私はphotoshopでの正確なピクセルサイズに私が欲しかったのサイズを変更することとなった。

Photoshopから、私は"Webおよびデバイス用の"エクスポートオプションを保存しては、PNG - 24のオプションを使用して保存され使用されます。 これは完全な32のための設定は、ビットのアルファ透過PNGです。 そのため、その場合に問題になるだろうとこのIE 6は任意の問題のみのブラウザを持ち、いずれかのPNGのハックを使用して、GIF、または8として保存するようになりますビットPNGの代わりに、またはを使用して条件付きのスタイルシートは、IE 6からグラフィックを非表示にする。

2。 HTMLマークアップを書く

ネストされたリスト目次の肉が命じた。 当社のマークアップが、その後、これらを使用するすべての事をラップDIVの我々は日焼けボックスを作成するために使用されます。 また、ヘッダーのための伝統的なH1タグを使用します。 清潔で簡単です。

<div id="ToC"> <img src="images/woman.png" alt="" class="woman" /> <h1>Table of Contents</h1> <ol> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> </ol> </li> </ol> </div> 

は、ここでは右上にある女性の画像を追加し、ここではユニークな授業をしてください。 これは我々をターゲットにし、CSSで自分の位置を使用するフックです。 これはまた、条件付きのスタイルシートで彼女を隠すために使用できるフックを必要とあればです。

ライブ目次では、リストの各アイテム内のテキストをアンカーリンクでも包まれるだろう。 href属性のハッシュ値に"＃資料2"は、クリックされたとき、その要素を持っていたページの下にジャンプするようなURLを指していると、そのID。 各セクションの下部には、あなたも"トップへ戻る"リンクは、リンクをクリックする人への目次へジャンプする＃目次、を行うことができます。

3。 CSSの

また、CSSはかなり簡単です。 私はちょうど、その下にいくつか指摘して全部表示されます。

 *    { margin: 0; padding: 0; } body    { font-size: 62.5%; font-family: Helvetica, sans-serif; padding: 50px; } #ToC    { background: #f4e5b1; border: 1px solid #b1a041; margin: 25px; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding: 10px; width: 260px; position: relative; min-height: 320px; } h1    { font-size: 22px; margin: 5px 0 10px 75px; letter-spacing: -1px; } ol    { margin-left: 100px; font-weight: bold; letter-spacing: -1px; } ol ol    { margin-left: 20px; list-style: lower-alpha;} ol li    { font-size: 18px; margin: 3px 0;} ol li ol li   { font-size: 12px; } .woman    { position: absolute; top: -25px; left: -55px; } 

注意事項：

- ＃目次は非常に単純には、背景色や単一ピクセルの境界線の色を使用するスタイルです。 ブラウザ固有の属性は、角を丸くするに追加されます。 この作品は、素晴らしい、すべてのMozillaベースのブラウザで見て（Flockは、Firefoxなど）などがWebkitベースのブラウザ（Konquerorは、Safariなど）。 場合にはIE 7やOperaでページを表示すると、きれいには定期的に正方形の角を持つに低下します。 ではない大した。

-順番付きリストの距離は、ボックスの左サイドからプッシュされる（左）のマージンを使用して画像のための部屋を確認します。 ネストされた階層付きリストは、小さい値に左マージンを設定している。 これがなければ、彼らはまだ、インデントされるだろうが、これとはあまりに同じ100pxを使用して。 また、通知は、サブ命令のリスト形式のリストを下にアルファ設定されます。 これの代わりに文字を使用し、ネストされたリストには、簡単に視覚的に閲覧できるようになります番号。

-ので、＃目次が相対的な位置を適用すると、我々は。女性クラス上の絶対位置を使用することができる画像を取得する場所を正確にそれを選択します。 必要はありませんここで絶対位置を使用して神経質になるには、このレイアウトではない。 相対的な位置の中の絶対位置の詳細情報。

製品の仕上がり

デモの閲覧

ダウンロードファイル