CSS/SlideMenu をテンプレートにして作成

開始行:
*CSS Slide Menu CSSでメニューをトグル表示する例 ~ 一般にメニューの開閉には [[jQueryのトグル機能>jQuery]] を... -''DEMO''：https://koichi-inoue.github.io/Navi-Drawer-CSS/ -''CODE''：https://github.com/koichi-inoue/Navi-Drawer-CSS ~ **使用する属性とセレクタ このサンプルで使用する属性・セレクタについて概説します。 ~ ***for 属性 for属性はフォームパーツと要素を関連付けるために用いられる... labelタグの書き方は2種類あって、1つはlabelタグで挟む方法... -labelタグで挟む書き方 <label><input type="text" name="name">名前：</label> -for属性を使う書き方 <label for="text_id">名前：</label> <input type="text" name="name" id="text_id"> フォーム部品の id を label タグの for 属性に割り当てます。 以下の例では、label要素に for属性をつけることで、同じ内容... <form action="http://www.google.com/search" method="get"> <label for="key">Google: </label> <input id="key" type="search" name="q"> <input type="submit"> </form> ~ ***要素に隣接する要素　+ '' ＋'' という記述は、「当該要素に隣接する要素にスタイル... ~ ***要素の後にある要素　~ '' 〜 '' という記述は、「当該要素の後にある要素にスタイル... -CSS h3 ~ p { /* h3の後にある p にのみ適用*/ color:red; } -HTML <p>九州産業大学</p> <h3>小見出し</h3> <p>芸術学部</p> <p>デザイン学科</p> こう書くと「芸術学部」と「デザイン学科」が赤く表示されま... '' 〜 '' を使うと例えば、チェックボックスをきっかけとして... ~ ***擬似クラス　:checked CSSでボタンのような機能を実現するためには、 :checked 擬似... -CSS input[type=radio]:checked + label { color: red; } -HTML <form> <input type="radio" name="btn"> <label>選択肢１</label> <input type="radio" name="btn"> <label>選択肢２</label> </form> 補足：[+ label ] という記述は、それに隣接する label 要素... ~ ~ **DEMOのソースコード 以下、[[DEMO>https://koichi-inoue.github.io/SlideMenu/]] ... -HTML <input type="checkbox" id="dummyCheckBox"> <label id="menuButton" for="dummyCheckBox"> <button>MENU</button> </label> <nav id="siteNavi"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">LINKS</a></li> </ul> </nav> <div id="container"> <h1>Sample Page</h1> <p>Slide Menu with CSS Animation</p> </div> 最初の行のチェックボックスはダミーで非表示。その代理を、... -CSS　要点のみ抜き出して記載しています #siteNavi { transform: translateX(-500px); /* 初期位置では画... } ：　 #dummyCheckBox { /* チェックボックスのダミーは非表示 ... display: none; } ：　 #dummyCheckBox:checked ~ #siteNavi { transition-delay: .3s; transform: translateX(0); /* これで定位置に出現 */ } label すなわちMENUボタンをクリックすると、#dummyCheckBox... ~ ~

終了行:
*CSS Slide Menu CSSでメニューをトグル表示する例 ~ 一般にメニューの開閉には [[jQueryのトグル機能>jQuery]] を... -''DEMO''：https://koichi-inoue.github.io/Navi-Drawer-CSS/ -''CODE''：https://github.com/koichi-inoue/Navi-Drawer-CSS ~ **使用する属性とセレクタ このサンプルで使用する属性・セレクタについて概説します。 ~ ***for 属性 for属性はフォームパーツと要素を関連付けるために用いられる... labelタグの書き方は2種類あって、1つはlabelタグで挟む方法... -labelタグで挟む書き方 <label><input type="text" name="name">名前：</label> -for属性を使う書き方 <label for="text_id">名前：</label> <input type="text" name="name" id="text_id"> フォーム部品の id を label タグの for 属性に割り当てます。 以下の例では、label要素に for属性をつけることで、同じ内容... <form action="http://www.google.com/search" method="get"> <label for="key">Google: </label> <input id="key" type="search" name="q"> <input type="submit"> </form> ~ ***要素に隣接する要素　+ '' ＋'' という記述は、「当該要素に隣接する要素にスタイル... ~ ***要素の後にある要素　~ '' 〜 '' という記述は、「当該要素の後にある要素にスタイル... -CSS h3 ~ p { /* h3の後にある p にのみ適用*/ color:red; } -HTML <p>九州産業大学</p> <h3>小見出し</h3> <p>芸術学部</p> <p>デザイン学科</p> こう書くと「芸術学部」と「デザイン学科」が赤く表示されま... '' 〜 '' を使うと例えば、チェックボックスをきっかけとして... ~ ***擬似クラス　:checked CSSでボタンのような機能を実現するためには、 :checked 擬似... -CSS input[type=radio]:checked + label { color: red; } -HTML <form> <input type="radio" name="btn"> <label>選択肢１</label> <input type="radio" name="btn"> <label>選択肢２</label> </form> 補足：[+ label ] という記述は、それに隣接する label 要素... ~ ~ **DEMOのソースコード 以下、[[DEMO>https://koichi-inoue.github.io/SlideMenu/]] ... -HTML <input type="checkbox" id="dummyCheckBox"> <label id="menuButton" for="dummyCheckBox"> <button>MENU</button> </label> <nav id="siteNavi"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">LINKS</a></li> </ul> </nav> <div id="container"> <h1>Sample Page</h1> <p>Slide Menu with CSS Animation</p> </div> 最初の行のチェックボックスはダミーで非表示。その代理を、... -CSS　要点のみ抜き出して記載しています #siteNavi { transform: translateX(-500px); /* 初期位置では画... } ：　 #dummyCheckBox { /* チェックボックスのダミーは非表示 ... display: none; } ：　 #dummyCheckBox:checked ~ #siteNavi { transition-delay: .3s; transform: translateX(0); /* これで定位置に出現 */ } label すなわちMENUボタンをクリックすると、#dummyCheckBox... ~ ~

ページ名: