2011年03月20日

HTML5

地震の影響で配達が遅れていたHTML5の本が到着しました。
購入したのは「スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応」ですが、買う本を誤ったかも。
いや本が悪いというのではなく(詳しく読んでませんが)、どちらかというとCanvasとかの新機能についてページが割かれていて、ごく基本的な作り方とかCSS3についてはあまり触れられていないのでした。
Java/Androidでヒーヒー言っている僕にとってはWebページ作りに時間をとられたくないので、破綻が大きくない程度のごく単純なスマホ用ページを作りたかっただけなんですよね。

スマホ用のサイト作りって、ベーシックな部分ではHTML5の部分よりCSS3をいかに使いこなすか、というところがポイントみたいな気がします。
要はスマホ用サイトのごく基本的な部分はHTML5で


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>
タイトル
</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
ページの大見出し
</header>
<nav>
<a href="xxx">ナビボタン</a>
</nav>
<section>
記事本文
</section>
<footer>
フッター
</footer>
</body>
</html>


これくらいが分かっていればなんとかなるのではないかな?と。

あとはよく見る角が丸いボタンを作るのに、ナビゲーションのタグのradiusとgradientを適当にいじれば良いのかな?などと、すっごく適当に思います。

nav {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
font-size: 105%;
width: 80%;
  text-shadow: -1px -1px 0 #fff000;
}

で、あとこれも良く見る一行まるごとリンクになっているようなところは、自分で適当に考えた結果、sectionタグそのものにリンクを貼って、スタイルシートでボーダーを引くのでも、同じように見えるからいいやなどと、正しくないように思いますが、いいかげんに設定しました。

<a href="xxx">
<section style="border-top-style:solid;border-bottom-style:none;">
記事
</section>
<section style="border-top-style:solid;border-bottom-style:none;">
記事
</section>
<section>
記事
</section>
</a>

その結果が、やっぱり残念度の高さがわずかに軽減された程度の新しいスマホ用ページ。(笑)
でも、時間があまりないから、とりあえずいいかな?と。

posted by 白虹 at 23:52| Comment(0) | TrackBack(0) | Android開発
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/43934846

この記事へのトラックバック