トリアエズぶろぐ
フリーランスでやってる77世代のWEBプログラマが福岡からのんびりとお送りいたします。
スポンサーサイト


一定期間更新がないため広告を表示しています

<< ベクター人気投票2010で「縮小専用」がグラフィック部門賞を獲得ー。 | main | BOSE Wave music system SoundLink にiPhoneをbluetooth接続する方法 >>
つなビィのブログページをスマフォ対応にしてみた、ちょっとだけ技術的なまとめ。


つなビィスマフォ対応やっと重い腰を上げて…というか、急に思い立ちまして、つなビィのブログページをスマフォ対応にしたのであります。

これまでトップページはjQueryMobileを使って、スマフォ対応にしてました。
jQM自体は素晴らしいプラグインなのですが、微妙に動きがもっさりしてしまったり、デザインの自由度となるとやはり扱いづらい…。

ブログページでは画面遷移時に画面右からスパッと出てこなくてもいいし、軽いのが一番なのでフルスクラッチでスマフォ対応してみることに。

ということで今回のお勉強です。

・CSS3を使ってみましょう
 (デザインに関して画像は極力使わない。ヘッダのロゴと、ユーザが設定した背景画像のみ)
・スマフォサイトの作り方って?
・CSSだけでプルダウンメニューを付けてみよう
・まとめ


といっても、大抵の事はぐぐったら出てきますので適当にまとめますw


 

CSS3を使ってみましょう

CSS3になってから、角丸やボックス/フォントのドロップシャドウが簡単にできるようになりました。
画像を使わなくていいので表示のレスポンスも良くなり、これを使わない手はありません。

今回はフォームのSubmitボタンと、submitクラスが当てられているリンクにCSSを付けてみました。
CSS3ボタン←こんなかんじ。

CSS3からは指定できる属性も非常に柔軟になり、「フォームのSubmitだけ」という指定もできます。

a.submit, input[type="submit"], input[type="button"] {
 // 枠線
 border:1px solid #CCCCCC;
 // 一応背景色を。
 background-color:#cccccc;
 // 角を丸くしましょう
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 // 背景を軽くグラデーションにするとボタンっぽいですね。
 background: -moz-linear-gradient(center top, #ffffff 0%,#cccccc 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #cccccc));
 // フォントをちょっと大きめで。
 font-size: 116%;
 color: #000000;
 // 文字にドロップシャドウを付けてさらにボタンっぽく。
 text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4),
      1px  1px 1px rgba(255, 255, 255, 0.5);
 padding: 5px;
 white-space: nowrap;
}

// ここからは、マウスを乗せたときのデザインですよ
a.submit:hover, input[type="submit"]:hover, input[type="button"]:hover {
 // 背景色
 background-color: #ffffff;
 background: -moz-linear-gradient(center top, #ffffff 0%,#eeeeee 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #eeeeee));
 // ボックス自体にドロップシャドウを付けて光ってる感じにしましょう
 -webkit-box-shadow: 0px 0px 3px 0px #eeeeee;
 -moz-box-shadow: 0px 0px 3px 0px #eeeeee;
 box-shadow: 0px 0px 3px 0px #eeeeee;
 color: #000000;
 text-decoration: none;
}

超絶便利。コピペして好きな色合いでずんどこステキボタンを量産しましょう。

ブログ本文のボックスもCSSで角丸/半透明を適用してしまいましょう。

.blog {
 margin: 5px;
 padding: 5px;
 border: 1px solid #CCCCCC;
 background-color:#FFFFFF;
 // 角丸!
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 // 80%の半透明にしてるだけです。グラデかけようと思った名残でgradient使ってます。
 background: -moz-linear-gradient(center top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.8)),color-stop(1, rgba(255,255,255,0.8)));
}
これで半透明で角丸のボックスができました。
ユーザが独自に設定する背景画像もチラリと見えてオシャレ(になるはず)!
このへんはシンプルにしたほうがcoolだと思うのでドロップシャドウ等は使いません。

これを組み合わせるだけでもかなりデザインできるので、今までのように画像ボタンを作らなくてもよくなりました。自分のようなセンスのないプログラマにとっては助かりまくりんぐです。
サーバにも負担をかけないので一石二鳥ですね^^


スマフォサイトの作り方って?

これもさんざん有名サイトで説明されてるのでなにを使ったかだけ書きます(手抜き

言わずもがな、Viewport。
ピンチインアウトでの拡大縮小を無効にして、表示倍率も固定。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, " />


iPhoneを横向きにしたときにフォントサイズが自動で大きくなるのですが、
それを無効にするためにCSSに以下を書きます。

html {
 -webkit-text-size-adjust:none;
}
これさえ書いておけばとりあえずOK。簡単ですねぇ。


CSSだけでプルダウンメニューを付けてみよう

CSS3になり、ボックスにも:hover属性が使えるようになりました。
これを使ってCSSだけでプルダウンメニューが実現できます。ステキ!

その前に、スマフォサイトっぽいメニューの作り方。
Appleのサイトでもよく見る、リンクがつながっていて左端と右端だけ角丸になっているメニュー。

CSS3でプルダウンメニュー

これもCSS3の属性で指定できます。
今回はul/liタグで箱を作って、中にリンクを置いています。

HTMLはこんな感じで。
<ul class="naviTop">
  <li><a href="javascript:;">NewEntries</a>
   <div class="submenu">
        サブメニューの中身
   </div>
  </li>
  <li>
      以下同じように…
  </li>
</ul>

で、CSSをどう書くかというと…

// 箱の設定
ul.naviTop {
 display:block;
 clear: both;
 float: none;
 white-space: nowrap;
 width: auto;
 margin: 5px;
}
ul.naviTop li {
 display: block;
 float:left;
 margin: 0px;
 // メニューが4つなので4分割しました
 width: 25%;
}


ul.naviTop > li > a {
 // 今回はリンクタグ自体をボタンにしてます。
 width: 100%;
 display: block;
 text-align:center;
 padding-top: 5px;
 padding-bottom: 5px;
 // 背景は白の半透明
 background-color:#FFFFFF;
 background: -moz-linear-gradient(center top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.8)),color-stop(1, rgba(255,255,255,0.8)));
 // 枠線の色。左/上/下に付けます。
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #CCCCCC;
 border-bottom-color: #CCCCCC;
 border-left-color: #CCCCCC;
}

// :first-child属性で最初のリンクだけにCSSを適用します
ul.naviTop li:first-child > a {
 // 1つ目のリンクの左側を角丸に
 -moz-border-radius-topleft: 5px;
 -webkit-border-top-left-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}

// :last-child属性で最後のリンクだけにCSSを適用します。
ul.naviTop li:last-child > a {
 // 最後のリンクの右側を角丸に
 -moz-border-radius-topright: 5px;
 -webkit-border-top-right-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 // 右に線を追加
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #CCCCCC;
}
これだけで見栄えの良いメニューができました。
それでは本題のプルダウンを実装してみましょうかね。

メニューにマウスオーバーしたときに表示されるボックスは、リンクの直後に.submenuクラスを当てて設置しています。

んで、CSSです。

ul.naviTop li .submenu {
 // ボックスの下だけ角丸にしてみました。
 -moz-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;

 // 初期状態で非表示にしておきます
 display: none;
 white-space: normal;
 overflow: hidden;
 position: absolute;

 // 適当にデザインしてくださいまし。
 background-color: #FFFFFF;
 padding: 10px;
 text-align:left;
 font-size: 15px;
 max-width: 278px;
 // 枠線。なくてもいいけど。
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #CCCCCC;
 border-bottom-color: #CCCCCC;
 border-left-color: #CCCCCC;
}

// マウスオーバーしたとき。これだけ!
ul.naviTop li:hover > .submenu {
 display: block;
}

うひゃー、これだけでプルダウンメニューができちゃいました。
JavaScript使わなくていいし、iPhoneやAndroidでも動きます。CSS3すげぇ。


まとめ

本職のデザイナーさんに言わせれば、「適当にやってんじゃねーよ!!だせーよ!!」とdisられそうですが(´・_・`)、CSS3のお陰で画像を極力使わず、JavaScriptも使わず、最低限+αのスマフォ対応ができました。
#実際のつなビィブログページでは、ちょっとしたギミックのためにjQuery使ってます。

やってみると意外と簡単なのでCSS3、是非いじってみるといいよ!
…と腰が重い俺が言っても説得力無いけどね!

enjoy!
スポンサーサイト


COMMENT









Trackback URL
http://akihiro.jugem.jp/trackback/286
TRACKBACK