タブメニュー 【タブメニュー】URLに応じたコンテンツ表示
同一ページ内のタブ切り替えで、タブごとに「#tab01、#tab02、#tab03」をURLに付与します。タブごとに独自のURLを持つことで、URLに応じたコンテンツを表示することができます。
2019-08
タブメニュー 
マウスオーバー 【マウスオーバー】画像の透過度を設定【CSSのみ・jQueryのみ】
マウスオーバーでフェードして画像の透過度を50%にします。マウスアウトでフェードして元に戻します。CSSのみの記述とjQueryのみの記述、どちらでも同じ動きが実装できます。
マウスオーバー 【マウスオーバー】画像のランダム表示と画像の表示領域拡大
ブロック要素にランダムで画像を表示、マウスオーバーで画像の表示領域を拡大します。また、ブロック要素には表示画像ごとにリンクを設定します。
タブメニュー 【タブメニュー】コンテンツをカテゴリーごとにソートして表示【ajax：json編】
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してjsonファイル内のデータを読み込みます。
レスポンシブ 【レスポンシブ】jQueryを利用した画像切り替え
CSSのメディアクエリを使わずに、jQueryを利用してPC用の画像とスマホ用の画像を切り替えます。切り替え対象の画像にクラス名を付与することで簡単に設定可能です。
マウスオーバー 【マウスオーバー】ブロック要素をリンクにする
ブロック要素をクリックでリンクの動作になります。htmlの構造上、aタグはテキストリンクでのみ使用し、aタグでブロック要素を囲むことはしていません。マウスオーバー時の動作はCSS、クリック時のリンクの動作はjQueryで実装します。
タブメニュー 【タブメニュー】コンテンツをカテゴリーごとにソートして表示【ajax：xml編】
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してxmlファイル内のデータを読み込みます。
マウスオーバー 【マウスオーバー】画像をスクロール表示するプラグイン【simplelib.js】
simplelib.jsは様々なプラグインを動的に読み込んで実行できます。そのプラグインの中で、マウスオーバーで画像をスクロール表示するtrimmedScrollのサンプルです。
タブメニュー 【タブメニュー】コンテンツをカテゴリーごとにソートして表示【filter編】
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 カテゴリーの判別はjQueryのfilterを利用します。
フェーダー 【フェーダー】フェードインで表示するニュースティッカー
フェードインで表示するニュースティッカーを、プラグインを利用せずシンプルなjQueryの記述で実装しています。サンプルは画像上に透過の背景色を乗せ、その上にニュースティッカーを表示させています。