ReponsiveIM

まあ……大体出来た……かな。iPhoneからでも使い易くなりました。

レスポンシブデザインとは何か

PCとかiPhoneとか、タブレットとか世の中には色んなサイズの端末があります。

これをCSSを工夫することによってなんとかサイズの違う多様な端末に対応したデザインにしようと言うのが、レスポンシブデザインになります。

詳しくはこの辺読んでもらうとして。

ブラウザの幅を変えてみてもらえれば成果が分かると思います。

何をやったのかと言うと

  • 画面幅が小さくなったら display: noneでサイドバーを消す
  • それより小さくなったらメインの幅を%に
  • トップイメージの画像や文字の位置を%で指定。
  • サムネイルの大(size-large)と中(size-medium)を%表示に
  • iPhone用にヘッダーにメタタグを記述。
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

みたいなことを作りながら1コ1コ対処してみたらなんとなくそれっぽくなりました。

基本的に幅さえなんとかすればなんとかなります。高さはautoで十分です。

メディアクエリー

画面の幅でCSSを切り替えるのにはメディアクエリーと言うのを使います。
ソース書くとこんな感じ。

幅600ピクセルを超えると幅がauto(本来のサイズ)に切り替わります。

img.size-large{
	width: 100%;
	height: auto;
}
@media screen and (min-width:600px){
	img.size-large{
		width: auto;
	}
}

padding……

なんかいくらやっても横スクロールバーが出やがりまして。凄く謎だったんですが、paddingのせいでした。

paddingと言うのはdivとかの枠の内側に余白を持たせるCSSなんですが、これが元の幅に”足して”サイズを決定するものなんです。

例えば幅300ピクセルにpaddingを左右20ピクセル入れようと思ったら、幅を260ピクセルに変更しないといけません。……誰なんでしょうねこの仕様を考えた人は……。

という謎仕様によってあちこちに微妙なズレがあったんです。最終的にほとんど使わないことにしちゃいましたけど。いや、強敵だった。レスポンシブデザインの大ボスがpaddingだったとは。

もしやってみて、何故か横スクロールしてしまうと言うときはpaddingとかで何かはみ出てないかチェックしてみるといいかと思います。

このサイトのWordPressテーマ、お手製なんですが(リンク)、ナビゲーション的にちょっと問題があるなと思ってました。

そうだ、目次を作ってみよう。

という訳で、いまんとここんな感じ

>>続きを読む

Delta?

Xcode5でiOS6とiOS7に対応するためにパーツにiOS6/7 Deltaと言う値を設定する必要があります。これを使えばあのアイヴデザインで生じたiOS6とiOS7とのにっくき差が吸収出来てしまうのです。手動ですが。んー、自動でやってくれって気もしないでも無いですが……。

で、これを実現するためにWebページの例を見ながらやってみました。AutoLayout外して…サイズインスペクタを……サイズインスペクタを……あれっ?……無いよ。

ググって辿り着いたのはやはりStackOverFlow。
http://stackoverflow.com/questions/19306762/inspector-size-on-xcode-5-is-showing-nothing

やー、毎回頼りになるねー。えーっと、クリックしろ?クリックと。ポチ。……ほう、畳まれてましたか……気付くの無理。

以上、何でデフォルトで畳まれているのかアップルに聞きたいでした〜。参考まで〜。

オマケ情報

実はこのデルタと言う値はナビゲーションバーの透明をオフにすることによって不要になります。ナビゲーションバーの分だから当然ちゃ当然なんですが。
Storyboardで設定出来ます。