トップ ＞ テーブルデザインのコツ ＞ テーブルデザイン8(音符)
■
テーブルデザイン8(音符)
メニューやカテゴリ表示などに利用できる、テーブルを利用したデザインを紹介します。
今回は音符模様のポップなデザインです。
このデザインのHTMLコードは以下のようになります。
枠内のHTMLをコピーし、あなたのページに埋め込む等してお使い下さい。
もちろん改変等は自由にしていただいて構いません。
また、このデザインでは画像を利用しています。
下の画像を右クリックし名前を付けて画像を保存であなたのパソコンに保存して下さい。
そして保存時の画像名のままHTMLファイルと同じフォルダに置いて下さい。
テーブルの大きさを変えたい場合
「width="234"」となっている部分の「234」をお好きな数値に変えてください。
「160」や「200」程度が妥当だと思います。
色を変えたい場合
濃い部分の色は「#CC0000」となっている部分をお好きな色のコードに
変えてください。色コード一覧はこちら
薄い部分の色も同様に「#FFF5EE」となっている部分を変えてください。
ただし音符の部分には画像を利用していますので、画像の差し替えが必要になります。
文字の大きさと行間の幅を変えたい場合
「font-size:80%;line-height:1.5」となっている部分の「80%」が文字の大きさを
指定している部分です。「1.5」となっている部分が行間の幅を指定している部分です。
これらの値を大きくするか小さくするかすれば、それに応じて文字の大きさと行間の幅も
変わります。ノーマルに戻したいのであれば「100%」と「1」に指定すれば良いでしょう。
このデザインを利用したHTMLテンプレートはこちら
よろしければ当サイトに不足している情報をお教え下さい。
こんな情報・機能が欲しいなど、ご意見ご要望もお待ちしております。
|
|
