トップ ＞ テーブルデザインのコツ ＞ テーブルデザイン6(枠グラデーション)
■
テーブルデザイン6(枠グラデーション)
メニューやカテゴリ表示などに利用できる、テーブルを利用したデザインを紹介します。
今回は枠部分に3重のグラデーションを使用したデザインです。
このデザインのHTMLコードは以下のようになります。
枠内のHTMLをコピーし、あなたのページに埋め込む等してお使い下さい。
もちろん改変等は自由にしていただいて構いません。
テーブルの大きさを変えたい場合
「width="234"」となっている部分の「234」をお好きな数値に変えてください。
「160」や「200」程度が妥当だと思います。
それにともない「224」「214」「204」となっている部分も修正して下さい。
メインのサイズから10ずつ引いた値にして下さい。
色を変えたい場合
外枠の色は「#CC0000」となっている部分をお好きな色のコードに
変えてください。色コード一覧はこちら
薄い部分の色も同様に「#FFF5EE」となっている部分を変えてください。
グラデーション部分は外側から「#ff3333」「#ff6666」「#ff9999」となっている部分を
修正すれば変えることが出来ます。
文字の大きさと行間の幅を変えたい場合
「font-size:80%;line-height:1.5」となっている部分の「80%」が文字の大きさを
指定している部分です。「1.5」となっている部分が行間の幅を指定している部分です。
これらの値を大きくするか小さくするかすれば、それに応じて文字の大きさと行間の幅も
変わります。ノーマルに戻したいのであれば「100%」と「1」に指定すれば良いでしょう。
このデザインを利用したHTMLテンプレートはこちら
よろしければ当サイトに不足している情報をお教え下さい。
こんな情報・機能が欲しいなど、ご意見ご要望もお待ちしております。
|
|
