前の記事 ≪:Prototype.jsベースのグラフィックス描画フレームワーク
次の記事 ≫:JavaでPHPを実行する環境「Quercus」

CSSを使ってカッコいい円形メニューを作る

2007年04月13日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
metal.ize - tutoriales
Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.
CSSを使ってカッコいい円形メニューを作るサンプル。
次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。



尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。
HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。CSSをオフにすると次のようなリスト要素の見栄えになります。



Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
解析しておけばCSSによるレイアウト力がついて何でも作れそうですね。
関連の記事検索:CSS, Webデザイン, チュートリアル, Web制作, デザイン, UI
スポンサード リンク

By.KJ : 2007年04月13日 12:01 livedoor Readerで購読 Twitterに投稿

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