サイトを一から作るというのは、最近しなくなりましたが、
iPhone用のサイトというのは一度は作ってみたいなと思っていました。
というわけで、iPhone発売時に作成されたアップルのドキュメントを読んでいると、
iPhone用サイトの作り方というのが、開発者ネットワークの中にありました。
今のところは何か作りたいというわけではないですが、
知っておいて損はないということで、
手始めに、iPhoneのホーム画面に表示するアイコンを設定するタグから学習します。
このエントリはHTMLやCSSを直接読める人向けですので、
ホームページを作らない人にはいらない知識ですし、
HTMLがわかっていないと、ここだけ読んでもどうしようもないです。
HTMLがわからない方は、初心者用の参考書を読んで勉強してみてください。
[設定方法]
<head>タグの中に以下のタグを追加します。
(解説 タグ)
iPhoneのホーム画面で表示される画像のリンクを指定します。
この場合は、「custom_icon.png」という画像を表しています。
linkタグは要素がありませんので、直接閉じます。
「rel="apple-touch-icon"」はアップルのタッチデバイス用の属性になります。
「href="[url]"」は画像の場所を示します。URL表記で絶対、相対どちらのURLでもOKです。
(解説 用意するアイコン)
用意するアイコンは64x64ピクセルのアイコンを用意することで、正しい比率で表示されます。
64ピクセルではない場合は、64ピクセルになるように拡大縮小されます。
また、iPhoneアイコン独特の光沢感は自動的に生成されますので、気にする必要はありません。
あとは、角が8ピクセルずつ丸くされるので、デザインの重要な部分がなくならないように気をつけてください。
(備考 ホーム画面のアイコン名について)
ホーム画面に表示できる文字幅は70ピクセルです。
全角6文字、半角11文字を目安にするといいと思います。
70ピクセルより幅が超える場合は、「...」で省略されます。
【ソース】
(Apple.com)Safari Web Content Guide for iPhone: Introduction to Safari Web Content Guide for iPhone
http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html#//apple_ref/doc/uid/TP40002079-SW1
iPhone用のサイトというのは一度は作ってみたいなと思っていました。
というわけで、iPhone発売時に作成されたアップルのドキュメントを読んでいると、
iPhone用サイトの作り方というのが、開発者ネットワークの中にありました。
今のところは何か作りたいというわけではないですが、
知っておいて損はないということで、
手始めに、iPhoneのホーム画面に表示するアイコンを設定するタグから学習します。
このエントリはHTMLやCSSを直接読める人向けですので、
ホームページを作らない人にはいらない知識ですし、
HTMLがわかっていないと、ここだけ読んでもどうしようもないです。
HTMLがわからない方は、初心者用の参考書を読んで勉強してみてください。
[設定方法]
<head>タグの中に以下のタグを追加します。
<head>
<link rel="apple-touch-icon" href="/custom_icon.png" />
<title>マイページ</title>
</head>
<link rel="apple-touch-icon" href="/custom_icon.png" />
<title>マイページ</title>
</head>
(解説 タグ)
iPhoneのホーム画面で表示される画像のリンクを指定します。
この場合は、「custom_icon.png」という画像を表しています。
linkタグは要素がありませんので、直接閉じます。
「rel="apple-touch-icon"」はアップルのタッチデバイス用の属性になります。
「href="[url]"」は画像の場所を示します。URL表記で絶対、相対どちらのURLでもOKです。
(解説 用意するアイコン)
用意するアイコンは64x64ピクセルのアイコンを用意することで、正しい比率で表示されます。
64ピクセルではない場合は、64ピクセルになるように拡大縮小されます。
また、iPhoneアイコン独特の光沢感は自動的に生成されますので、気にする必要はありません。
あとは、角が8ピクセルずつ丸くされるので、デザインの重要な部分がなくならないように気をつけてください。
(備考 ホーム画面のアイコン名について)
ホーム画面に表示できる文字幅は70ピクセルです。
全角6文字、半角11文字を目安にするといいと思います。
70ピクセルより幅が超える場合は、「...」で省略されます。
【ソース】
(Apple.com)Safari Web Content Guide for iPhone: Introduction to Safari Web Content Guide for iPhone
http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html#//apple_ref/doc/uid/TP40002079-SW1