CSS Tree

CSS

ul.tree, ul.tree ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

ul.tree ul {
    margin-left:10px; 
    position:relative;
}

ul.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid #ccc;
}

ul.tree li  {
    margin:0;
    padding:3px 12px;
    text-decoration: none;
    font-size:13px;
    line-height:20px;
    font-weight:normal;
    position:relative;
}

ul.tree li a { 
    text-decoration: none;
    font-size:14px;
    line-height:20px;
    font-weight:bold;
    position:relative;
}

ul.tree ul li:before {
    content:"";
    display:block;
    width:8px;
    height:0;
    border-top:1px solid #ccc;
    position:absolute;
    top:10px;
    left: 0;
}

ul.tree ul li:last-child:before {
    border-left:1px solid #FFF; /* ??????????????? */
    height: auto;
    top: 10px; 
    bottom: 0;
}

HTML

<ul class="tree">
    <li>AAA/li>
    <li>BBB
        <ul class="tree">
            <li>BB1</li>
            <li>BB2
               <ul class="tree">
                     <li>BB21</li>
                     <li>BB22</li>
               </ul>
            </li>
            <li>BB3</li>	
        </ul>
    </li>	
</ul>

border-radiusなテーブル

注意点がいくつかあります。

  • tableのborderはtableの外枠のみの指定です。
  • tableとtdのborderを重ねると太い線で表示されます。
  • 上記は、画面でうまくいっても印刷では太くなる場合があります。
  • border-collapse:collapseでうまくいかない場合があります(詳しい条件が詰め切れず)
.radius-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    border: darkblue solid thin;
    overflow: hidden;
}
.radius-table tr td:not(:first-child){
    border-left: darkblue solid thin;
}
.radius-table tr:not(:first-child) td {
    border-top: darkblue solid thin;
}

Tracのデザインカスタマイズ(CSSの例)

Trac0.12では、[ProjectDir]/template/site.html でCSSの位置を指定して、
(例として[ProjectDir]/htdocs/style.css に置く)デザインをカスタマイズすることができます。

デフォルトで他の多数のCSSを読み込んだ後に、最後に読み込むことになります。既存のCSSでは妙に細かく要素を指定している場合があり、カスタマイズ分も丹念に指定しないと有効にならないので、注意が必要です。とりあえずの版をあげておきます。

a{
    color:#0000FF; /* blue */
    font-style:normal;
}

a:link {
    color:#0000FF; /* blue */
    font-style:normal;
}

a:visited {
    color:#00008B; /* darkblue */
    font-style:normal;
}

h1 {
	border-left:20px solid #4682B4; /* steelblue */
	padding:5px 0 5px 8px;
	background-color: #F5F5F5; /* whitesmoke */;
}

h2 {
	border-bottom:1px solid #708090; /* slategray */
	border-left:5px solid #4682B4; /* steelblue */
	padding:3px 0 3px 8px;
}

h3 {
	border-bottom:1px solid #708090; /* slategray */
	padding:3px 0 3px 8px;
}

#main {
	clear:both; /* メニュー部の回り込みを解除 */
}

#mainnav {
	background-color: transparent;
	background-image: none;
    border: none;
}

#mainnav ul {
	list-style:none;
	margin:0;
	padding:0px;
	text-align:center;
}

#mainnav li {
    border: none;
	display:inline;
	list-style:none;
	margin:0px;
	padding:0px;
}

#mainnav li a, #mainnav li a:link, #mainnav li a:visited, #mainnav li a:link:hover, #mainnav li a:visited:hover {
	background-color: #E6E6FA; /* lavender */
	background-image: none;
	border: none;
	border-right: 2px solid #FFFFFF; /* white */
    color: inherit;
	display:block;
	float:left;
	font-weight: normal;
	margin:0;
	padding:6 0;
	text-decoration:none;
	width:60px;
}

#mainnav li a:hover, #mainnav li a:link:hover, #mainnav li a:visited:hover {
	background-color: #98FB98; /* palegreen */;
	color: #FFFFFF; /* white */
}

#mainnav li.active a, #mainnav li.active a:visited, #mainnav li.active a:link, #mainnav li.active a:visited, #mainnav li.active a:link:hover, #mainnav li.active a:visited:hover {
	background-color: #4682B4; /* steelblue */;
	background-image: none;
    border: none;
	color: #FFFFFF; /* white */
    font-weight: normal;
}

display:inline-block

aタグをボタン代わりに使う場合、display:blockを指定したいです。
しかし、ブロック要素となった結果として前後に改行が入ってしまいます。

この対策としては、次の2つがありますが、どちらも面倒でした。
対策1:tableタグを使う
対策2:floatを指定し、最後にclearを工夫する

CSS2から、display:blockではなく、display:inline-block という指定ができるようです。
ただし古いブラウザは対応していないようで、そこを切り捨てられれればですが。