Chapter05.　実際にLPを作成（前半）– category –

LPを作成するための概要と目的についてお話ししました。完成図の概要についてざっくり説明しました。実際にやってみるとなかなか手応えがありますが、一つ一つ確認しながら進めていきましょう。※これから皆さんに作成していただくLPのテンプレートを配布し...

LPを作成していくうえで必要となってくるフォルダやファイルを作成していきましょう。

サイトを作る際の「骨格」を作っていきます。まず骨格を作ってからCSSと細かいHTML部分を書いていくことによって、効率的にHTMLとCSSを書いていくことができます。

headerを作成していきます。navi部分はどのサイトでもよく実装します。ulタグとliタグの使い方、またdisplay:flexの使い方がポイントとなってきますので今回のレクチャーで習得していきましょう。

keyvisualを作成していきます。Youtube動画を埋め込む方法をレクチャーしていきます。動画でポイントとなるのは動画の大きさです。こちらの幅と高さの変え方と比率部分が今回のポイントとなってきます。

メインタイトル1を作成していきます。このレクチャーでは画像を中央揃えしたり、divタグに幅をつけたりと非常に基本的ですが重要なことをやっていきます。

flexボックスで箱を並べるのと、文字にアンダーラインを引いていくことがポイントになります。非常に学べることがあるレクチャーなので、必ず習得していきましょう。

メインタイトル3を作成していきます。擬似要素を使ってチェックマークを作っていく部分と三角形を作っていく部分がポイントとなってきます。難易度が高いと思いますが、このレクチャーで擬似要素について慣れていきましょう。

メインタイトル４を作成していきましょう。肝となる部分は、三角形のパーツ部分をposition:absolute;で作成していくところです。やや三角形を作る部分が難易度が高いですが、実務でよく出るところでもあります。習得していきましょう。

いよいよ本格的にJavaScriptを使ったコーディングです。今回はやや長めのレクチャーになります。なかなか難易度は高く一番手応えのあるところですが、ここを越えればJavaScript(jQuery)をある程度使いこなせるようになるはずです。