Home > スポンサー広告 > Accordion実装手順


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/226-633d8b62
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from 2010-07-23 (金) 19:09

-

管理人の承認後に表示されます (more…)

Home > スポンサー広告 > Accordion実装手順

Home > FC2blog Tips > Accordion実装手順


Accordion実装手順

今回は、タイトルヘッダーなどの箇所をクリックすると、アコーディオン形式でコンテンツエリアが開閉して記事が見れたり隠せたりできるJavaScript/CSSの紹介・実装方法を紹介したいと思います。

サンプルは以下の通りです。
すべて閉じる | すべて開く
JavaScript
JavaScript(ジャバスクリプト、ジャヴァスクリプト、略称:JS)はスクリプト言語である。主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、ウェブページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。(引用元:Wikipedeia)
HTML
HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ、略称:HTML)は、ウェブ上のドキュメントを記述するためのマークアップ言語である。 ウェブの基幹的役割を持つ技術の一つで、HTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。(引用元:Wikipedeia)
CSS
Cascading Style Sheets(CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。(引用元:Wikipedeia)

実装方法は以下の通りです。
1.以下のJavaScriptをダウンロードし、サーバにアップロード
もちろん、各自のサーバにアップロードしてください。
accordion.js
jquery-1.2.2.pack.js
2.<head> ~ </head> に以下を記述
各自のサーバにアップロードしたURLを記述し、スクリプトファイルを呼び出す。
Select All
3.<head> ~ </head> または記事ごとに以下を記述
これはスクリプトの設定なので、気にせず中身を統一させたいのであれば、2項と同様でヘッダ間に記述するだけで大丈夫です。毎回記述ごとに設定を変えたい場合、5項とセットで毎回記述ください。
Select All
4.CSS編集で以下を記述
Select All
5.記事に以下を記述
Select All
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:1

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/226-633d8b62
Listed below are links to weblogs that reference
Accordion実装手順 from TRASH
Trackback from 2010-07-23 (金) 19:09

-

管理人の承認後に表示されます (more…)

Home > FC2blog Tips > Accordion実装手順

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。