fontまわりの設定とかー

css webkit iphone

を書いていくところ。

hoge{
font-size: 20px;
font-weight: bold;

/* ↓なんかこうするとタイトルバーっぽいところでそれっぽく */
text-shadow: 0px -1px 0px #fff; /* ここんとこのカラーは背景色を弱くしたような色が合うかも。 */

/* わかんないけどちょっと詰め目にしたほうが綺麗な気もする */
letter-spacing: 0.01em;

/* 自動で文字サイズをあわせてくれる機能のオフ？ */
-webkit-text-size-adjust: none;

}

リストっぽいデザイン

css webkit iphone

を書いていくところ

        div#hoge ul.item li {
            padding: 7px 10px 5px;
            border-top: 1px solid #fff;     /*ここんとこがそれっぽいポイント＞＜*/
            border-bottom:1px solid #aea084;/*上に#fff、下に濃い目の色を指定すると、並べたときそれっぽくみえるよ*/
            background-color: #f2efe9;
            font-size: 20px;                /*フォントサイズは20pxぐらいが指で押しやすいみたい。*/
            font-weight: bold;
            letter-spacing: 0.01em;
        }
        div#hoge ul.item li a{
            color: #333;
            text-decoration: none;
        }

display:blockとか矢印つけたりとかはまだー

基本的な設定など

css iphone

CSSをiPhone向けに切り替える

  • CSS 3のメディアクエリというのを利用して、画面の横幅が480px(iPhoneを横にしたときの最大サイズ)以下になった場合にiPhone用のCSSに切り替えるような設定ができるよ。
<!-- iPhone 用だよ -->
<link media="only screen and (max-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
<!-- PC 用だよ -->
<link media="screen and (min-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!-- メディアクエリをIEが無視するので、IE用に別途PC用CSSを指定するよ -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="pc.css" />
<![endif]-->

viewportの設定でiPhoneからの操作をしやすくする

  • metaのviewportっていう属性を設定することで、iPhone(Safari)の表示領域の挙動を操作できるよ。
    • 縮尺の設定や、ユーザーに拡大縮小の操作（iPhoneだとピンチイン/アウトとかだね）をさせるかなどの設定があるみたい。
    • iPhoneに最適化したページを作る場合、ピンチイン/アウトをオフにしたほうが操作性が上がる場合があるかも。
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
HolyGrail

viewportに

maximum-scale=0.6667

を設定して、画面を縦画面（portraitっていうらしいよ）と横画面（landscapet）で文字サイズが変わらないようにするっていうハックらしいよー

その他

viewport自体の仕組みについてはこの説明がわかりやすかったかも。

Safari on iPhone/iPod touch が通常のウェブブラウザと違うのは、ウインドウを持たないことです。そこで、この viewport という概念が出てきます。

viewport というのは仮想的なウインドウのサイズだと思えばいいでしょう。デフォルトでは、980 ピクセル幅となっています。viewport の値は最小 200 ピクセルから、最大 10,000 ピクセルを取ることができます。

何も設定されていない素のウェッブサイトを Safari on iPhone/iPod touch で見た場合、980 ピクセル幅のウインドウでブラウズした状態になるわけです。

http://travel-lab.info/tech/pblog/article.php?id=157

どうでもいいけどダイアリーはてブテーマ、引用のデザインしてなかったみたいだね…