12月1日の学習
jQuery アコーディオンパネル
※http://docs.jquery.com/Downloading_jQuery のCurrent ReleaseからMinifiedをダウンロード。下記のindex.htmlと同フォルダに更に「js」フォルダを作成し保存。
(通常、jQueryの設定は外部のライブラリーやリンクを使って問題なし)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery:アコーディオンパネル</title> <style type="text/css"> *{ margin: 0; padding: 0; } dl{ width: 300px; margin: 30px auto; } dt{ font-size: 18px; font-weight: bold; background: #F33; color: #FFF; padding: 10px; border-bottom: 1px solid #FFF; } dd{ border: 1px solid #F33; border-top: none; height: 100px; padding: 10px; } </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("dd:not(first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $(this).siblings("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </script> </head> <body> <div id="container"> <dl> <dt>MENU A</dt> <dd> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </dd> <dt>MENU I</dt> <dd> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </dd> <dt>MENU U</dt> <dd> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </dd> </dl> </div> </body> </html>
XAMPPにwordpressをインストール
- 必ずXAMPPを起動してから行う。
- c\xampp\htdocsの中にダウンロードしたwordpressを入れる。
- phpMyadminで新しいwordpressデータベースを作成してからインストールする。