iPhone向けのサイトでは、ターゲットとなるブラウザはMobile Safariのみなので、本来は要素のデフォルトスタイルをリセットする必要はありませんが、marginやpaddingなどレイアウトに関するスタイルは最初にリセットしておいた方が調整しやすくなります。
以下、暫定版として自分用にメモしておきます。
html5でのコーディングを前提に、基本的にはPC向けサイトの要素のリセットと同様ですが、Mobile Safariならではのプロパティもあります。
javascriptを利用し、アクセスするデバイスに応じてそれぞれのサイトに誘導する方法です。
各デバイス向けに最適化したサイトがある場合、対象ユーザーをそのサイトへと誘導しなければなりません。
このとき、PC向けサイトと同じ方法でアクセスできるように、PC向けサイトのトップページのhead内でユーザーエージェントを判定し、対象デバイスからアクセスしたときに各デバイス用のサイトへ自動的に転送させます。
このjavascriptによる振り分けは容易ですが、javascriptを無効にしているユーザーには対応ができないので注意が必要です。
その際は.htaccessによる振り分けやPHPによる振り分けを検討しましょう。
あけましておめでとうございます。（遅）
昨年は震災などで大変な年になりましたが、今年は皆さまにとってよりよい年となるようこの場を借りてお祈り申し上げます。
今年もどうぞよろしくお願いいたします。
jQueryを使ってHTMLの要素を指定する際に使用できるセレクター一覧表
| 名称 | 書式 | 指定対象 |
|---|---|---|
| CSSでよく利用されるセレクター | ||
| 要素セレクター | $("要素名") | 特定の要素 |
| IDセレクター | $("#ID名") | 特定のid属性を持つ要素 |
| クラスセレクター | $(".クラス名") | 特定のclass属性を持つ要素 |
| 子孫セレクター | $("要素1 要素2") | 特定の要素の内側にある要素 |
| ユニバーサルセレクター | $("*") | すべての要素 |
| グループセレクター | $("セレクター1, セレクター2, …") | 複数のセレクター |
| CSS2のセレクター | ||
| 子セレクター | $("親要素名 > 子要素名") | 特定の要素の直下の子要素 |
| 隣接セレクター | $("要素1 + 要素2") | 特定の要素の次の要素 |
| first-child擬似クラス | $("要素:first-child") | 同一要素内の最初の要素 |
| CSS3のセレクター | ||
| 間接セレクター | $("要素1~要素2") | 特定の要素の後に出現する要素 |
| 否定擬似クラス | $("要素1:not(要素2)") | 特定の要素のうち要素2の条件を除く要素 |
| empty擬似クラス | $("要素:empty") | 子要素やテキストを含まない要素 |
| nth-child擬似クラス | $("要素:nth-child(番号)") | 特定の要素内の指定した番号の要素 |
| last-child擬似クラス | $("要素:last-child") | 同一要素内の最後の要素 |
| only-child擬似クラス | $("要素:only-child") | 特定の要素が1つだけ含まれる要素 |
| CSSの属性セレクター | ||
| [attribute] | $("[属性名]") | 特定の属性を持つ要素 |
| [attribute = 'value'] | $("[属性名 = '値']") | 特定の属性が指定した値を持つ要素 |
| [attribute != 'value'] | $("要素名[属性名 != '値']") | 特定の属性が指定した値を持たない要素 |
| [attribute ^= 'value'] | $("[属性名 ^= '値']") | 特定の属性が指定した値で始まっている要素 |
| [attribute $= 'value'] | $("[属性名 $= '値']") | 特定の属性が指定した値で終わっている要素 |
| [attribute *= 'value'] | $("[属性名 *= '値']") | 特定の属性が指定した値を含んでいる要素 |
| [attributeFilter1][...2] | $("[属性セレクター1][...2]") | 複数の属性セレクターに該当する要素 |
| jQueryの独自フィルター | ||
| firstフィルター | $("要素:first") | 指定した要素の最初の要素 |
| lastフィルター | $("要素:last") | 指定した要素の最後の要素 |
| evenフィルター | $("要素:even") | 指定した要素の偶数番目の要素 |
| oddフィルター | $("要素:odd") | 指定した要素の奇数番目の要素 |
| eqフィルター | $("要素:eq(番号)") | 指定した番号の要素 |
| gtフィルター | $("要素:gt(番号)") | 指定した番号より後の要素 |
| ltフィルター | $("要素:lt(番号)") | 指定した番号より前の要素 |
| headerフィルター | $("要素:header") | h1～h6までのheading要素 |
| containsフィルター | $("要素:contains(‘文字列’)") | 特定の文字列が含まれている要素 |
| hasフィルター | $("要素1:has(要素2)") | 特定の要素が含まれている要素 |
| parentフィルター | $("要素:parent") | 子要素やテキストを含む要素 |
| animatedフィルター | $("要素:animated") | アニメーションしている要素 |
| フォームフィルター | ||
| :inputフィルター | $("要素:input") | input要素/textarea要素/select要素/button要素 |
| :textフィルター | $("要素:text") | 1行テキストフォーム（input type="text"） |
| :passwordフィルター | $("要素:password") | パスワードフォーム（input type="password"） |
| :radioフィルター | $("要素:radio") | ラジオボタン（input type="radio"） |
| :checkboxフィルター | $("要素:checkbox") | チェックボックス（input type="checkbox"） |
| :submitフィルター | $("要素:submit") | 送信ボタン（input type="submit/image"） |
| :imageフィルター | $("要素:image") | イメージボタン（input type="image"） |
| :resetフィルター | $("要素:reset") | リセットボタン（input type="reset"） |
| :buttonフィルター | $("要素:button") | ボタン（button要素） |
| :fileフィルター | $("要素:file") | ファイル選択フォーム（input type="file"） |
| :checkedフィルター | $("要素:checked") | チェックされているチェックボックス/ラジオボタン |
| :selectedフィルター | $("要素:selected") | セレクトボックスで選択されている要素 |
jQueryでスクリプトを書くときにはほとんどの場合、まずhtmlが読み込まれたときに実行する命令であるready関数を記述し、その内側に命令を書いていきます。
命令には、その対象である「セレクター」と、何らかのきっかけとなる「イベント」があり、セレクターがイベントの発生を感知したタイミングで実行されます。
ほぼ全てこの形式になるのでjQueryの決まりごととして覚えましょう。
$(function() { //ready関数
$(セレクター).イベント(function() {
$(セレクター).命令;
});
});
簡単に解説していきます。
