前の記事 ≪:立体的に見せたりできるPhotoshop用グラデーションセット集
次の記事 ≫:3大検索エンジンでの順位を一括検索できるツール提供サイト「SEO Know...

CSSで年表が作れるコード「Pure CSS Timeline」

2009年07月14日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Pure CSS Timeline ? Notebook | MattBango.com

CSSで年表が作れるコード「Pure CSS Timeline」。
次のような、角丸でAppleっぽい(?)年表が作れるみたいです。



HTMLマークアップは以下のように, div と ul で組むみたいです。

<div class="timeline">
    <ul class="events">
        <li style="width: 42.48%; left: 57.2%;">Design &amp; Typography <em>(2007 - 2009)</em></li>
        <li style="width: 56.68%; left: 43%;">Photography <em>(2006 - 2009)</em></li>
        <li style="width: 71.3%; left: 28.4%;">Object Oriented Programming <em>(2005 - 2009)</em></li>
        <li style="width: 85.5%; left: 14.2%;">Web Development <em>(2004 - 2009)</em></li>
        <li style="width: 42.75%; left: 0;">3D Modeling and Rendering <em>(2003 - 2006)</em></li>
        <li style="width: 99.5%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2009)</em></li>
    </ul> <!-- end .events -->

    <ul class="intervals">
        <li class="first">2003</li>
        <li>2004</li>
        <li>2005</li>
        <li>2006</li>
        <li>2007</li>
        <li>2008</li>
        <li class="last">2009</li>
    </ul> <!-- end .intervals -->
</div> <!-- end .timeline -->

単純なコードなので、PHP側で作ってしまうことも簡単そうです。
プロジェクト管理的なところに使えるかも。

関連の記事検索:CSS, timeline, HTML
スポンサード リンク

By.KJ : 2009年07月14日 10:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)