スモールビジネスのIT日誌

• (2014-11-03 12:03:58)

ケータイサイトのように簡単だろうと考えていましたが、案外複雑でした。

とりあえずテンプレートを購入

フリーのテンプレートも公開されていますが、著作権表示などしばりがあるので製品版を購入して、それを変更することで勉強。

ケータイサイトとは違う

javascriptやcssもフルサポートしているようで、cookieも使える。PCと同じく複雑なサイトを構築できる。ので難しい。

表示幅をコントロールするviewport

デバイスサイズにあわせて表示領域を変更する
meta name="viewport" content="width=device-width, initial-scale=1.0"

1カラムのリキッドレイアウト

がよい

その他

電話番号のリンクを無効化
meta name="format-detection" content="telephone=no"

ホーム画面用アイコン
link rel="apple-touch-icon" href="icon.png"

ケータイサイトのように単純なhtmlだろうと予想していたら、リキッドレイアウトなど意外と難しい。PC並みにjavascriptやcssが使えるので高度なサイトの制作もできそう。本記事はipodで試した試行錯誤。

とりあえずテンプレート購入

javascriptやcssも詳しくないので、出来合いのテンプレートを元に改造することにした。無料でもいいが、著作権表示や制作者へのリンクが必要なものが多いので、安価なテンプレートを購入した。

リキッドレイアウト

表示サイズを決めるviewport

メタタグにこれを設定することが必須。viewportはいろいろな人が解説を書いてくれているので、読んでみるが、わかったようなわからないようなすっきりしない。

とりあえず下記を設定しておくと何とかなる。買ったテンプレートはwidth=640になっていたが、これだと320px幅のコンテンツを書いても640px分を表示して右半分の空白部分が無駄に表示されていた。

＜meta name="viewport" content="width=device-width">

「スマホ html リキッド」で検索

●IE8以下対応
＜!--[if lt IE 9]>
＜script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">＜/script>
＜script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">＜/script>
＜![endif]-->

●1カラムのリキッドレイアウト
width:auto;

●2カラム
box-sizing

●数字がリンクになってしまう
＜meta name="format-detection" content="telephone=no">

●ベンダープレフィックス
先頭に付ける-moz-や-webkit-

-moz-　　…… Firefox
-webkit-　…… Chrome、Safari
-o-　　　　…… Opera
-ms-　　　…… IE

●陰を付けるbox-shadowが便利　

.SampleBox2{
box-shadow:0px 0px 10px;
border:1px solid #000;
width:100px;
height:50px;
}