Jun 13, 2010

好試力研究所のHOME PAGE をかわいらしくしました

好試力研究所のHOME PAGE を かわいらしくしました。


昨日からの続き、「愛の遺言サーバー」の申し込みページを開発する中で
デザインの統一が好ましいという判断で、かわいらしくしてしまいました。


問い合わせフォームは、研究所と愛の遺言サーバーで共通になります。
愛の遺言サーバーのカスタム機能の配色変更機能を強化しました。


そこで、HTMLのTABLEの罫線について発見。


TABLEの罫線を1ドットの線で引く場合のうまくいったスタイルシートとHTML例



TABLE.p { 
    color: #000000;
    background-color: #fbffe3;
    border-color: #000000;
    border-width:0px 0px 0px 0px;
    border-collapse: collapse;
}
TABLE.p TH {
    border-color: #000000;
    border-width:1px 1px 1px 1px;
}
TABLE.p TD {
    border-color: #000000;
    border-width:1px 1px 1px 1px;
}


<table class=p border=1 cellspacing=0 cellpadding=3>
<tr><th>No.</th><th>Title</th></tr>
<tr><td>1</td><td>DATA</td></tr>
<tr><td>2</td><td>XYZ</td></tr>
</table>


あと、<h1>タグで、最新ブラウザで角丸を使えることが判り
試してみました(ただしIEはできません)


http://www.css-lecture.com/log/css3/css3-border-radius.html
が、紹介サイトです。


例 

H1 {
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}