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

「テンプレート:飲食店ジャンルページ」の版間の差分

提供: 川西図鑑
その他の操作
← 古い編集新しい編集 →
ビジュアルウィキテキスト
編集の要約なし
編集の要約なし
57行目: 57行目:
== 検索条件 ==
== 検索条件 ==
<!-- 検索ボックス -->
<!-- 検索ボックス -->
{{検索UI/飲食店}}
<html>
<html>
<form method="get" action="/wiki/飲食店検索" id="searchForm">
    <div style="padding: 10px;">
    <div class="form-row">
        <div class="clear-btn">クリア</div>
        <input type="submit" value="検索" class="search-btn" />
    </div>
    <!-- 予約可 -->
    <div class="form-row">
        <span>予約できる店だけ</span>
        <label class="toggle">
            <input type="checkbox" name="reservable" value="1">
            <span class="slider"></span>
        </label>
    </div>
    <!-- 店名 -->
    <input class="form-row inputbox" type="text" name="searchText" placeholder="店名" id="searchText"/>
    <!-- ジャンル -->
    <div class="form-row">
        <select name="genre" id="genre" class="inputbox">
            <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>
            <option value="お好み焼き・もんじゃ"> お好み焼き・もんじゃ</option>
            <option value="カフェ・スイーツ">カフェ・スイーツ</option>
            <option value="その他グルメ">その他グルメ</option>
        </select>
    </div>
    <!-- 最寄り -->
    <div class="form-row">
        <select name="station" class="inputbox" id="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>
        </select>
    </div>
    <!-- 予算 -->
    <div class="budget-box">
        <label>予算</label>
        <div>
            <label><input type="radio" name="lanch-dinner" value="lanch">昼</label>
            <label><input type="radio" name="lanch-dinner" value="dinner">夜</label>
        </div>
        <div>
            <label>下限</label>
            <select name="budget_min" id="budget_min">
                <option value="">指定なし</option>
                <option value="1000">1,000円</option>
                <option value="2000">2,000円</option>
                <option value="3000">3,000円</option>
            </select>
            <span>〜</span>
            <label>上限</label>
            <select name="budget_max" id="budget_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>
    </div>
    <!-- こだわり（アコーディオン） -->
    <details class="accordion">
        <summary>こだわり条件</summary>
        <!-- 支払い -->
        <fieldset>
            <legend>支払い方法</legend>
            <label><input type="checkbox" name="credit"> カード</label>
            <label><input type="checkbox" name="emoney"> 電子マネー</label>
            <label><input type="checkbox" name="qr"> QRコード決済</label>
        </fieldset>
        <!-- 禁煙 / 喫煙 -->
        <fieldset>
            <legend>禁煙 / 喫煙</legend>
            <label style="width: 33%;"><input type="radio" name="smoking" value="" > 指定なし</label>
            <label style="width: 33%;"><input type="radio" name="smoking" value="non"> 禁煙のみ</label>
            <label style="width: 33%;"><input type="radio" name="smoking" value="allow"> 喫煙可</label>
        </fieldset>
        <!-- メニュー -->
        <fieldset>
            <legend>メニュー</legend>
            <label><input type="checkbox" name="tabehodai"> 食べ放題</label>
            <label><input type="checkbox" name="nomihodai"> 飲み放題</label>
            <label><input type="checkbox" name="takeout"> テイクアウト</label>
        </fieldset>
        <!-- 設備 -->
        <fieldset>
            <legend>設備・サービス</legend>
            <label><input type="checkbox" name="parking"> 駐車場</label>
            <label><input type="checkbox" name="privateroom"> 個室</label>
            <label><input type="checkbox" name="wifi"> Wi-Fi</label>
            <label><input type="checkbox" name="barrierfree"> バリアフリー</label>
            <label><input type="checkbox" name="kids"> お子様連れOK</label>
            <label><input type="checkbox" name="reserve"> 貸切</label>
        </fieldset>
    <div class="form-row">
        <div class="clear-btn">クリア</div>
        <input type="submit" value="検索" class="search-btn" />
    </div>
    </details>
</form>
<style>
  .clear-btn {
    margin-left: auto;
    padding: 8px 16px;
    background: #ccc;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: black;
  }
  .clear-btn:active {
    opacity: 0.7;
  }
  .search-btn {
      margin-left: 10px;
      display: block;
      width: 75px;
      padding: 14px 0;
      background: #0078ff;
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
  }
  #searchText,
  #searchForm select{
      height: 35px;
      font-size: 1em;
      background-color: Canvas;
      color: CanvasText;
  }
  .inputbox {
      width: 100%;
      max-width: 450px;
  }
  #searchForm input[type="radio"],
  #searchForm input[type="checkbox"] {
      transform: scale(1.5);
      transform-origin: left center;
      margin-right: 15px;
  }
  #searchForm fieldset label {
      display: flex;
      align-items: center;
      width: 50%;
      box-sizing: border-box;
      margin-bottom: 8px;
  }
  #searchForm fieldset {
      display: flex;
      flex-wrap: wrap;
  }
  .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);
  }
  /* アコーディオン */
  html.skin-theme-clientpref-day .accordion {
      margin-top: 1em;
      border: 1px solid #ccc;
      padding: 1em;
      border-radius: 6px;
      background-color: #f7f9fc;
  }
  html.skin-theme-clientpref-night .accordion {
      margin-top: 1em;
      border: 1px solid #ccc;
      padding: 1em;
      border-radius: 6px;
      background: #1f2430;
      color: #e5e7eb;
  }
  .accordion summary {
      cursor: pointer;
      font-weight: bold;
  }
  fieldset {
      border: none;
      margin: 1em 0;
  }
  legend {
      font-weight: bold;
  }
</style>
<script>
<script>
document.getElementById('searchForm').addEventListener('submit', function (e) {
document.getElementById('searchForm').addEventListener('submit', function (e) {

2026年1月22日 (木) 12:55時点における版

川西市で人気の{{{genre}}}のお店を一覧でご紹介しています。

下の検索フォームを使えば、さらに条件を絞り込んで探すこともできます。

検索条件

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



川西市の{{{genre}}}

<strong style="float: right;" id="count" data-total="

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

" data-limit="30">

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

件の結果があります（1 件目～）

検索結果

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


「https://testzukan.zebralion.co.jp/index.php?title=テンプレート:飲食店ジャンルページ&oldid=2657」から取得
最終更新
このページの最終更新日時は 2026年1月22日 (木) 12:55 です。