「menu」ブロックについて(MENU)

<!-- ここからmenu -->
<section id="menu" class="section">
<div class="contents">

<h2>MENU</h2>

<div class="menu up">
<img src="../images/sample1.jpg" alt="">
<p class="text">メニュー名をここに入れます 1,200yen</p>
<span class="icon-menu-point">NEW</span>
</div>

<div class="menu up">
<img src="../images/sample1.jpg" alt="">
<p class="text">メニュー名をここに入れます 1,200yen</p>
</div>

<div class="menu up">
<img src="../images/sample1.jpg" alt="">
<p class="text">メニュー名をここに入れます 1,200yen</p>
</div>

<p class="btn1 blur"><a href="menu.html">全てのメニューをみる</a></p>

<dl class="table reverse">

<dt>メニュー名をここに入れます</dt>
<dd>1,200yen</dd>

<dt>メニュー名をここに入れます</dt>
<dd>1,200yen</dd>

<dt>メニュー名をここに入れます</dt>
<dd>1,200yen</dd>

<dt>メニュー名をここに入れます</dt>
<dd>1,200yen</dd>

<dt>メニュー名をここに入れます</dt>
<dd>1,200yen</dd>

<dt>メニュー名をここに入れますメニュー名をここに入れますメニュー名をここに入れます</dt>
<dd>1,200yen</dd>

<dt>メニュー名をここに入れますメニュー名をここに入れますメニュー名をここに入れます</dt>
<dd>1,200yen</dd>

</dl>

</div>
</section>

主なスタイルは

cssフォルダのstyle.cssから「お品書きメニュー(menuブロック)」でテキスト検索してみて下さい。詳しい解説もあります。

大きな端末で見た場合に見える両サイドの大きな画像について

「images/bg_menu.jpg」です。お好みで入れ替えて下さい。サイズは自由で構いませんが端末サイズで配置バランスがかわるのでおかしくないような写真を選んで下さい。

お品書きの左下の「NEW」のアイコン画像について。
テキスト部分は直接htmlに書いています。文字が多すぎると崩れるので注意して下さい。
アイコン画像は「images/icon_menu_point.svg」で、cssの背景画像で設定されています。設定は、style.cssの「icon-menu-point」で検索すると出てきます。アイコンを入れ替えたり、サイズや配置を調整したりできます。

upスタイル

「class="up"」をつけると下からアップしてくるアニメーションになります。

このupスタイルは他の部分にも使えますが、相性が悪いとおかしな動きになるので、おかしくならない所にだけ使うようにして下さい。

「全てのメニューをみる」ボタン

style.cssから「btn1」で検索して下さい。詳しい説明もあります。

テキストのみのお品書きブロック

style.cssの「.table」でスタイル検索ができます。背景色やボーダーの設定が可能です。
index.htmlの一番下のブロックにある「店舗情報」内の所在地等にも使っています。

<dl class="table reverse">の「reverse」というのは左右ブロックの幅を逆にするスタイルです。本来は、左側に100px、右側は自動幅の設定になっていますが、メニュー用は逆(右側に金額がくるのでそっちが100px)の方が見やすいのでそのようなスタイルを準備しました。