The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality). As a reminder, here's how a defau
現在の状態 UL, OL 要素は入れ子にする事が出来ます。この時、項目数や入れ子が多くになるにつれて、項目同士の親子・兄弟関係が見辛くなるかもしれません。 親兄弟関係を表す線を入れる そこで、項目同士の関係を表す線を入れます。線の表現は CSS でやりたいと思います。その為にルートとなるリスト要素に treeView というクラス名を付け、各リストの最後の LI 要素にも last というクラス名を割り振ります。 <ul class="treeView"> <li>2005年 <ul> <li>9月</li> <li>10月</li> <li>11月</li> <li class="last">12月</li> </ul> </li> <li class="last">2006年 <ul> <li>1月</li> <li>2月</li> <li>3月</li> <li>4月 <ul>
When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many design blocks in a stylish and elegant manner. In this article, we’ll have a look at how
Among the many things to like about Veerle’s redesign of her blog is the way she does the hover effects for lists of links, such as those in her “approved” section. Rather than force others to wade through Veerle’s CSS (wow, that’s quite a stylesheet!) I thought it’d be helpful to show how to create this “block hover” effect. The Example First, view my link hover effect example and roll over the l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く