質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

11199閲覧

htmlのtableでドロップダウンメニューを作る方法

aba623ky

総合スコア63

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/09/11 09:43

こんにちは、初めまして。
htmlのtableでドロップダウンメニューを作る方法について質問があります。
たくさんのサイトを調べると、ulを使ってドロップダウンメニューを作る方法を載せたサイトを見ることがありますが、tableを使ってドロップダウンメニューを作る方法を載せたサイトを見ることがありません。
HTMLでは、ulがリストで、tableが表を作るときに使用しますよね。
ドロップダウンメニューはulでないと作れないのですか?
例えば、

php

1echo '<table border="1">'; 2 echo '<caption class="class">'; 3 echo 'メニュー'; 4 echo '</caption>'; 5 echo '<tr>'; 6 echo '<th>'; 7 echo '1'; 8 echo '</th>'; 9 echo '<td>'; 10 echo 'メニュー1'; 11 echo '</td>'; 12 echo '</tr>'; 13 echo '<tr>'; 14 echo '<th>'; 15 echo '2'; 16 echo '</th>'; 17 echo '<td>'; 18 echo 'メニュー2'; 19 echo '</td>'; 20 echo '</tr>'; 21
<caption>の中のメニューをクリックすると、 ```php echo '<tr>'; echo '<th>'; echo '1'; echo '</th>'; echo '<td>'; echo 'メニュー1'; echo '</td>'; echo '</tr>'; echo '<tr>'; echo '<th>'; echo '2'; echo '</th>'; echo '<td>'; echo 'メニュー2'; echo '</td>'; echo '</tr>';
をドロップダウンメニューとして表示したいのですが、やり方がわかりません。 このサイトを参考にしてドロップダウンメニューが作りたいです。

http://9-bb.com/cssだけでメニューが開いたり閉じたりするアコー/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

jQueryなど絡めてクライアントサイドの
処理を入れれば可能だと思いますが
マークアップの原則から考えればやるべきではありません

追記

ちなみにメニューだと考えず単にテーブルの表示/非表示をcaptionで行うという趣旨なら
こんな感じでどうでしょう?

HTML

1<table width=100> 2<caption class="class">メニュー</caption> 3<tbody> 4<tr> 5<th>1</th> 6<td>メニュー1</td> 7</tr> 8<tr> 9<th>2</th> 10<td>メニュー2</td> 11</tr> 12</tbody> 13</table>
  • tableの幅を指定しておかないとcaptionがずれる
  • javascriptでtableを操作するときにはブラウザごとの誤差を抑えるために

theadやtbodyはなるべく明示してください

javascript

1$(function(){ 2 $('.class').siblings().css('display','none'); 3 $('.class').click(function(){ 4 var disp=$(this).siblings().css('display'); 5 $(this).siblings().css('display',disp=='none'?'':'none'); 6 }); 7}); 8

追記2

確実でなくてよければ以下が近いかも
セレクタの解釈などブラウザの違いが吸収しきれませんが
とくにIEなどはbehavior:expression()など使わないとダメかもしれません

css

1.on-off{display:none;} 2input[type="checkbox"].on-off + table>tbody{display:none;} 3input[type="checkbox"].on-off:checked + table>tbody{display:table;}

HTML

1<input type="checkbox" id="Panel1" class="on-off"> 2<table class="menu" width=100> 3<caption class="class"> 4<label for="Panel1">メニュー</label> 5</caption> 6<tbody> 7<tr> 8<th>1</th> 9<td>メニュー1</td> 10</tr> 11<tr> 12<th>2</th> 13<td>メニュー2</td> 14</tr> 15</tbody> 16</table>

補足

※idをきちんとつければ複数でもいけるはず
(古いIEを除く)

CSS

1.on-off{display:none;} 2input[type="checkbox"].on-off + table>tbody{display:none;} 3input[type="checkbox"].on-off:checked + table>tbody{display:table;} 4

HTML

1<input type="checkbox" id="Panel1" class="on-off"> 2<table class="menu" width=100> 3<caption class="class"> 4<label for="Panel1">メニューa</label> 5</caption> 6<tbody> 7<tr> 8<th>1</th> 9<td>メニュー1</td> 10</tr> 11<tr> 12<th>2</th> 13<td>メニュー2</td> 14</tr> 15</tbody> 16</table><input type="checkbox" id="Panel2" class="on-off"> 17<table class="menu" width=100> 18<caption class="class"> 19<label for="Panel2">メニューb</label> 20</caption> 21<tbody> 22<tr> 23<th>1</th> 24<td>メニュー1</td> 25</tr> 26<tr> 27<th>2</th> 28<td>メニュー2</td> 29</tr> 30</tbody> 31</table> 32<input type="checkbox" id="Panel3" class="on-off"> 33<table class="menu" width=100> 34<caption class="class"> 35<label for="Panel3">メニューc</label> 36</caption> 37<tbody> 38<tr> 39<th>1</th> 40<td>メニュー1</td> 41</tr> 42<tr> 43<th>2</th> 44<td>メニュー2</td> 45</tr> 46</tbody> 47</table>

投稿2016/09/11 14:35

編集2016/09/13 09:07
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/09/12 02:49

すみません、javascriptではないと、ドロップダウンメニューは作れないのですか?
yambejp

2016/09/12 03:12

CSS版を追記しておきました
aba623ky

2016/09/12 03:23

ありがとうございます。 実行してみます。
aba623ky

2016/09/12 14:09

ごめんなさい、今日は実行することが出来ませんでした。 一つ分からない点がありました。caption class="class">のclassは何を書くのですか?
aba623ky

2016/09/13 05:51

すみません、 class="class"のcssには何が入るのですか?
aba623ky

2016/09/13 08:19

複数のtableだと、一つしか表示されません。
yambejp

2016/09/13 09:09

>class="class"のcssには何が入るのですか? いや、元のソースに書いてあったのでそのまま転記したんですが。 いらないなら消してください。 複数tableを処理する方法を補足してあります。 checkboxにつけるidを使って調整してください
aba623ky

2016/09/13 09:10

つまり、input type="checkbox"を複数作らなくてはいけないのですか? 一つのinput type="checkbox"で複数のtableに配置することは可能ですか?
yambejp

2016/09/13 09:16

チェックボックスでクリックしたかどうかを保存しているのでメニューの数だけ チェックボックスが必要です。 質問者さんが最初に例示されたサイトもそうかいてありますよね? (むしろ私のコードもほぼ丸パクリで書いたのですが)
aba623ky

2016/09/13 09:24

なるほど、そういうことですか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問