どのように、html, css, jQueryを用いて、ウェブサイトを制作したらよいのでしょうか？この記事で、Landing PageであるiSaraの模写コーディングについて、紹介します。
ファイルのダウンロード
私の作成したhtml, css, jQueryのファイルを無料配布しますので、ダウンロードしてください。
これらのファイルを開きながら、以下の説明をご覧ください。
HTMLファイル
今回は、iSaraのランディングページを、３つの部分(ヘッダー、メインコンテンツ、フッター)に分け、コーディングすることとしました。
headタグ
- metaタグで、language codeとviewportの設定
- titleタグで、ページタイトルの設定
- linkタグで、css、bootstrap、fontawesomeとjQueryの読込
bodyタグ
- Bootstrapで、Grid Design Layoutやスタイルの実装
- headerタグで、サイトアイコン、問い合わせボタン、メインビジュアルの作成
- divタグで、メインコンテンツとページスクロールの作成、コンタクトフォームの設置
- footerタグで、コピーライトの記述、SNSボタンの設置
CSSファイル
bootstrapで実装できないスタイルは、CSSファイルに書き込んで、実装しました。
color
background
height / width
margin / border /padding
img
JSファイル
jQueryのメソッドを使用して、ページ内スクロールとアコーディオンメニューを実装しました。
ページ内スクロール
scrollTop、fadeIn、fadeOutとhideのメソッドで実装しました。
アコーディオンメニュー
slideToggleメソッドで実装しました。
広告リンク
ウェブデザインやプログラミングを始めませんか？
まとめ
HTML, CSSと、javascriptのファイルを作成し、Landing PageのiSaraを3分割(ヘッダー、メインコンテンツ、フッター)して、模写コーディングしました。bootstrapやjQueryというライブラリを使うことで、簡単にcssやjavascriptを実装することができました。
フォトショップによるウェブデザイン【airbnbのデザイン模写】もご覧ください。
