ひとことメモ （このサイトはレスポンシブデザインの練習用です。）
NEW-レスポンシブ3
ケイタイで見た時、タイトルロゴも縮小されるわけですが、ヨコに長い画像なのでいかんせん小さすぎるのが気になっていました。
そこで、ヨコ幅が小さくなったらロゴを折り畳んで2行にしようとしました（画像が2種類になるという事）が、ここで問題発生。画像はimgタグで挿入すれば伸縮可能ですが、それを使うとHTMLファイルが2枚になってしまいますから、それは却下。2種類のCSSのbackground: にそれぞれ配置させるしかありません。ところがCSSでの読み込みだと画像は伸縮してくれないのです。新しいCSS3には「background-size：auto、contain、cover」などありますが、今回のものには不適応だし、IE8以下は非対応。
結局、ロゴの大きさを微調整して、2枚のCSSに、それぞれのロゴ画像を配置しておきました。
ブレークポイントは768pxに変更。
NEW-レスポンシブ2
タブを大きくした。ガラケーでもタブが反応するように改良したかったが、今はやっていない。
方法としては、ガラケーではjavascriptが使えないから、HTMLをもう一枚用意してaリンクさせるか、ページ分けせずページ内リンクを使って反応させるかが考えられる。
それからIEがCSS3のメディアクエリに対応していないので、IEがスタイルシートを読み込めるようにする「respond.min.js」を設置した。
....だけど、jsやプラグインはなるべく積みたくないなぁ...重くなるし、後々コンクリフトの原因になったりしますものね。
NEW-レスポンシブ1
■ このホームページは、簡単なレスポンシブデザインになっている。
タイトル周りより下は2カラムのリキッドデザインに構築。
【画面大きめグループ（PC、ipad、タブレット）】と【画面小さめグループ（フューチャーフォン、スマートフォン）】とにざっくり分けてスタイルシートをそれぞれ作成し、解像度別に読み込ませるようにしてみた。
ブレークポイントは960pxに設定。最近のスマフォは解像度が高いけど、画面が大きいわけじゃないからユニバーサル的視点から960pxを振り分けポイントにしてみた。拡大機能がついているとはいえ、ファーストビューで要素がしっかり見える方がつかみが強いと思うから。
meta記述もわすれずに 。
本当はiphone4やiPadは上記グループと別グループにしたい。
.htaccessやjavascript、phpを使えばもっと詳細にユーザーエージェント別に振り分けられるかもしれない。
作ってみて、ケイタイサイトはPCサイトよりも内容を簡素化し専用サイトとして作られている方がいいのではないかと感じた。
なぜならば、たとえ振り分けたとしてもケイタイ電話もPC用のデータを一旦全て読み込んでしまってから、スタイルを変え表示しているだけらしいからだ。
動作が重くなりますものね。
以上 ‘ひとこと’ で済まなくなったメモでした。
あ、タブ（オレンジと黄緑の）はもっと大きい方がいいし、指でタップできるようにリンクは文字のみじゃなくコーナー枠自体に付けた方が良かったですね。それとこのサイトの文字コードはUTF-8ですが携帯電話は文字コードShift_JISじゃないと文字化けする機種がありますし、javaScriptも使えません。
2012.9.18■ 間に合わせで作ったので気がつかなかったけど、absoluteしたページの下にアキを作ってフッターのボックスを作るには、ページに高さを指定しないとダメなので、それをやっちゃうと1ぺーじずつメンテが必要になる。今の状態でフッターを入れるなら#page_web、#page_etcのdivの中に入れるしかないようだ。
■ サイトのページ背景の白は透過png。この囲みの地色透明効果はCSS3（rgba）。 ちなみにopacityを使うとテキストやボーダー、画像も全てが半透明になる。
■ インライン要素やiframe、swfもポップアップできるfancybox_ver.1、動作がスムーズ。
javascriptを使わないポップアップ方法も覚えたい。
■ IE8以下ではフォンサイズをemや％で指定せずpxで指定するとブラウザ→メニューバー→文字サイズの変更が効かなくなる。ユーザビリティー的にはどうか。IE9からは画面全体が拡大縮小してくれる機能があるのでpxでも可。
こんな方法もある→http://blog.daichifive.com/archives/513
■ これまでCSS3をいつくか試してみたけれど、IE対策がとても大変。IE8以下がうまくいったら、今度はIE9がうまくいかないなど...あちらを立てればこちらが立たずで、スタイルの書き込みがどんどん増えて行くのでした。
■ jQuery ui によるカレンダー（左上方）。カレンダー側のスタイルシート→フォントサイズをem→px指定に変えたことにより、IE7とIE8において、他のブラウザで見るよりも大きく表示されてしまう現象は回避。いろんなブラウザでだいたい同じ大きさに見えるようになった。（2012.9.9）
■ imgに「vertical-align: 〜」をほどこすと、本来ならまわりこむはずの本文が一行しか横にこない。IEの仕様（バグ）。IE6が現役だった頃のデータに多い。
■ サイトトップのbxSliderを作り直した。3カ所にheightとoverflow:hiddenを入れた事により、リロード時に写真が縦にズラズラ並ぶのが見えてしまうのを解消。ついでにマウスオーバー時に画像がやわらかくフェードする機能もつけた。
前回は1枚ずつスライドさせていたためpajerは10まであったが、今回は2枚ずつにしたので、pajerは半分の5。（2012.9.6）
■ Adobe spryを使ったタブ付きパネル、Adobe spryを使った縮小可能パネル、共にIEでも問題無し。
■ jQuery版LightBoxを追加。
【複数設置で気を付ける事】
（１） 本体jquery-1.7.2.min.jsは最初に記述。動かない場合、設置するAとBのjqueryがあったら、前後させてみる。本体バージョンをいろいろ試す。
（２） jsデータや、画像データの置き場所=パスに気をつける。
（３） データの名前はローカルでOKでもサーバが拒否することがある。upしたつもりが、されてないことも。
（４） IE,Operaで暗転の背景が上部で切れる現象。lightboxのCSSのoverlay { position:absolute； → fixedに変えると解消した。
■ 「CSSハック」はちょっとしたテストに使うくらいにして、基本的には「条件付きコメント」を使うようにする。なぜならば、将来有効ではなくなるかもしれないから。
■ メモIE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」。表示が若干遅くなったり、干渉が起こる場合もある。
■ iflame内にも全部、広告が入っちゃう。そろそろ有料サーバへ移行を考えるか。
■ jQuery、CSS3、Adobespryを使ったアコーディオン。3種類動作検証。データが増えてきたことだし、このサイトも左のメニューバーをアコーディオンにしようかな...。（2012.8.31）
■ レスポンシブWEBデザインはHTML5を使わなくても良い。xhtmlでも大丈夫。
参考サイト：http://www.kanebo-cosmetics.co.jp/
■ 学校で習ったデータもここへまとめ置いた。同時に基本をふりかえる。
■ 画像や「table」はデータ読み込みが重くなる傾向。機能を考えながら、選択する。
■ 3000ミリ秒は、３秒。5000ミリ秒は、５秒。
■ 日付や現在時刻を取得・表示。リアルタイム取得にチェンジ。（2012.8.22）
■ codasliderじゃなくてSudoSliderを選んでみた。多様な動作が作れそうだけど、あえて手動で作った。continuous:true、numeric:true,の使い方も。（2012.8.21）
■ 多様化するデバイスに対応させるには、もっとシンプルに手動スライドでもいいのかもしれない。
次回はcodasliderというのを試してみようと思う。
■ レスポンシブ対応、軽量なスライダーflexslider.js 追加。(2012.8.15)
■ ボタンクリックで、背景画像をチェンジするjquery / backstretch.jsを項目に追加。(2012.8.12)
■ JavaScriptで日付や現在時刻を取得・表示。時間が経ってからのオンタイム表示にはリロードが必要。
囲みの角丸はCSS3で書いてみた。（IEやOperaでも角丸表示するには、もう一工夫必要。(2012.8.11)
■ トップに置いたbxSlider.jsで作ったスライドショー、IE8以下環境では左側の「＜」が出ないなぁ。なんでだろ(2012.8.7)
■ IE8以下において、インラインフレームの背景を透過させるにはiframe要素に allowtransparency="true" を指定する。例 <iframe src="example.html" allowtransparency="true"> ～ </iframe>
■ 行頭に「、」や「。」などが来ないようにするにはCSSにおいて line-break: strict; text-align: justify; あるいは letter-spasing:−1px; などを使ってなんとかする。
■ トップに設置したbxSlider.jsによるスライドショーの両脇 '<' '>' はテキストになっている。
head内スクリプトで
prevText: '<',
nextText: '>' とあるのはデフォルト。
画像にしたくて
prevImage:'prev.png',
nextImage:'next.png'
と書き変え、画像はcssでbackground-imageとして読み込んでみたがsafari等で「？」マークがついてしまう。firefoxでは問題なかった。(2012.8.4)
■ jQueryは干渉しやすいようだ。jQueryはprototype.jsと一緒に使うには、$()ではなくjQuery()と表記してみる。prototypeの方を先に記述する（読み込ませる）。それでもだめなら「prototype版」はやめて、「jQuery版」にしてみる。たくさん使うのは止める。
■ jCarouselLite+lightboxはローカルでしか動作しなくなったので項目から削除。
■ CSS3はHTML5とセットで使わなければならないものではない。
■ IE6やIE7でもちゃんと動くらしいjQuery
bxSlider、jQuery Blinds、jCarousel
jquery.slidescroll.js（jQuery非依存もある）、
jQuery UI Tabs（タブが実装出来る）、wSlide、
Pagination Plugin
http://tutorials.ajaxmasters.com/pagination-demo/