メニューを切り替える
個人設定メニューを切り替える
個人メニューを切り替える
ログインしていません
編集を行うと、IPアドレスが公開されます。

「飲食店検索」の版間の差分

提供: 川西図鑑
0rr2f3 (トーク) による版 578 を取り消し
タグ: 取り消し
編集の要約なし
3行目: 3行目:
<html>
<html>
<form method="get" action="" id="searchForm">
<form method="get" action="" id="searchForm">
  <input type="text" name="検索" placeholder="店名・住所・ジャンルなど" style="width:300px;" id="searchText" />
    <!-- 予約可 -->
  <select name="ジャンル" style="margin-left:8px;" id="genre">
    <div class="form-row">
<option value="">すべてのジャンル</option>
        <label class="toggle">
<option value="居酒屋">居酒屋</option>
            <input type="checkbox" name="reservable" value="1">
<option value="ダイニングバー・バル">ダイニングバー・バル</option>
            <span class="slider"></span>
<option value="創作料理">創作料理</option>
        </label>
<option value="和食">和食</option>
        <span>予約できる店だけ</span>
<option value="洋食">洋食</option>
        <input type="submit" value="検索" class="search-btn" />
<option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
    </div>
<option value="中華">中華</option>
    <!-- 店名 -->
<option value="焼肉・ホルモン">焼肉・ホルモン</option>
    <input class="form-row" type="text" name="検索" placeholder="店名" style="width:300px;" id="searchText" />
<option value="韓国料理">韓国料理</option>
    <!-- ジャンル -->
<option value="アジア・エスニック料理">アジア・エスニック料理</option>
    <div class="form-row">
<option value="各国料理">各国料理</option>
        <label>ジャンル</label>
<option value="カラオケ・パーティ">カラオケ・パーティ</option>
        <select name="ジャンル" style="margin-left:8px;" id="genre">
<option value="バー・カクテル">バー・カクテル</option>
            <option value="">すべてのジャンル</option>
<option value="ラーメン">ラーメン</option>
            <option value="居酒屋">居酒屋</option>
<option value=" お好み焼き・もんじゃ"> お好み焼き・もんじゃ</option>
            <option value="ダイニングバー・バル">ダイニングバー・バル</option>
<option value="カフェ・スイーツ">カフェ・スイーツ</option>
            <option value="創作料理">創作料理</option>
<option value="その他グルメ">その他グルメ</option>
            <option value="和食">和食</option>
  </select>
            <option value="洋食">洋食</option>
            <option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
            <option value="中華">中華</option>
            <option value="焼肉・ホルモン">焼肉・ホルモン</option>
            <option value="韓国料理">韓国料理</option>
            <option value="アジア・エスニック料理">アジア・エスニック料理</option>
            <option value="各国料理">各国料理</option>
            <option value="カラオケ・パーティ">カラオケ・パーティ</option>
            <option value="バー・カクテル">バー・カクテル</option>
            <option value="ラーメン">ラーメン</option>
            <option value=" お好み焼き・もんじゃ"> お好み焼き・もんじゃ</option>
            <option value="カフェ・スイーツ">カフェ・スイーツ</option>
            <option value="その他グルメ">その他グルメ</option>
        </select>
    </div>
    <!-- 最寄り -->
    <div class="form-row">
        <label>最寄り</label>
        <select name="station">
            <option value="">指定なし</option>
            <option value="川西能勢口">川西能勢口</option>
            <option value="雲雀丘花屋敷">雲雀丘花屋敷</option>
            <option value="川西池田">川西池田</option>
            <option value="北伊丹">北伊丹</option>
            <option value="絹延橋">絹延橋</option>
            <option value="滝山">滝山</option>
            <option value="鴬の森">鴬の森</option>
            <option value="鼓滝">鼓滝</option>
            <option value="多田">多田</option>
            <option value="平野">平野</option>
            <option value="一の鳥居">一の鳥居</option>
            <option value="畦野">畦野</option>
            <option value="山下">山下</option>
            <option value="笹部">笹部</option>
            <!-- 値は Cargo の station などに合わせる -->
        </select>
    </div>
    <!-- 予算 -->
    <div class="budget-box">
        <label>予算</label>
        <div class="tab-head">
            <input type="radio" name="lanch-dinner"><label>昼</label>
            <input type="radio" name="lanch-dinner"><label>夜</label>
        </div>
        <!-- 昼予算 -->
        <div class="tab-body active" id="tab-lunch">
            <label>下限</label>
            <select name="lunch_min">
                <option value="">指定なし</option>
                <option value="1000">1,000円</option>
                <option value="2000">2,000円</option>
                <option value="3000">3,000円</option>
            </select>


  <input type="submit" value="検索" />
            <span>〜</span>
 
            <label>上限</label>
            <select name="lunch_max">
                <option value="">指定なし</option>
                <option value="2000">2,000円</option>
                <option value="3000">3,000円</option>
                <option value="5000">5,000円</option>
            </select>
        </div>
    </div>
 
    <!-- こだわり(アコーディオン) -->
    <details class="accordion">
        <summary>こだわり条件</summary>
 
        <!-- 支払い -->
        <fieldset>
            <legend>支払い方法</legend>
            <label><input type="checkbox" name="payment[]" value="cash"> 現金</label>
            <label><input type="checkbox" name="payment[]" value="credit"> カード</label>
            <label><input type="checkbox" name="payment[]" value="emoney"> 電子マネー</label>
            <label><input type="checkbox" name="payment[]" value="qr"> QR</label>
        </fieldset>
 
        <!-- 禁煙 / 喫煙 -->
        <fieldset>
            <legend>禁煙 / 喫煙</legend>
            <label><input type="radio" name="smoking" value=""> 指定なし</label>
            <label><input type="radio" name="smoking" value="non"> 禁煙のみ</label>
            <label><input type="radio" name="smoking" value="allow"> 喫煙可</label>
        </fieldset>
 
        <!-- メニュー -->
        <fieldset>
            <legend>メニュー</legend>
            <label><input type="checkbox" name="menu[]" value="tabehodai"> 食べ放題</label>
            <label><input type="checkbox" name="menu[]" value="nomihodai"> 飲み放題</label>
            <label><input type="checkbox" name="menu[]" value="takeout"> テイクアウト</label>
        </fieldset>
 
        <!-- 設備 -->
        <fieldset>
            <legend>設備・サービス</legend>
            <label><input type="checkbox" name="equipment[]" value="parking"> 駐車場</label>
            <label><input type="checkbox" name="equipment[]" value="private"> 個室</label>
            <label><input type="checkbox" name="equipment[]" value="wifi"> Wi-Fi</label>
            <label><input type="checkbox" name="equipment[]" value="barrierfree"> バリアフリー</label>
            <label><input type="checkbox" name="equipment[]" value="kids"> お子様連れOK</label>
            <label><input type="checkbox" name="equipment[]" value="reserve"> 貸切</label>
        </fieldset>
    </details>
</form>
</form>
<style>
<style>
    .search-form {
        max-width: 700px;
        margin: 1em auto;
        font-size: 14px;
    }
    .form-row {
        display: flex;
        align-items: center;
        margin: 0.5em 0;
        gap: 1em;
    }
    /* トグルスイッチ */
    .toggle {
        position: relative;
        width: 40px;
        height: 22px;
        display: inline-block;
    }
    .toggle input {
        display: none;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: #ccc;
        border-radius: 22px;
    }
    .slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 2px;
        top: 2px;
        background: white;
        border-radius: 50%;
        transition: .3s;
    }
    .toggle input:checked+.slider {
        background: #4caf50;
    }
    .toggle input:checked+.slider::before {
        transform: translateX(18px);
    }
    /* アコーディオン */
    details {
        margin-top: 1em;
        border: 1px solid #ccc;
        padding: 1em;
        border-radius: 6px;
    }
    details summary {
        cursor: pointer;
        font-weight: bold;
    }
    fieldset {
        border: none;
        margin: 1em 0;
    }
    legend {
        font-weight: bold;
    }
.search-card {
.search-card {
   border: 1px solid #ddd;
   border: 1px solid #ddd;

2025年12月5日 (金) 18:10時点における版

検索条件

予約できる店だけ
〜
こだわり条件
支払い方法
禁煙 / 喫煙
メニュー
設備・サービス

検索結果

エラー: テーブル飲食店情報が見つかりません。