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

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

提供: 川西図鑑
その他の操作
← 古い編集新しい編集 →
ビジュアルウィキテキスト
編集の要約なし
編集の要約なし
29行目: 29行目:
<html>
<html>
<form method="get" action="" id="searchForm">
<form method="get" action="" id="searchForm">
     <div style="padding: 10px;">
     <div class="search-form-container">
    <div class="form-row">
       
        <div class="clear-btn">クリア</div>
        <!-- 検索ボタンエリア -->
        <input type="submit" value="検索" class="search-btn" />
        <div class="form-actions">
    </div>
            <button type="button" class="clear-btn">クリア</button>
    <!-- 予約可 -->
            <button type="submit" class="search-btn">検索</button>
    <div class="form-row">
        </div>
        <span>予約できる店だけ</span>
       
        <label class="toggle">
        <!-- 予約可トグル -->
            <input type="checkbox" name="reservable" value="1">
        <div class="form-row toggle-row">
            <span class="slider"></span>
            <span class="toggle-label">予約できる店だけ</span>
        </label>
            <label class="toggle">
    </div>
                <input type="checkbox" name="reservable" value="1">
    <!-- 店名 -->
                <span class="slider"></span>
    <input class="form-row inputbox" type="text" name="searchText" placeholder="店名" id="searchText"/>
            </label>
    <!-- ジャンル -->
        </div>
    <div class="form-row">
          
         <select name="genre" id="genre" class="inputbox">
         <!-- 店名検索 -->
            <option value="">すべてのジャンル</option>
        <div class="form-row">
            <option value="居酒屋">居酒屋</option>
             <input class="form-input" type="text" name="searchText" placeholder="店名で検索" id="searchText"/>
            <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>
            <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>
         <div>
       
             <label>下限</label>
        <!-- ジャンル -->
            <select name="budget_min" id="budget_min">
         <div class="form-row">
                 <option value="">指定なし</option>
             <select name="genre" id="genre" class="form-select">
                 <option value="1000">1,000円</option>
                <option value="">すべてのジャンル</option>
                 <option value="2000">2,000円</option>
                <option value="居酒屋">居酒屋</option>
                 <option value="3000">3,000円</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>
             </select>
 
        </div>
             <span>〜</span>
       
 
        <!-- 最寄り駅 -->
            <label>上限</label>
        <div class="form-row">
            <select name="budget_max" id="budget_max">
             <select name="station" class="form-select" id="station">
                 <option value="">指定なし</option>
                <option value="">最寄り駅：指定なし</option>
                 <option value="2000">2,000円</option>
                <option value="川西能勢口駅">川西能勢口</option>
                 <option value="3000">3,000円</option>
                <option value="雲雀丘花屋敷駅">雲雀丘花屋敷</option>
                 <option value="5000">5,000円</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>
             </select>
         </div>
         </div>
    </div>
       
        <!-- 予算 -->
        <div class="budget-section">
            <div class="budget-header">
                <span class="budget-title">予算</span>
                <div class="budget-type">
                    <label class="radio-label">
                        <input type="radio" name="lanch-dinner" value="lanch">
                        <span>昼</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="lanch-dinner" value="dinner">
                        <span>夜</span>
                    </label>
                </div>
            </div>
            <div class="budget-range">
                <select name="budget_min" id="budget_min" class="form-select-small">
                    <option value="">下限なし</option>
                    <option value="1000">1,000円</option>
                    <option value="2000">2,000円</option>
                    <option value="3000">3,000円</option>
                </select>
                <span class="budget-separator">〜</span>
                <select name="budget_max" id="budget_max" class="form-select-small">
                    <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>
     </div>


     <!-- こだわり（アコーディオン） -->
     <!-- こだわり条件（アコーディオン） -->
     <details class="accordion">
     <details class="accordion">
         <summary>こだわり条件</summary>
         <summary>こだわり条件</summary>
       
        <div class="accordion-content">
            <!-- 支払い方法 -->
            <fieldset class="filter-group">
                <legend>支払い方法</legend>
                <div class="checkbox-grid">
                    <label class="checkbox-label">
                        <input type="checkbox" name="credit">
                        <span>カード</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" name="emoney">
                        <span>電子マネー</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" name="qr">
                        <span>QRコード決済</span>
                    </label>
                </div>
            </fieldset>


        <!-- 支払い -->
            <!-- 禁煙・喫煙 -->
        <fieldset>
            <fieldset class="filter-group">
            <legend>支払い方法</legend>
                <legend>禁煙 / 喫煙</legend>
            <label><input type="checkbox" name="credit"> カード</label>
                <div class="radio-grid">
            <label><input type="checkbox" name="emoney"> 電子マネー</label>
                    <label class="radio-label">
            <label><input type="checkbox" name="qr"> QRコード決済</label>
                        <input type="radio" name="smoking" value="">
        </fieldset>
                        <span>指定なし</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="smoking" value="non">
                        <span>禁煙のみ</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="smoking" value="allow">
                        <span>喫煙可</span>
                    </label>
                </div>
            </fieldset>


        <!-- 禁煙 / 喫煙 -->
            <!-- メニュー -->
        <fieldset>
            <fieldset class="filter-group">
            <legend>禁煙 / 喫煙</legend>
                <legend>メニュー</legend>
            <label style="width: 33%;"><input type="radio" name="smoking" value="" > 指定なし</label>
                <div class="checkbox-grid">
            <label style="width: 33%;"><input type="radio" name="smoking" value="non"> 禁煙のみ</label>
                    <label class="checkbox-label">
            <label style="width: 33%;"><input type="radio" name="smoking" value="allow"> 喫煙可</label>
                        <input type="checkbox" name="tabehodai">
        </fieldset>
                        <span>食べ放題</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" name="nomihodai">
                        <span>飲み放題</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" name="takeout">
                        <span>テイクアウト</span>
                    </label>
                </div>
            </fieldset>


        <!-- メニュー -->
            <!-- 設備・サービス -->
        <fieldset>
            <fieldset class="filter-group">
            <legend>メニュー</legend>
                <legend>設備・サービス</legend>
            <label><input type="checkbox" name="tabehodai"> 食べ放題</label>
                <div class="checkbox-grid">
            <label><input type="checkbox" name="nomihodai"> 飲み放題</label>
                    <label class="checkbox-label">
            <label><input type="checkbox" name="takeout"> テイクアウト</label>
                        <input type="checkbox" name="parking">
        </fieldset>
                        <span>駐車場</span>
 
                    </label>
        <!-- 設備 -->
                    <label class="checkbox-label">
        <fieldset>
                        <input type="checkbox" name="privateroom">
            <legend>設備・サービス</legend>
                        <span>個室</span>
            <label><input type="checkbox" name="parking"> 駐車場</label>
                    </label>
            <label><input type="checkbox" name="privateroom"> 個室</label>
                    <label class="checkbox-label">
            <label><input type="checkbox" name="wifi"> Wi-Fi</label>
                        <input type="checkbox" name="wifi">
            <label><input type="checkbox" name="barrierfree"> バリアフリー</label>
                        <span>Wi-Fi</span>
            <label><input type="checkbox" name="kids"> お子様連れOK</label>
                    </label>
            <label><input type="checkbox" name="reserve"> 貸切</label>
                    <label class="checkbox-label">
        </fieldset>
                        <input type="checkbox" name="barrierfree">
    <div class="form-row">
                        <span>バリアフリー</span>
        <div class="clear-btn">クリア</div>
                    </label>
        <input type="submit" value="検索" class="search-btn" />
                    <label class="checkbox-label">
    </div>
                        <input type="checkbox" name="kids">
                        <span>お子様連れOK</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" name="reserve">
                        <span>貸切</span>
                    </label>
                </div>
            </fieldset>
           
            <!-- アコーディオン内の検索ボタン -->
            <div class="form-actions">
                <button type="button" class="clear-btn">クリア</button>
                <button type="submit" class="search-btn">検索</button>
            </div>
        </div>
     </details>
     </details>
</form>
</form>


<style>
<style>
/* ========================================
  フォーム全体
======================================== */
#searchForm {
    max-width: 600px;
    margin: 0 auto;
    font-size: 14px;
}
.search-form-container {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 16px;
}
/* ========================================
  ボタンエリア
======================================== */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}
.clear-btn {
.clear-btn {
  margin-left: auto;
    padding: 10px 20px;
  padding: 8px 16px;
    background: #e0e0e0;
  background: #ccc;
    color: #333;
  border-radius: 6px;
    border: none;
  cursor: pointer;
    border-radius: 8px;
  user-select: none;
    cursor: pointer;
  font-size: 14px;
    font-size: 14px;
  color: black;
    font-weight: 600;
    transition: all 0.2s;
}
 
.clear-btn:hover {
    background: #d0d0d0;
}
}


.clear-btn:active {
.clear-btn:active {
  opacity: 0.7;
    transform: scale(0.98);
}
}


.search-btn {
.search-btn {
     margin-left: 10px;
     padding: 10px 24px;
    display: block;
     background: #f59e0b;
    width: 75px;
    padding: 14px 0;
     background: #0078ff;
     color: #fff;
     color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
     border: none;
     border: none;
     border-radius: 8px;
     border-radius: 8px;
     cursor: pointer;
     cursor: pointer;
     transition: all 0.25s ease;
    font-size: 14px;
    font-weight: 600;
     transition: all 0.2s;
}
 
.search-btn:hover {
    background: #d97706;
}
}
#searchText,
 
#searchForm select{
.search-btn:active {
    height: 35px;
     transform: scale(0.98);
    font-size: 1em;
    background-color: Canvas;
     color: CanvasText;
}
}
.inputbox {
 
/* ========================================
  フォーム行
======================================== */
.form-row {
    margin-bottom: 12px;
}
 
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
}
 
.toggle-label {
    font-weight: 500;
    color: #333;
}
 
/* ========================================
  入力フィールド
======================================== */
.form-input,
.form-select {
     width: 100%;
     width: 100%;
     max-width: 450px;
     padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: #fff;
}
 
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
 
.form-input::placeholder {
    color: #9ca3af;
}
}
#searchForm input[type="radio"],
 
#searchForm input[type="checkbox"] {
/* ========================================
     transform: scale(1.5);
  予算セクション
     transform-origin: left center;
======================================== */
     margin-right: 15px;
.budget-section {
     background: #f9fafb;
    padding: 16px;
     border-radius: 8px;
     margin-bottom: 12px;
}
}
#searchForm fieldset label {
 
.budget-header {
     display: flex;
     display: flex;
    justify-content: space-between;
     align-items: center;
     align-items: center;
    width: 50%;
     margin-bottom: 12px;
    box-sizing: border-box;
     margin-bottom: 8px;
}
}
#searchForm fieldset {
 
     display: flex;
.budget-title {
     flex-wrap: wrap;
     font-weight: 600;
     color: #333;
}
}


.search-form {
.budget-type {
     max-width: 700px;
     display: flex;
    margin: 1em auto;
     gap: 16px;
     font-size: 14px;
}
}


.form-row {
.budget-range {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     margin: 0.5em 0;
     gap: 8px;
     gap: 1em;
}
 
.form-select-small {
    flex: 1;
     padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
 
.budget-separator {
    color: #6b7280;
    font-weight: 500;
}
}


/* トグルスイッチ */
/* ========================================
  トグルスイッチ
======================================== */
.toggle {
.toggle {
     position: relative;
     position: relative;
     width: 40px;
     width: 44px;
     height: 22px;
     height: 24px;
     display: inline-block;
     display: inline-block;
}
}
252行目: 413行目:
     cursor: pointer;
     cursor: pointer;
     inset: 0;
     inset: 0;
     background: #ccc;
     background: #d1d5db;
     border-radius: 22px;
     border-radius: 24px;
    transition: 0.3s;
}
}


261行目: 423行目:
     height: 18px;
     height: 18px;
     width: 18px;
     width: 18px;
     left: 2px;
     left: 3px;
     top: 2px;
     top: 3px;
     background: white;
     background: white;
     border-radius: 50%;
     border-radius: 50%;
     transition: .3s;
     transition: 0.3s;
}
}


.toggle input:checked+.slider {
.toggle input:checked + .slider {
     background: #4caf50;
     background: #f59e0b;
}
}


.toggle input:checked+.slider::before {
.toggle input:checked + .slider::before {
     transform: translateX(18px);
     transform: translateX(20px);
}
}


/* アコーディオン */
/* ========================================
html.skin-theme-clientpref-day .accordion {
  ラジオボタン
     margin-top: 1em;
======================================== */
     border: 1px solid #ccc;
.radio-label {
     padding: 1em;
    display: inline-flex;
     border-radius: 6px;
    align-items: center;
     background-color: #f7f9fc;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
 
.radio-label input[type="radio"] {
     width: 18px;
    height: 18px;
    cursor: pointer;
}
 
.radio-label span {
    font-size: 14px;
     color: #374151;
}
 
.radio-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
 
/* ========================================
  チェックボックス
======================================== */
.checkbox-label {
    display: inline-flex;
    align-items: center;
     gap: 8px;
     cursor: pointer;
    user-select: none;
}
 
.checkbox-label input[type="checkbox"] {
    width: 18px;
     height: 18px;
    cursor: pointer;
}
 
.checkbox-label span {
    font-size: 14px;
    color: #374151;
}
 
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
}


html.skin-theme-clientpref-night .accordion {
/* ========================================
     margin-top: 1em;
  アコーディオン
     border: 1px solid #ccc;
======================================== */
     padding: 1em;
.accordion {
     border-radius: 6px;
     background: #fff;
     background: #1f2430;
     border: 1px solid #e5e7eb;
     color: #e5e7eb;
     border-radius: 12px;
     padding: 0;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
}


.accordion summary {
.accordion summary {
    padding: 16px 20px;
     cursor: pointer;
     cursor: pointer;
     font-weight: bold;
     font-weight: 600;
    font-size: 15px;
    color: #111827;
    background: #f9fafb;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
}


fieldset {
.accordion summary::-webkit-details-marker {
    display: none;
}
 
.accordion summary::after {
    content: "▼";
    font-size: 12px;
    color: #6b7280;
    transition: transform 0.3s;
}
 
.accordion[open] summary::after {
    transform: rotate(180deg);
}
 
.accordion-content {
    padding: 20px;
}
 
/* ========================================
  フィルターグループ
======================================== */
.filter-group {
     border: none;
     border: none;
     margin: 1em 0;
    padding: 0;
    margin-bottom: 20px;
}
 
.filter-group:last-of-type {
     margin-bottom: 0;
}
 
.filter-group legend {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    margin-bottom: 12px;
}
 
/* ========================================
  ダークモード対応
======================================== */
.skin-theme-clientpref-night .search-form-container,
.skin-theme-clientpref-night .accordion {
    background: #1e1e1e;
    border-color: #3a3a3a;
}
 
.skin-theme-clientpref-night .form-input,
.skin-theme-clientpref-night .form-select,
.skin-theme-clientpref-night .form-select-small {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e5e7eb;
}
 
.skin-theme-clientpref-night .toggle-row,
.skin-theme-clientpref-night .budget-section,
.skin-theme-clientpref-night .accordion summary {
    background: #2a2a2a;
}
 
.skin-theme-clientpref-night .toggle-label,
.skin-theme-clientpref-night .budget-title,
.skin-theme-clientpref-night .filter-group legend,
.skin-theme-clientpref-night .accordion summary {
    color: #e5e7eb;
}
 
.skin-theme-clientpref-night .radio-label span,
.skin-theme-clientpref-night .checkbox-label span {
    color: #d1d5db;
}
 
.skin-theme-clientpref-night .clear-btn {
    background: #3a3a3a;
    color: #e5e7eb;
}
 
.skin-theme-clientpref-night .clear-btn:hover {
    background: #4a4a4a;
}
 
/* 自動モード（ダーク時） */
@media (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os .search-form-container,
    .skin-theme-clientpref-os .accordion {
        background: #1e1e1e;
        border-color: #3a3a3a;
    }
   
    .skin-theme-clientpref-os .form-input,
    .skin-theme-clientpref-os .form-select,
    .skin-theme-clientpref-os .form-select-small {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #e5e7eb;
    }
   
    .skin-theme-clientpref-os .toggle-row,
    .skin-theme-clientpref-os .budget-section,
    .skin-theme-clientpref-os .accordion summary {
        background: #2a2a2a;
    }
   
    .skin-theme-clientpref-os .toggle-label,
    .skin-theme-clientpref-os .budget-title,
    .skin-theme-clientpref-os .filter-group legend,
    .skin-theme-clientpref-os .accordion summary {
        color: #e5e7eb;
    }
   
    .skin-theme-clientpref-os .radio-label span,
    .skin-theme-clientpref-os .checkbox-label span {
        color: #d1d5db;
    }
   
    .skin-theme-clientpref-os .clear-btn {
        background: #3a3a3a;
        color: #e5e7eb;
    }
   
    .skin-theme-clientpref-os .clear-btn:hover {
        background: #4a4a4a;
    }
}
}


legend {
/* ========================================
     font-weight: bold;
  レスポンシブ
======================================== */
@media (max-width: 600px) {
     .search-form-container {
        padding: 16px;
    }
   
    .budget-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
   
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}
}
</style>
</style>

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

検索条件

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



川西市のグルメ

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

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

" data-limit="30">

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

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

検索結果

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


「https://testzukan.zebralion.co.jp/index.php?title=飲食店検索&oldid=2649」から取得
最終更新
このページの最終更新日時は 2026年1月22日 (木) 12:41 です。