Home > 開発ツール・技術 > CSSだけでタイムラインを表現『Pure CSS Timeline Demo』

CSSだけでタイムラインを表現『Pure CSS Timeline Demo』

ちょっと知っておくと良いかもしれないテクニックが紹介されていましたよ。画像を使わずにタイムラインっぽい表現ができちゃっていますね。

matt

↑ こんな感じ。

年表とか履歴書っぽいのにいいかもですね。

HTML上では次のような表現になっているようです。style属性に入れちゃっている感じです。ちょっととっつきにくいかな。

<li style="width: 42.48%; left: 57.2%;">Design & Typography <em>(2007 - 2009)</em></li>

なお、CSS上では「-webkit-border-radius」と「-moz-border-radius」を使っているようなのでIEでは角丸は表現できないですね。

こういうのがやりたかった！という方は使ってみてはいかがでしょうか。詳細は以下からどうぞ。

» Pure CSS Timeline – Notebook | MattBango.com

@taguchiをフォロー！
Twitterもやっています！
Posted on July 10th, 2009

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.ideaxidea.com/archives/2009/07/pure_css_timeline.html/trackback
Listed below are links to weblogs that reference
CSSだけでタイムラインを表現『Pure CSS Timeline Demo』 from IDEA*IDEA ～ 百式管理人のライフハックブログ

Home > 開発ツール・技術 > CSSだけでタイムラインを表現『Pure CSS Timeline Demo』

百式ジョブボード（求人情報）
TwitterCounter
最近のつぶやき
Powered by…

ユーザー中心 ビービット
『IDEA*IDEA』のユーザビリティは、ユーザー中心のウェブサイト構築を手がけるビービット社によって検証・改善されています。

いろいろ

誠Biz.まID Webサービス図鑑
誠Biz.IDの「Webサービス図鑑」を応援中です！

あわせて読みたいブログパーツ
SEO
人気の商品
管理人の著書
Image of はじめてのGTD ストレスフリーの整理術
Image of シャングリラ・ダイエット~全米ベストセラー!「食事制限」なし!「運動」なし!の魔法のダイエット~
Image of 起業・企画・営業・雑談のネタは日常の諦めている不便利から
Image of アイデア×アイデア
Image of ストレスフリーの仕事術―仕事と人生をコントロールする52の法則
最近の写真
煮魚的な肉魚肉のすり身オイスター＆卵ケータイ購入TrueCafeトムヤムクン茹で豚肉とかぶのマヨポン酢あえきのことサーモンのクリームリゾット。白子のムニエルF-03B電車笑わせる機能画像合成指輪サイズ打ち上げ機能前科タグロック解除ポイント加算セピア
モバイル版
最近の記事
カテゴリー別
過去記事一覧

Return to page top