レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－１） [公開アプリ]
"レスポンシブWebデザイン導入計画シリーズ" としてはこの回の続きになります。
こんばんわ・・・。
２日に渡って分をわきまえないエントリをブッこいて、
昨日、今日とツイッターであびるさん・かん吉さんから直接お返事を頂くという超幸運が続き、
何がなにやら分からなくなってしまっている sakashushu です ^^;
・・・。
はい、私の精神状態なんぞ掘り下げても仕方ありません。
皆様良い大晦日をお過ごしでしょうか？
大晦日ということで、それっぽいエントリにしようかとも
思ったんですが、ブログを再開してそれほど経っていないですし
今年最後のエントリはやっぱり
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
でないといかんだろうという想いも沸いたもので。
今回もいいオッサンの体当たりに宜しくお付き合いの程を。
Parllet（パレット） のレスポンシブ化は、
トップページとログインページまでが完了していました。
今回から設定ページに入ります。
実装する内容は、この回にポストしたものです。
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
■ 現状
現時点の Parllet（パレット） の設定ページを元に、スナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
いつものように体当たりで学びながら進めていきます。
■ 体当たり開始
一応この回の案に沿っていきます（一応て・・・ ^^; ）
幅を狭めていってタブレットサイズ（768px）以下は
１行目の大分類のヘッダーと、２行目の小分類のヘッダー
それそれを縮小する方向。
１行目のヘッダーは ロゴ と 会員メニュー のみ残し、
２行目に
大分類 ＞ 小分類
の形のパンくずリストで表示します。
案として書くのは簡単なんですけどね～。
実装になると、意識しないとすぐこんがらがる私です。
まずは 768px 以下になった時に１行目・２行目共にページメニューが消えるようにします。
サンプル設定ページ１ のソース内の <style> ～ </style> の部分に追記
/* スマホのスタイル */ に追記
#memberMenu {
display: none;
}
/* PCのスタイル */ に追記
#memberMenu {
display: block;
}
このぐらいの幅までは表示されてて、
このぐらいの幅でちゃんと消えました。
私：「ん？」
私：「・・・・・。」
私：「・・・・・。」
私：「・・・・・汗。」
私：「・・・・・汗汗汗。」
私：「・・・・・汗汗汗汗汗。」
私：「・・・・・あかんやん！」
いや、動きは問題ないんですけどね。
それじゃなくて・・・・・。
■ 体当たり・・・、ちょ、ちょっと中断・・・
気づきました？
気づきましたよね～・・。
ソースを見ていただけると一発ですが、
ヘッダー内の１行目と２行目共に、<ul id="memberMenu" > で作っちゃっておりました！
すんませ～ん・・、すんませ～ん・・・。
※この時点で慌てて公開Parllet（パレット） の方は修正しました。
そして、もう一つ白状します。
CSS の idセレクタを２回使ってはいけない理由について。
使ってはいけないってことは知ってましたが、
なんで使ってはいけないのか・・・、ちゃんとは知りません！
すんませ～ん・・、すんませ～ん・・・。
まあ、こんな次元なんで、私。
（いつもの繰り返しになりますが、Parllet（パレット） をご利用中の方、また今後ご利用して頂ける方に置かれましては、こんな私が作者である旨十分ご理解の上でのご利用をお願いいたします。）
気を取り直して、なんで使ってはいけないのか 検索します！
「css id 複数」で検索。
以下のページを見つけました。
CSSの記述方法 －idとclassの違い - CSSレイアウト実践講座
1ページで1度しか使用できない名前を複数使ってしまった場合（id="name"という記述が複数になった場合）、一部のアクセス解析やその他 cgiプログラムなどで不具合を起こしてしまうこともあるようです。
ブラウザ上ではid名が重複していてもCSSの指定は反映されますが、リスクを考えて慎重に使うようにしましょう。
それでも不安、という方は、idは使わずに全てclassで設定すれば問題ありません。
はい！すんませ～ん！
私みたいのは、全て class ってした方がましなのかもですね。
ちなみに以下のような情報もあります。
jQueryを高速に動作させるためのポイント5つ | 株式会社LIG
セレクタで指定する値はCSSチックに何でもかけてしまうわけであるが、jQueryとは言えど、中身はJavaScript。
内部的にはJavaScriptの関数を使ってHTMLのDOMをさがしているのである。
JavaScriptで一発でDOMを探す方法は「document.getElementById()」でIDを指定して検索するか、「document.getElementsByTagName()」でタグ名を指定して検索するか、「document.getElementsByName()」でname属性を指定して検索するかなのですが、一発で１要素を取得できるのはID指定だけ。
便利だからといって、クラス属性とかで検索しまくってると、実はjQueryのなかではいろいろと大変なことをしなければならないのだ。
今までクラス属性を使ってた人は、積極的にID属性で指定するようにしようね！
クラス指定はjQueryの最も遅いセレクタの一つだから、クラス指定ばっかしてると、jQueryに嫌われちゃうよ！
今回のレスポンシブ化は設定ページだけですが、上記２つのことを踏まえて
Parllet（パレット） 全体の方向性として以下のように決めたいと思います。
- CSS セレクタとして使用するときは極力 class を使う。
- jQuery セレクタとして使用するときは極力 id を使う。
もし不都合が出てくるようならその都度見直します。（問題点等お教え頂けたなら一生恩に着ます。）
#memberMenu は jQuery では使っていないので、
今回は html ファイル内でヘッダー１・２行目共に
<ul class="memberMenu" >
に変更の上、main.css 内の #memberMenu の部分も以下のように修正。（# → . への変更のみ）
.memberMenu, #adminMenu {
list-style: none;
padding: 5px 0px 8px 5px;
margin: 0;
}
.memberMenu li, #adminMenu li {
display: inline;
}
.memberMenu li a, #adminMenu li a {
color: #fff;
text-decoration: none;
padding: 2px 10px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
}
.memberMenu li a{
background: #633308;
}
.memberMenu li.selected a, #adminMenu li.selected a {
background: #82A346;
}
そして改めてソース内の <style> ～ </style> の部分に追記したものを変更
/* スマホのスタイル */ の追記を変更
.memberMenu {
display: none;
}
/* PCのスタイル */ の追記を変更
.memberMenu {
display: block;
}
id セレクタを２回使っていた状態は解消されました。
そして本題のメニューが消える動きの方ももう一回確認。
動かしたときの見た目は全く同じなので画像は省きますが、
タブレットの幅以下に縮めた時だけメニューが消える動きは、できました。
・・・・・・。
本題ではないところで時間を食いすぎました。
今回、いや今年はここまでです。
今年最後のエントリでこんな調子かよ！
って感じですが、この回にもちょっと触れたように、今はサムリさんの
これからブログを始めようと思う人へ！まずは今の未熟な自分をさらけ出せ！話はそれからだ
の影響も継続中なので、私としては
それでもポストする！
ということの方が大事だったりします。
きっと来年もこんな感じで体当たりして失敗した内容も含めて晒していきますんで、
厚かましいですが長い目で見守っていただけると幸いです。
※ 念のために繰り返しますが、上記id重複については公開Parllet（パレット） の方は修正されています ^^;
次回（来年）に続きます！
皆様、良いお年をお迎えくださいませ！
1/1 追記
続きを書きました。
1/11 追記
まとめを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0