備忘録~CSS,HTML,JQuery~

備忘録~CSS,HTML,JQuery~

ランディングページ用テーマを使用してWordpress上にランディングページを作成しました。

↓↓↓テーマはこちらを使用させていただきました!!!↓↓↓
LPテンプレートクリエイティブパック Colorful
http://lptemp.com/

固定ページの編集時に、同時にHeadやBodyのプログラム(CSSやScriptなど)の編集も出来るフォームがあるので、
超超初心者のわたしにはとってもありがたかったです!!


以下、今回の作業で覚えたものの備忘録です。

●画面を複数段に分割

上記のような画面の構成にしたかったため、HTMLとCSSを以下のように設定しました。

 

●JQueryとCSSでタブ切り替え機能

上記の分割画面の⑦⑧⑩に画像を用意し、その画像クリックで記事を⑨部分に表示するという構成にしたかった。
方法としては、
  ・CSSのみで実装する方法
  ・CSSとjQueryを使用して実装する方法
があることが分かった。
JQueryを使用したことがなかったので、いい機会なので今回は「CSSとjQueryを使用して実装する方法」で作成してみた。

 

↓↓↓こちらを参考にさせていただきました!!↓↓↓
CSS・jQueryを使って簡単にできる!3つの「タブ切り替え」実装方法
http://migo-media.com/tab-coding/