Chapter05. 実際にLPを作成(前半)– category –
-
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#1 作成するLPの概要と目的
LPを作成するための概要と目的についてお話ししました。完成図の概要についてざっくり説明しました。実際にやってみるとなかなか手応えがありますが、一つ一つ確認しながら進めていきましょう。※これから皆さんに作成していただくLPのテンプレートを配布し... -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#2 コーディングに利用するフォルダ、ファイルを作成しよう
LPを作成していくうえで必要となってくるフォルダやファイルを作成していきましょう。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#3 全体のHTMLを書いていこう
サイトを作る際の「骨格」を作っていきます。まず骨格を作ってからCSSと細かいHTML部分を書いていくことによって、効率的にHTMLとCSSを書いていくことができます。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#4 headerを作成しよう
headerを作成していきます。navi部分はどのサイトでもよく実装します。ulタグとliタグの使い方、またdisplay:flexの使い方がポイントとなってきますので今回のレクチャーで習得していきましょう。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#5 key visualを作成しよう
keyvisualを作成していきます。Youtube動画を埋め込む方法をレクチャーしていきます。動画でポイントとなるのは動画の大きさです。こちらの幅と高さの変え方と比率部分が今回のポイントとなってきます。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#6 メインタイトル1を作成しよう
メインタイトル1を作成していきます。このレクチャーでは画像を中央揃えしたり、divタグに幅をつけたりと非常に基本的ですが重要なことをやっていきます。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#7 メインタイトル2を作成しよう
flexボックスで箱を並べるのと、文字にアンダーラインを引いていくことがポイントになります。非常に学べることがあるレクチャーなので、必ず習得していきましょう。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#8 メインタイトル3を作成しよう
メインタイトル3を作成していきます。擬似要素を使ってチェックマークを作っていく部分と三角形を作っていく部分がポイントとなってきます。難易度が高いと思いますが、このレクチャーで擬似要素について慣れていきましょう。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#9 メインタイトル4を作成しようHTMLとCSS①
メインタイトル4を作成していきましょう。肝となる部分は、三角形のパーツ部分をposition:absolute;で作成していくところです。やや三角形を作る部分が難易度が高いですが、実務でよく出るところでもあります。習得していきましょう。 -
Chapter05. 実際にLPを作成(前半)
【Chapter05】<LP>#10 メインタイトル4を作成しようアコーディオンメニュー②
いよいよ本格的にJavaScriptを使ったコーディングです。今回はやや長めのレクチャーになります。なかなか難易度は高く一番手応えのあるところですが、ここを越えればJavaScript(jQuery)をある程度使いこなせるようになるはずです。
1









