パララックス（視差）効果やページ内のスムーズスクロールなど、見せ方に動きをつけた縦長1ページで構成されるhtmlサイトが流行っていますが、ページ内の現在位置を取得してナビゲーションをアクティブに変更したり、要素をフェードインしたりする必要があったのでメモ。jQueryを利用して実装しています。
※この記事は、webOpixelさんのエントリ「jQueryで長いページの区切り（セクション）ごとに背景を変化させる」を大変参考にさせていただきました。ソースも必要な箇所を大きく抜粋させていただいた形です。webOpixelさんの記事はどれも分かりやすく、丁寧に説明されているので非常に助かりました。m(_ _)m
class属性に「imgover」を指定したimg要素に対し、ロールオーバーで画像を置換する方法。
拡張子の前に「_o」を付けたロールオーバー用の画像さえ同階層にあれば、jQueryだけで簡単に実装できます。
ex）ロールオーバー前の画像名：hoge.jpg → ロールオーバー後の画像名：hoge_o.jpg
$(function() {
// ロールオーバー
$("img.imgover").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
}).each(function(){
$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
});
});
前回のエントリー「iPhone向けサイトのリセットCSS（暫定版）」に引き続き、html5コーディング用のリセットCSSとよく使う項目をフォーマット化した自分用メモ。
基本的な要素は入っているので僕の場合はほとんどこれで十分なのですが、必要な要素・プロパティのみをリセットする方法なので、足りないものは追加が必要です。
commonコメント以下にはfont-familyなどベースとなるbodyの指定と、よく使うのでclearfixを追加してます。ここら辺は自分がよく使うものを指定してコーディングの際の雛形にするとよいと思います。
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() {
$(セレクター).命令;
});
});
簡単に解説していきます。
