PR

html, css, jQueryによるWebサイト制作【iSaraの模写コーディング】

http://isara.life
記事内に広告が含まれています。

どのように、html, css, jQueryを用いて、ウェブサイトを制作したらよいのでしょうか?この記事で、Landing PageであるiSaraの模写コーディングについて、紹介します。

スポンサーリンク

HTMLファイル

今回は、iSaraのランディングページを、3つの部分(ヘッダー、メインコンテンツ、フッター)に分け、コーディングすることとしました。

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のデザイン模写】もご覧ください。

タイトルとURLをコピーしました