私は、プログラマなのである。
デザイナーではない。
私がこの業界に来た頃はVB全盛で、画面作成は直感的にできました。
WEB全盛となった今でもそのような作成が可能であることは知ってはいます。
しかし、難易度は比較になりません。
HTML,CSSが分からないプログラマは大勢います。
分からないというと語弊がありますね、嫌いな、といいましょうか。
たまにiPhoneアプリやAndroidアプリの作成を手掛けると、VB時代を思い出します。
画面に部品を置き、そのイベントを裏で作成していく工程が似ているんですね。
WEB全盛の今、プログラマと言えど、あまりにみすぼらしい画面ばかり作ってもいられません。
そんなデザイン嫌いなプログラマのためにBootStrapはあります。
それらしい画面をclass指定だけで実現できてしまう、その便利さは知ってしまうとちょっと手放せません。
しかし、Bootstrapが提供するdropdown形式のナビゲーションの作成で、妙なところで躓きました。
結果的に、自力で原因を突き止めることが出来、無事作成することができましたが、そのちょっとしたコツとも言いましょうか、引っかかりやすい現象について、触れているサイトに巡り合いませんでした。書籍にも。
（全部見ているわけではないので、どこかにはあるのかもしれませんが。。）
BootStrapのナビゲーションでは<a>タグでナビのボタンを作成します。
通常、<a>タグを書く場合、hrefでどこへも飛ばさずに、onclickを使うときには<a href=”#” ～>という書き方がどこでも例として出ています。
この”#”はなんなのか、あまり深く考えず、onclickの後にhrefを動かしたくないときに書いてしまいます。そういうもんだと、思い込んでいるのです。
更にこのようなサイトもあります。
http://bootstrap3.cyberlab.info/javascript/dropdowns-navbar.html
このサイトの中でも<a href=”#”>がたくさん出てきます。その中で特に重要な箇所が下記になります。
<li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">ドロップダウンＡ <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">リンクリストＡ１</a></li> <li><a href="#">リンクリストＡ２</a></li> <li><a href="#">リンクリストＡ３</a></li> </ul> </li>
この中の「ドロップダウンA」を作っている<a href=”#” class=”dorpdown-toggle”～
の部分のhref=”#”です。
このサイトではこのコードが実際に動いているようです。
しかし私の環境ではこれでは動きませんでした。
この通りに書いても動かない。
別の教科書で<a href=”” ～
と書いてあるのを見つけ、試しに#を取ってみました。
動いたんです。。ボタンをクリックするとドロップダウンメニューが出現する。
もう一度#をつけてみる。dropdownが出なくなります。
#を取る。ちゃんと動きます。
なんなんでしょうか、これ。
ちなみに私の環境はNetBeans8.1でFuelPHPプロジェクトを作成して作った環境です。
PHPプロジェクトでフレームワークにFuelPHPを選択すると、すでにassetsの下にbootstrapが格納されています。ｊQueryはないのでそれは自分でなんとかしなければいけませんが、それ以外は揃っています。
そこでviewを作成しての結果です。
動かなかったら<a>タグの#を取ってみてください。
実体験に基づいたアドヴァイスです。何が起きてるのかは、知りません。
動けばいいんです。