ノート風メモ

2015/07/24

この素材と
bg-basis-info-tbl

この素材を作って
line1

ノート風メモ 作ってみました。

テーブルで作ったメモ

細長にしたら縦メニューにも使えそう☆
手書き風のサイトに合うかも。
テーブルで作ったメモ2

============================
table表のhtml
============================

tableに class=”test1″ を適用。

スパ名、アドレスなど左列は th で、
うにゃうにゃの右列は td で。

============================
table表のcss
============================

table.test1 {
width: 400px;
background-image: url(jpg/bg-basis-info-tbl.gif);
background-repeat: repeat-y;
background-position: left top;
background-color: #FFF;
margin: 15px auto;
font-size: 13px;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

table.test1 th,
table.test1 td {
text-align: left;
font-weight: normal;
height: 25px;
line-height: 25px;
background-image: url(jpg/line1.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}

table.test1 th {
width: 25%;
text-indent: 15px;
}

table.test1 td {
background-position: 0px 15px;
}

============================

縦メニューで使う時は、ul,liで作ります。

  • このエントリーをはてなブックマークに追加
  • Pocket