CSSでお店のメニュー風なページを作成
2007年12月03日
スポンサード リンク
CSS - A Recipe for Success
If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean.
CSSでお店のメニュー風なページを作成。
CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。
実際のデモページはこちら
マークアップも次のように美しく作れます。
<ul>
<li>
<p><em>Lorem ipsum dolor sit amet </em></p>
<span>8.99</span>
</li>
<li>
<p><em>In porta nisl id nisl varius ullamcorper</em></p>
<span>9.99</span>
</li>
. (ドット) の部分は背景画像で設定しているようです。
お店のサイトなんかを作る際にそのまま使えそうですね。
スポンサード リンク
投稿者 KJ : 2007年12月03日 10:02
|
![]()
間違いの指摘をしていただける方はメールでお願いします
最新のブログ記事
- Facebook風のサムネイル付きサジェストボックスを実装するサンプル
- 2009年7月3日 管理人のブックマーク
- PHPとCSSで動的に綺麗なパーセンテージグラフを描画サンプル
- 普通の写真をすばらしいアートにするためのPhotoshopチュートリアル集
- シマシマの見やすいテーブルを作成するMooToolsプラグイン「ZebraTable」
- 2009年7月2日 管理人のブックマーク
- 「フォローしてね」を表すTwitterアイコン集
- シンプルなTwitter検索を行うためのPHPスクリプト
- PHPのcURLを使ってできる便利なサンプル集
- 2009年7月1日 管理人のブックマーク
- iPhone3.0の緯度経度APIで移動履歴を地図描画するサンプル





















