このサイトをMedia Queriesしてみた＜その 2＞ 13/03/30

昨年末、このサイト全体をスマフォ対応するために「このサイトをMedia Queriesしてみた」の第一弾を書いてから、もう4カ月も経ってしまった。ナビの部分はかなり苦戦をするだろうと思ってた。
年明け、旅行記にもかなり時間がかかったがそれも終わり、やっと＜その 2＞を実施した。

このサイトはグローバルナビの厚みがあり、どうしてもスマフォのファーストビューではジャマをする。
やっぱり今流行っぽくナビを隠したい。ボタンで表示、非表示って感じです。
そこで、新しいjQueryを実装。
実はここのサイトはちょっと古いオープンソースでできているので、ページに古いjsをたくさん実装している。
重複バッティングした jQuery は jsエラーを起こして、なかなか快適に動かないことを他の仕事で体験している。
でも、どこでその jsを使っているのかわからないので、勝手に削除はできない。だから、新しい　jQueryがうまく動くことを確認する作業から始めた。

設置の仕方はちょうどやっていた他の仕事の中で発見。新しい jQueryを一番最後、</head>にいちばん近い位置に設置することで回避できるようだ。

●ファーストビューでナビを隠す jQueryイベント。
ナビは最初のロードで隠す。ボタンで表示、非表示を繰り返す。
表示、非表示繰り返しにはToggleをつかう。
今まで toggle ではcssを追加、削除するのに addClass と removeClass を使っていたがまとめた toggleClass を発見。
そしてイベントも slideToggle というスライドアップ、スライドダウンを繰り返すToggle文を見つけた。知らなかった。
jQueryは短くなった。

 *************
 $(document).ready(function(){
 　$('#gmenuBtn').click(function() {
 　　$(this).toggleClass("op");
 　　$('#ja-mainnavwrap').slideToggle('normal', function() {
 　　});
 　});
 });
 **************

jQueryってやっぱりすごいね。
私は本当のシステムエンジニアではないので、言語がとっても苦手。特に if 文の分岐はとっても苦手でここ数年苦戦の連続だった。
でも、jQueryはこのくらいイベントが簡単に実装できる。

●activeな2nd階層は表示させて移動できるように
ナビの1st階層を表示、非表示はすぐ実装完了したが、2nd階層の表示は意外と困難だった。
全体を非表示にするのは簡単だけど、active部分だけを表示させたい。
結局、cssで消してる部分を表示させ、floatをrelative化した感じです。

とりあえずの MediaQueryの実装は完了した。
で、改修の余地を残しながら、＜その2＞は終了です。

●こっそり画像をスマフォに対応
幅の狭い画像は問題ないが、PCで見た場合のページ幅いっぱいの画像はスマフォの外枠を押してしまい、ビューの崩れを発生させていた。
その回避策として画像にかけるcssのclassを実装。

*************
.img100 img{
 　border:none;
 　max-width:100%;
 　height:auto;
 }
*************

●Google Map のための表示崩れを改修
iframeでできているGoogle Mapは幅の指定が必須。そのwidthをpxではなく、％に変更してみた。
ロードは重いが、問題なく表示。

●画像一覧ページの改修
画像一覧は同じソースで下層は横幅が広く画像数も多くしたい。それに同じソースでスマフォは少なく並ぶ。tableで並べていたが、li に変更。
Topは5個、2ndでは7個、スマフォでは3個の表示が可能になった。

参考に今回、簡単に実装した MediaQuery を紹介。　css の記述したビュー幅で見え方を変える。


● PCに対応css部分
@media only screen and (min-width: 769px) {
　　#ja-mainnavwrap{
　　　　width:980px;
　　　　margin: 0;
　　　　padding: 0;
	}
}

● スマフォ横置き、タブレットに対応css部分
@media only screen and (min-width: 481px) and (max-width: 768px) {
　　#ja-mainnavwrap{
　　　　width:100%;
　　　　margin: 0;
　　　　padding: 0;
	}
}
● スマフォに対応css部分
@media only screen and (max-width: 481px) {
　　#ja-mainnavwrap{
　　　　width:100%;
　　　　margin: 0;
　　　　padding: 0;
	}
}

このサイトをMedia Queriesしてみた 12/12/23

chackee.com