スマートフォンサイトをコーディングする時の注意など

対象端末とか

主にiPhoneとAndroid端末向けにコーディングするようです。
iPadはまた別？というわけで、画面サイズも小さめのいわゆる「スマートフォン」が相手です。

つまり

利用環境がある程度絞れている＋新しいもの＝Html5やCss3を惜しみなく使えるということ。

JavaScriptについては今回は割愛。

viewport

お約束の。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

そのほか、

<meta name="format-detection" content="telephone=no">

数字リンクで電話がかかる鬱陶しいのを制御するやつ。

リキッドレイアウト

個人的なすごく極端な理解としては、iPhoneで見ても、横幅1900pxくらいのブラウザで見ても、「綺麗に見える」こと。
背景画像が画面端までrepeatされてたり、画像はcenterに寄ってたり。
不自然なインデントでテキストが開始されてたりしないとか。

コーディングする前に、広い画面で見た場合にどういう風に見えるか？を意識してからHtmlを組むのが良いかなぁーと。

その他気にする

縦方向に関しては、固定のpxで指定するシーンは多々あって、PCサイトと同じく特に意識しない。

margin: 20px auto;
padding-top: 5px;
height: 44px;

ただ横方向に関しては少し慎重になる必要があって、

width: 100%;
padding-left: 10px; /* はみ出る */

こういうのに注意。

形式やサイズ

言わずもがな容量重視。
単純な画像ならgif、たいていはpng、写真はjpgも検討。
ファイルは圧縮したり減色したり、できる限りの策を。

Retinaとか対応

画像は1/2サイズで指定すると、後々幸せになれます。
元画像が320px*200pxなら、以下のように。

<div class="banner">
    <a href="hoge.html">
        <img src="banner.png" alt="hogehoge" width="160" height="100" />
        <!--↑サイズは半分を指定-->
    </a>
</div>
<200b>||<


>|css|
.banner{
    text-align: center;
}

そうすることで、低解像度の端末でも高解像度の端末でも最適な表示になります。
そしてこれだけで綺麗にセンター寄り。

低解像度の端末に対して倍サイズの画像を配信するってのはどうやねんっていうのはあるやろうけど・・。

Cssスプライト

これさえやればOKみたいな勢いで使われてます。
imgタグで呼び込む画像ファイル＝リクエスト数を減らすために、1つの画像ファイルにまとめて、それをずらしながら使いまわそうというやつ。

background: #ffffff url(splite.png) no-repeat scroll 40px 10px;
background-size: **px **px; /* スプライト画像の半分の縦横サイズ */

半分サイズを指定するのは、↑で書いたのと同じ理由から。
後は背景として指定している要素自身のheightやwidthで見える範囲を絞る。

使えそうなコたち

• :beforeと:after
• position: absolute
• その他Css3
  • background: gradient
  • text-shadow
  • box-shadow

ちょっとそれっぽい見出しのサンプル

<div class="title">
    <h2 class="title1">Fantastic Experience Ever!!</h2>
</div><200b>

/* prefixはとても適当 */
.title{
    position: relative;
}

.title1{
    background: background: #feffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#dbdbff)), -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#dbdbff 100%);
    box-shadow: 0 1px 3px #000;
    color: #180e40;
    font-size: 1.3em;
    height: 44px;
    line-height: 44px;
    margin: 10px auto;
    text-align: center;
    text-shadow: 1px 1px 2px #fff;
}

.title1:before{
    background: #180e40;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    top: 4px;
    width: 100%;
}

.title1:after{
    background: #180e40;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: 4px;
    width: 100%;
}<200b>