スマホサイト制作方法、見るべきサイトまとめ

読了: 約 4 分

こんにちわ最近スマホサイト制作やスタンダードになるものを創る機会が増えてきたので、
まとめを書いておこうかなと思います。

概要

1 目次
2 ①HTML5何が出来るのか、どう使うのか
3 CSS3の記述
4 ④フレームワーク
5 jQueryMobile

①HTML5何が出来るのか、どう使うのか

何はともあれ具体的なモノを見る方が早いので、
下記サイトをご覧ください。

ソフトバンク2013年新卒採用
Softbank

株式会社Contents
contents.ne.jp

**********************************************
非常に面白いですよね。スマホサイト制作というより、
HTML5の利用法一例です。

下記のサイトに詳しくいますが、HTML5になって増えたタグ

増えたタグ
文書構造
article, aside, footer, header, hgroup, nav, section
フォーム、Webアプリ
figure, source, video, audio, canvas, embed
インタラクティブ
keygen, output, input要素に新しいtypeがたくさん
テキスト系
progress(プログレスバー), meter, command(ツールバー,右クリックメニュー等), details

以前参加したGoogle Chrome+HTML5カンファレンスで書籍など多く出版している
羽田野氏が何度も行っていた【セマンティック】という言葉。

semantic=【意味の】
つまりこれまで
<div id=””>~やclassで書いていたものが、ブロック要素に下記のようなものが追加され、
それ自体に意味があるものとなりました。それによって文書構造を理解してマークアップしなければならなくなりました。

HTML5ではセマンティックな意味合いを持つブロック要素(セクション)が追加。
section ・・・ HTMLの論理的な分割単位。
今まではdivを使ってた。sectionも使える。けどCSSはdivで。
article・・・RSSで配信しちゃっていいもの
aside・・・セクションに対する補足
nav・・・ナビゲーション
bodyとかtdとかも独自のセクションを生成。全ての要素がセクションに所属する。
→セクションを使うとアウトラインが組めるようになる。文書をよりセマンティックに。
セクションの情報を自動的にとってきてーみたいなデモ。
→→より適切なリスティング広告とかに応用できそう。

その他にも
おなじみCanvas、WebDatabase、WebStorage、WebWorkers、WebSockets
等などもうHTML5はDBと連動していたり、プログラミングに若干なってきていて、
エンジニアのやる領域まで入ってきて垣根がなくなってきているなと感じます。
コーダーという職はUIデザイナー・フロントエンドエンジニアに変わっていくのではないでしょうか。

ちなみにGoogleではフロントエンドエンジニアがYoutubeスマホ版のUIデザインも行っておりました。

【参考】
HTML5.JP
HTML5タグリファレンス
 shinodogg.comサンフランシスコに出張中なエンジニアのブログ
 HTML5セクション要素のまとめ

Read more: http://ascii.jp/elem/000/000/639/639722/#ixzz1cjy5JMxr

CSS3の記述

HTML5とCSS3でデザインの効率化が可能になったのと、複雑な処理ができるようになりました。
CSS3に関しては色々な事が出来るようになり、皆さんご存じの角丸から、
iPhoneなどでタップした際のカラーを全て変化させるなどの方法があります。※下記ソース参照。

-webkit-tap-highlight-color:rgba(46,139,110,0.6);

ロケスタのnanapiでもcategory毎で分けるために使用されていますね。

④フレームワーク

スマートフォンに対応したフレームワークが幾つかありますので、
種類と機能を簡単にご紹介します。

jQueryMobile

ご存知の方も多いかと思いますが、jQueryMobileは非常に便利で効率的にサイト
を作るときに有効です。

jQueryMobileをダウンロードする

特に元モバイルサイトから移植する時など非常に有効で
ほとんどソースを弄らずにスマホに最適化できます。

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css” />
<link rel=”stylesheet” href=”/jqm/jqm-docs-20110720.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js”></script>

これをheaderの中に入れ、他は殆ど弄りません。

上のものを入れた上で、
<a href=”add-user.php” data-theme=”b”> Save </a>などと書くと