【サイドバーにタブメニューを追加する方法】

事業サイトの構築に取り組んでおられる生徒さん。
　
サイドバーに配置したコンテンツをタブで切り替え
できるようにしたいということで、ピンポイントの
レッスンをさせていただきました。
　
「タブをつけるにはどうすればいいか？」
　
という漠然とした疑問の答えは、２つのステップに
分けることができます。
　
１．タブに見えるものを追加する
２．タブをクリックしたときの動作を追加する
　
まず１では、HTMLとCSSを使います。
　
ウェブページに表示されるものは、画像や動画を除くと
基本的にはHTMLのタグで表現されるからです。
　
そして、タブの配置やデザインを装飾するために
CSSを使います。
　
ここまででタブの外観は作ることができます。
　
２の「動作」は、HTMLやCSSでは表現できないので、
javascriptや、その拡張版であるjQueryを使います。
　
・クリックしたとき何かを動かす
・スクロールに合わせて何かを動かす
　
といった、ユーザーの操作（アクション）に応じて
javascriptでHTMLやCSSを切り替えることによって、
動作を表現できるからです。
　

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy