Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* CSSで作るタブ - 1ドット画像を使って[#h2bdf339]
** タブの見本 [#we9cd819]
以下の画像のようなタブを作る。
#ref(tab1.png)
** HTML [#c7b5a4ba]
タブ群はULタグで表し、LIタグを増やすとタブが増える。選択...
*** ポイント [#b7b682a6]
- ulの背景に1ドットの黒色の画像(dot.gif)をbottomに横に...
-- borderでなく背景画像を使う理由は、borderを使うとliのbo...
-- なお、後述するようにliはfloatさせるので、このままではu...
- liをfloatさせ、タブが横に並ぶようにする。
- liの四辺にはborderを設定する。これでタブっぽくなる。
- 選択されているli(activeクラス)の下辺に白のborderを設...
<html>
<body>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
background: transparent url(dot.gif) repeat-x ce...
zoom: 100%;
}
ul:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
li {
float: left;
margin: 0 10px 0 0;
padding: 5px;
border: 1px solid #000;
}
li.active {
border-bottom: 1px solid #fff;
}
p:after {
content: "test";
}
</style>
<ul>
<li>test1</li>
<li>test2</li>
<li class="active">test3</li>
<li>test4</li>
</ul>
</body>
</html>
終了行:
* CSSで作るタブ - 1ドット画像を使って[#h2bdf339]
** タブの見本 [#we9cd819]
以下の画像のようなタブを作る。
#ref(tab1.png)
** HTML [#c7b5a4ba]
タブ群はULタグで表し、LIタグを増やすとタブが増える。選択...
*** ポイント [#b7b682a6]
- ulの背景に1ドットの黒色の画像(dot.gif)をbottomに横に...
-- borderでなく背景画像を使う理由は、borderを使うとliのbo...
-- なお、後述するようにliはfloatさせるので、このままではu...
- liをfloatさせ、タブが横に並ぶようにする。
- liの四辺にはborderを設定する。これでタブっぽくなる。
- 選択されているli(activeクラス)の下辺に白のborderを設...
<html>
<body>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
background: transparent url(dot.gif) repeat-x ce...
zoom: 100%;
}
ul:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
li {
float: left;
margin: 0 10px 0 0;
padding: 5px;
border: 1px solid #000;
}
li.active {
border-bottom: 1px solid #fff;
}
p:after {
content: "test";
}
</style>
<ul>
<li>test1</li>
<li>test2</li>
<li class="active">test3</li>
<li>test4</li>
</ul>
</body>
</html>
ページ名: