Webデザインテンプレート集 : Templates［リンクページ］
About
Templates
Design
BBS
Links
トップページ
飾り枠
CSSデザイン
リンクページ
タイトル
コピーライト
その他
はじめに
利用方法
リンクページ
リンク集のページに使用出来るテンプレートです。目次などにも流用出来るかもしれません。
画像をクリック：プレビュー ／
各色を見る ／
ソース表示 ／
ダウンロード
ソース表示［No.5 - Blue］
カラー選択
CSS
<style type="text/css"> <!-- body{ margin: 0px; font-size: 10pt; color: #333333; overflow: auto; height: 100%; } a:link{/*リンク色*/ color: #49395D; text-decoration: none; } a:visited{ color: #46365A; text-decoration: none; } a:hover,a:active{ color: #29195D; text-decoration: underline; } h1{/*LINKs部分の設定*/ font-size: 10pt; font-family: Verdana; font-weight: normal; color: #333333; letter-spacing: 0.4em; text-align: right;/*右寄せ*/ } .lay ul,.lay dl{/*リンク表の設定*/ border-bottom: solid 1px #8877BB;/*リンク下部の境界線*/ margin: 0.5em 6px 3em 1em; padding-bottom: 0.5em; } ul.left{ margin-right: 0px; } ul.right{ margin-left: 0px; } li{ list-style: square inside; color: #ABABAC;/*リンクの左の■のカラー*/ margin: 0.1em; font-size: 10pt; line-height: 100%; } dd{ margin: 2px 0px 8px 1.5em; } .lay{ height: 100%; width: 35em;/*全体の幅*/ background-color: #FCFCFC;/*背景色*/ margin-left: auto; margin-right: auto; padding: 1em; border-left: solid 1px #CACACA; border-right: solid 1px #CACACA; text-align: left; } .linktitle{/*リンク項目タイトルの設定*/ width: 18em; padding: 2px 1.5em 1px 1.5em; border: solid 1px #BABABA; color: #333333; background-color: #FFFFFF; font-size: 9pt; letter-spacing: 0.2em; } .mark{/*リンク項目タイトルの左のマーク部分*/ width: 8px; height: 8px; font-size: 8px; background-color: #8877BB; } .mark2{/*リンク項目タイトルの設定の右のライン*/ width: 190px; height: 1px; font-size: 1px; background-color: #8877BB; } --> </style>
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <!--made by Web Design Templates http://wdt.pekori.jp/--> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- body{ margin: 0px; font-size: 10pt; color: #333333; overflow: auto; height: 100%; } a:link{/*リンク色*/ color: #49395D; text-decoration: none; } a:visited{ color: #46365A; text-decoration: none; } a:hover,a:active{ color: #29195D; text-decoration: underline; } h1{/*LINKs部分の設定*/ font-size: 10pt; font-family: Verdana; font-weight: normal; color: #333333; letter-spacing: 0.4em; text-align: right;/*右寄せ*/ } .lay ul,.lay dl{/*リンク表の設定*/ border-bottom: solid 1px #8877BB;/*リンク下部の境界線*/ margin: 0.5em 6px 3em 1em; padding-bottom: 0.5em; } ul.left{ margin-right: 0px; } ul.right{ margin-left: 0px; } li{ list-style: square inside; color: #ABABAC;/*リンクの左の■のカラー*/ margin: 0.1em; font-size: 10pt; line-height: 100%; } dd{ margin: 2px 0px 8px 1.5em; } .lay{ height: 100%; width: 35em;/*全体の幅*/ background-color: #FCFCFC;/*背景色*/ margin-left: auto; margin-right: auto; padding: 1em; border-left: solid 1px #CACACA; border-right: solid 1px #CACACA; text-align: left; } .linktitle{/*リンク項目タイトルの設定*/ width: 18em; padding: 2px 1.5em 1px 1.5em; border: solid 1px #BABABA; color: #333333; background-color: #FFFFFF; font-size: 9pt; letter-spacing: 0.2em; } .mark{/*リンク項目タイトルの左のマーク部分*/ width: 8px; height: 8px; font-size: 8px; background-color: #8877BB; } .mark2{/*リンク項目タイトルの設定の右のライン*/ width: 190px; height: 1px; font-size: 1px; background-color: #8877BB; } --> </style> </head> <body> <div style="text-align: center"> <!-- 中央寄せを止めるには↑の１行を削除してください --> <div class="lay"> <h1>...L I N K s...</h1> <br> <!-- ここから --> <table border="0" cellspacing="6"> <tr> <td> <div class="mark"></div> </td> <td class="linktitle"> Friends </td> <td> <div class="mark2"></div> </td> </tr> </table> <ul> <li><a href="http://wdt.pekori.jp/">WebDesignTemplates</a></li> <li><a href="#">Site1</a></li> <li><a href="#">Site2</a></li> <li><a href="#">Site3</a></li> </ul> <!-- ここまででリンク項目１つ分 --> <table border="0" cellspacing="6"> <tr> <td> <div class="mark"></div> </td> <td class="linktitle"> WebMaterial [2段Ver.] </td> <td> <div class="mark2"></div> </td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td> <ul class="left"> <li><a href="http://wdt.pekori.jp/">WebDesignTemplates</a></li> <li><a href="#">Site1</a></li> <li><a href="#">Site2</a></li> <li><a href="#">Site3</a></li> </ul> </td> <td> <ul class="right"> <li><a href="http://wdt.pekori.jp/">WebDesignTemplates</a></li> <li><a href="#">Site1</a></li> <li><a href="#">Site2</a></li> <li><a href="#">Site3</a></li> </ul> </td> </tr> </table> <table border="0" cellspacing="6"> <tr> <td> <div class="mark"></div> </td> <td class="linktitle"> 説明文付きバージョン </td> <td> <div class="mark2"></div> </td> </tr> </table> <dl> <dt>・ <a href="http://wdt.pekori.jp/">WebDesignTemplates</a></dt> <dd>［説明文スペース Sample Text Sample Text Sample Text Sample Text］</dd> <dt>・ <a href="#">Site1</a></dt> <dd>［説明文スペース Sample Text Sample Text Sample Text Sample Text］</dd> </dl> </div> </div> </body> </html>
本体表示
各色を見る ／ 
ソース表示 ／ 
ダウンロード
各色を見る ／ ソース表示 ／ ダウンロード
