読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

f:id:wp-lesson:20170304123314p:plain

事業サイトの構築に取り組んでおられる生徒さん。
 
サイドバーに配置したコンテンツをタブで切り替え
できるようにしたいということで、ピンポイントの
レッスンをさせていただきました。
 
「タブをつけるにはどうすればいいか?」
 
という漠然とした疑問の答えは、2つのステップに
分けることができます。
 
1.タブに見えるものを追加する
2.タブをクリックしたときの動作を追加する

 
まず1では、HTMLとCSSを使います。
 
ウェブページに表示されるものは、画像や動画を除くと
基本的にはHTMLのタグで表現されるからです。
 
そして、タブの配置やデザインを装飾するために
CSSを使います。
 
ここまででタブの外観は作ることができます。
 
2の「動作」は、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