2010年02月08日

[Web][iPhone]携帯用サイトをとりあえずiPhone用に対応

携帯用に自分で作ったサイトをiPhoneのSafariでみると横幅が広く取られ、非常に小さく見えてしまう。

これはデフォルトで横幅が980pxとして処理されているためで、これを自分の指定したサイズにすればよい。

そのためにはmetaタグで
<META name="viewport" content="width=device-width"/>

のように指定すれば、iPhoneの横幅(縦向きなら320px、横向きなら480px)として処理される。
もちろん width=240px のように数値で直接指定することもできる。

ちなみにこのviewportのmetaタグでは横幅以外に
 initial-scale ページが読み込まれた時の拡大率
 user-scalable ユーザーが拡大縮小をできるか (yes/noで指定、デフォルトはyes)
 minimum-scale 拡大率の下限 (0〜10、デフォルトは0.25)
 maximum-scale 拡大率の上限 (0〜10、デフォルトは1.6)
の指定もできる。
例 : <meta name="viewport" content="width=320, user-scalable=no /">

またフォントサイズが自動的に調整されてしまう(小さくなる)らしく、これはstyleで
<body style=”-webkit-text-size-adjust:none”>

のようにすれば防ぐことができる。(iPhone独自のCSSプロパティ)

また自分で文字の倍率を指定することも可能。
例 : <body style=”-webkit-text-size-adjust:160%”>

とりあえずはこの対策で少しは見やすくなる。

参考サイト
iPhone 3G DevWiki : 画面表示関係
posted by goblin at 12:07| Comment(0) | TrackBack(0) | Web関連 | このブログの読者になる | 更新情報をチェックする

2009年11月11日

[Web開発]HTMLで二重の打ち消し線

HTMLで打ち消し線(取り消し線)をつけたいときは、その部分を<del>と</del>で囲めば打ち消し線つきで表示される。

ところで、この打ち消し線は一重で、日常では文章でよく使う二重の打ち消し線は、なぜかHTMLにはない。

しかし見た目を二重の打ち消し線で処理したようにするテクニックが「アメブロ向上企画書」というところで見つけた。

二重打ち消し線用の画像を用意してCSSで背景画像にするという、なんかアイデアの勝利といった感じのテクニックだ。

参考記事
アメブロ向上企画書 : CSS 二重の取消し線・打ち消し線
posted by goblin at 01:04| Comment(0) | TrackBack(0) | Web関連 | このブログの読者になる | 更新情報をチェックする

2009年07月06日

[Web開発]INPUTタグの初期入力モードの指定

携帯サイトの場合、INPUTタグで入力モードの初期値を指定できる。

ただDoCoMo、au、Softbankで指定が異なるが、わざわざキャリアごとにHTMLの記述を分けなくても、まとめて指定しておけば問題ないらしい。

つまり「半角英字」にする場合は
<INPUT type="text" istyle="3" format="*m" mode="alphabet">
とすればよい。

参考記事
携帯サイトをつくろう : 携帯3キャリアに対応したinputタグへの初期入力モード指定方法
posted by goblin at 01:03| Comment(0) | TrackBack(0) | Web関連 | このブログの読者になる | 更新情報をチェックする

2009年04月16日

[Web開発]Apache、PHP、MySQLの一括インストール

Web開発の定番であるApache、PHPとMySQLのWindows環境への一括インストールできるパッケージにはいくつかあるみたいだが、ちょっと調べたところ、以下のようなものがあった。

 ・WampServer
  http://www.wampserver.com/en/
 ・XAMPP for Windows
  http://www.apachefriends.org/jp/xampp-windows.html
 ・VertrigoServ
  http://vertrigo.sourceforge.net/
 ・AppServ
  http://www.appservnetwork.com/

収録されているツールがApache、PHP、MySQLだけのものや、その他のいろいろなものを含んでいたりとそれぞれに一長一短があるみたいだ。

どこかにこれらの比較記事でもあると嬉しいんだが…。
posted by goblin at 14:17| Comment(0) | TrackBack(0) | Web関連 | このブログの読者になる | 更新情報をチェックする

2008年03月11日

[Web]Googleマップをイメージで表示

Google Static Maps APIを使うと、Javascriptを使用しないでイメージとしてマップを作成できるらしい。
しかも携帯でも表示可能で、携帯用の見やすい表示も指定可能ということ。

さらに「Static Maps Wizard」という簡易ツールを用いれば、緯度経度でなく住所でマップを作成することもできるし、あらかじめAPIキーを取得しておくも必要ないようだ。

関連記事
Google Japan Blog : Google マップが携帯でも表示できるようになりました
posted by goblin at 00:38| Comment(0) | TrackBack(0) | Web関連 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。