「コーディングの勉強を始めたけど、実務で通用するか分からない」「jQueryの使い方がよくわからない」など、Web制作を学び始めた頃は悩むことも多いと思います。
今回、そんな方向けにHTML、CSS、jQueryの基本を使って1ページを完成させる、LP（ランディングページ）のコーディング教材を公開しました。
今回の初心者編でコーディングしていただくのは次のLPです。
「基礎しか勉強してないから1ページ作り切れるかどうか心配…」な方も安心してください。1つずつ解説しているので、学びながら作成することができます。
まずは、完成させることを目標にチャレンジしてみてください！
対象レベル（初心者）
このLPコーディング教材は初心者編として公開していますが、想定しているレベル感はこのような感じです。
- HTML/CSSを使用したことがある
- VSCodeを使用したことがある
- スマホ対応でよく崩れてしまう
- jQueryの使い方がいまいち分からない
もし、HTML/CSSやVSCodeがよく分からない方なら、Progateやドットインストールといったサービスで学習を始めるのも良いかもしれません。
とはいえ、Web制作初学者の方にはとても勉強になる内容なのでぜひチャレンジしてみて、もし難しかったらやり直す方法でもOKです！
コーディング教材から学べる内容
この教材で学べる内容です。
- XDデザインデータからコーディング
- header・main・footerを使った意味のあるHTML構造
- jQueryを使用したアニメーション
- コーディングルールの考え方
今回はシンプルな構成のLPですが、実際のデザインデータを見ながらHTML構造を考え、CSSで見た目を整える一連の流れを体験できます。
また、flexや@mediaといったCSSプロパティ、jQueryを使用したアニメーションなど実務でよく使用するコードを多く盛り込んでいます。
ポートフォリオに掲載・公開可能！
WP-LOAD LPは、模写コーディングしたものを実績としてポートフォリオ公開してOKです。
何か1つでもポートフォリオを持っていると、実際に案件を獲得する際や、転職するときに「ここまで勉強しました」という説明をしやすくなります。
教材を進めるだけであれば、サーバー契約は必要ありません。完成したLPをポートフォリオとしてWeb上に公開するときに、レンタルサーバーなどの公開先を用意します。
開発環境
この記事では次の環境でコーディングを行っているため、一部説明とは違う部分も出てくると思いますが、ご了承ください。
- macOS
- Visual Studio Code（VSCode）
テキストエディタをお持ちでない方は、Visual Studio Code（VSCode）をインストールするところから始めてください。
この記事では「VSCode」を使用しています。利用者が多く、実務でもよく使われるテキストエディタです。ダウンロードや設定などは次の記事を参考にしてください。
データ(zipファイル)
データは次のリンクからダウンロードしてください。
完成バージョン
コーディング用バージョン
自分で1からコーディングを始めたい方はこちらのファイルをダウンロードしてください。フォルダにはreset.cssと画像が入っています。
デザインデータ（Adobe XD）
デザインデータはAdobe XD形式です。Adobe XDは現在メンテナンスモードのため、利用できない場合は記事冒頭のPC・スマートフォン用カンプ画像を見ながら進めてください。
コーディング前の準備
コーディングの時に使用するフォルダやファイルの用意を行います。
フォルダの準備
フォルダを作成します。今回は「wp-load_lp」と命名しています。
フォルダを作成したらその中にcss、js、imagesフォルダを作成します。
- css → 拡張子がcssのファイルを格納（style.css、reset.css）
- images → 画像を格納 （png、jpeg、svgなど）
- js → 拡張子がjsのファイルを格納 （main.js）
使用するファイルの準備
使用するのはHTMLファイル1つ、CSSファイル2つ、JavaScriptファイル1つです。reset.cssはダウンロードデータに含まれているため、自分で作成するのはindex.html、style.css、main.jsの3ファイルです。
HTMLファイル
- index.html
HTMLはすべて「index.html」に記述します。
CSSファイル
- reset.css
- style.css
「reset.css」はデフォルトのCSSを打ち消すCSSです。コーディングをする上で重要なものです。CSS解説の回で、「reset.css」について詳しく解説します。CSSの記述はすべて「style.css」に書きます。
「reset.css」はこの記事でダウンロードしたものを使用してください。
JavaScriptファイル
- main.js
この教材では「フェードイン」と「スムーススクロール」の動きを加えます。処理はJavaScriptライブラリのjQueryを使ってmain.jsに記述します。
VSCodeでファイルを作成
VSCodeで先ほど作成したフォルダ（wp-load_lp）を開き、ファイルを作成していきます。
VSCodeを起動し、「フォルダを開く」→「wp-load_lp」を選択。
VSCodeの「新規ファイル作成アイコン」をクリックし、必要なファイルをすべて作成します。
作成するファイルは
- index.html
- style.css
- main.js
すべて追加すると次のようになります。
これでファイルの準備は完了です。
HTML構造を考える
コーディングを始める前にHTML構造について考えます。SEOやコーディングスピードに関わってくる部分なので、HTML構造を考えることは重要です。
今回は画像のようにHTML構造を考えてみました。各ブロックを何で囲うのかを表しています。
HTML構造を考えるときは次の点についても考えます。
- クラス名を付けるときのルール
- 各コンテンツはどんなタグで囲うのか（section？article？div？）
自分なりにルールを明確にすることで、コーディングが楽になります。