読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 求職者支援訓練Webデザイン フェリカテクニカルアカデミーWebサイト制作科作品紹介



サイトを最適化する

電話番号にリンクを設定する

  • スマートフォン端末では、電話番号にリンクを設定することでブラウザから直接電話をかけることができます


《電話番号にリンクを設定》

<a href-"tel: 03-0000-xxxx">03-0000-xxxx</a>
iOSの場合
  • iOS専用の記述はありますが、Androidなどの他の端末では機能しないため、記述しません

ホームアイコンを設定する

  • iPhoneAndroidでは、ホーム画面にウェブサイトを登録できます
  • 初期設定ではサイトのキャプチャがアイコンとして使用されます
  • 任意の画像をホームアイコンとして使用するには、head要素内で link要素の href属性に対象のアイコン画像を指定します
  • サイトにBasic認証が設定されているとアイコンは表示されません


《ホームアイコンの設定》

<link rel="apple-touch-icon-precomposed" href="画像ファイルのパス">
  • rel属性に「rel="apple-touch-icon」を指定すると、自動的にアイコンに光沢が追加されます
  • ただしAndroid 2.1では、アイコンが読み込まれなくなります
  • そのため Android 2.1を対象にする場合には、「apple-touch-icon-precomposed」と記述する必要があります
  • すべての条件で光沢のあるアイコンを使用したい場合には、あらかじめ光沢のある画像を用意しておく必要があります
アイコンのサイズ
  • iPhone3G: 57x57px
  • iPhone4: 114x114px
  • iPad: 72x72px(Retinaモデルの場合は 114x114px)


《サイズごとにアイコンを設定》

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png" sizes="72x72">
<link rel="apple-touch-icon" href="touch-icon-iphone4.png" sizes="144x144">
サイトをホーム画面に登録する方法

iOSの場合

  1. ブラウザで目的のサイトを表示した状態で、ツールバー(下)中央にある「共有ボタン」をタップし、「ホーム画面に追加」を選択します
  2. 「ホームに追加」ダイアログで表示名を設定して「追加」ボタンをタップすると、ホーム画面にアイコンが登録されます


Android(OS2.3)の場合

  1. ブラウザで目的のサイトを表示した状態で、メニューボタンの「ブックマーク」を選択して、サイトをブックマークに登録します
  2. 登録したブックマークを長押しして、「ショートカットを作成」を選択します

スタートアップイメージの指定

  • iOSのみ
  • ホームから起動する際に、ネイティブアプリケーションのようなスタートアップイメージが表示されます
  • 画像は、640 x 920pxで作成します(320 x 460px でも読み込み可能です)


iOSでホームに登録したページに起動画面を設定する》

<link rel="apple-touch-startup-image" href="画像ファイルのパス">

スタンドアローンモードで表示する

  • iOSのみ
  • スタンドアローンモード(全画面表示)を設定すると、サイトをホーム画面から起動した際にSafariのナビゲーションが非表示になり、フルスクリーンで表示されます
  • Webサイトが待機状態の時には待機アプリと同じようにリストに表示されます


スタンドアローンモードで表示する(iOSのみ)》

<meta name="apple-mobile-web-capable" content="yes">


content属性の値 説明
content="yes" ホーム画面からはスタンドアローンモードで起動する
content="no" ホーム画面からはスタンドアローンモードで起動しない

ランドスケープ表示時のテキストサイズ調整

  • iOSでは、サイトをポートレート(縦向き)で表示した場合と、ランドスケープ(横向き)で表示した場合とで、表示される文字サイズが異なります
  • この自動調整機能を無効化したい場合には、CSSで設定します


ランドスケープ表示時のテキストサイズ調整の無効化》

body {
  -webkit-text-size-adjust: none;
}


《-webkit-text-size-adjustの指定値》

指定値 説明

パーセント

パーセントで指定する
auto ブラウザ上で自動的に調整される
none 自動調整を行わない

ハイライトカラーの変更

  • リンクをタップした際のハイライトカラーを変更します
  • rgba(0, 0, 0, 0) を指定することで、ハイライトを非表示にすることもできます


《ハイライトカラーの変更》

body {
  -webkit-tap-heighlight-color: rgba(255, 255, 20, 0.5) ;
}

タップ時の吹き出しを非表示にする

  • iOSのみ
  • リンクや画像などを長押しした際に表示される吹き出しを非表示にします
  • この指定は、画像の保存先やリンク先を知られたくない場合に有効です


《タップ時の吹き出しを非表示にする》

body {
  -webkit-touch-callout: none;
}


《-webkit-touch-calloutの指定値》

指定値 説明

default

吹き出しを表示する
none 吹き出しを表示しない
inherit 値を継承する(変更しない)