/* 表示領域全体 */
div.tabbox {
   margin: 0px; padding: 0px; width: 100%;
}

/* タブ部分 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
   display: block; width: 9em; float: left;
   margin: 0px 1px 0px 0px; padding: 3px;
   text-align: center;
   border-radius: 12px 12px 0px 0px; /* 角を丸くする */
}
p.tabs a.tab1 { background-color: blue; color: white; }
p.tabs a.tab2 { background-color: #aaaa00; color:white;}
p.tabs a.tab3 { background-color: red; color: white; }
p.tabs a.tab4 { background-color: #9932cc; color: white; }
p.tabs a:hover { color: yellow; }

/* タブ中身のボックス */
div.tab { overflow: auto; clear: left; }
div#tab1 {
   border: 2px solid blue; background-color: #ccffff;
}
div#tab2 {
   border: 2px solid #aaaa00; background-color: #ffffcc;
}
div#tab3 {
   border: 2px solid red; background-color: #ffcccc;
}
div#tab4 {
   border: 2px solid purple; background-color: #dda0dd;
}
div.tab p { margin: 0.5em; }