前の記事 ≪:フリーのクリスマス用PhotoShopブラシ集
次の記事 ≫:秀逸イラストレーターチュートリアル65

CSSでお店のメニュー風なページを作成

2007年12月03日-はてなブックマーク

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

. (ドット) の部分は背景画像で設定しているようです。
お店のサイトなんかを作る際にそのまま使えそうですね。

関連の記事検索:デザイン, メニュー, css
スポンサード リンク

By.KJ : 2007年12月03日 10:02 livedoor Readerで購読 Twitterに投稿

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