LP模写をする際について

Question

前提・実現したいこと

HTMLとCSSとjQueryを勉強してLP模写に挑戦したいと思っているのですが、サイトを構築する際に先にHTMLを全て書き切ってからCSS,jQueryに移る方が良いのか、HTML,CSS,jQueryを同時進行で進める方が良いのかどちらでしょうか。

Answer 1

CSSは土台となるHTMLを元にスタイリングするものなので、
基本的には先にHTMLのマークアップを済ませるのが原則です。

ただし、デザインカンプを元に必要なHTMLタグを事前に完璧に構築できる人は
そう多くはないので、全体の文書構造と大枠のレイアウト構造、あとは主要パーツの
class名などを中心に7〜8割くらいの精度のHTMLを書いておき、
後は各パーツのCSSを書きながらレイアウト用のclassやタグが不足していたら
随時追加しながら細部を作り込む、といった感じで進めることになるかと思います。

LPの模写ということであれば事前に完成形のデザインが分かっている状態なので、
じっくり文書構造やレイアウト構造を検討することができると思います。
そのこと自体がマークアップの訓練なので、

・情報構造を把握して適切なHTML要素を選択すること
・作りたいデザイン/レイアウトに合わせてdivやspanを追加する必要がある箇所を見つけること
・「CSSでどのように組み上げるか」を考えながらclass名の命名規則を考えたり、HTMLを書いたりすること

といったことを意識しながら模写をすると良い勉強になると思います。

Answer 2

どちらでも構わないと思います。

ただし、ものによっては CSS を書かないと完成形が分かりづらいこともありますので、その場合は HTML と同時に CSS も書いてしまった方が良いと思います。

また、サイトの規模が大きい場合は、分割して作った方が良いでしょう。

Comments

[masapopcorn]

なるほど、回答ありがとうございます参考にしてみます。

Answer 3

当てるCSSやjQuery（JavaScript）処理をしやすいよう考えながら、かつセマンティクスを考えながら、
HTML組み上げてから、CSSやjQuery（JavaScript）とやったほうが、効率がいいように個人的には思います。
ですが、それやるにはけっこう慣れ必要かと思います。
（慣れても、途中でやっぱりHTML修正なんてこともしょっちゅうありますしね）

なので、練習なのであれば、各部位別に、少しずつ、CSSも組み込みながら、とやるのがいいのではないでしょうか？
ようはまず上から、
ヘッダーのHTML、ヘッダーのCSS、
次に、コンテンツの各部位別に、HTML、CSS・・・といった感じで。

前述した通り、慣れてくれば、デザイン、レイアウトをパッと見ただけで、ある程度完成形のHTML、必要なCSS構築、jQuery（JavaScript）処理が浮かんできます。

また、冒頭で申し上げたセマンティクスに関しては、最初から意識できればよりいいのですが、
まずはHTML、CSSの特性を理解するためにとなれば、最初は意識せずに作ってみるのがいいかと思います。