もりけん塾生になって20日目のねこらのん（@nekoranon256）です。
目次
LP制作の手順がわからない人必見【未経験者でも0から5日でWebサイト】手順
依頼されているLPを制作していると…
となりHTMLの本を読みつつすすめていました。
しかし作成している手順や全体像などがわかりにくく
となったので途方に暮れていました。
そんなときに
ライブコーディング動画出しました！Progateを終えて、その先どうすべきかわからない方へ
一緒にサイトを作って最初の一歩を踏み出しましょう！
分かりやすさ第一で解説しましたー！ https://t.co/wLbJY9VhYL— しょーご@webエンジニア (@samuraibrass) July 14, 2020
このツイートが流れてきたので早速見つつ実践してみることに‼
スクールデイトラのweb制作について
webを学んでいるときにデイトラを実践してやっていましたが、現在はやっていません。
デイトラとは、
1日1題90日でプロのWEBスキルを手に入れよう
もう『学習ステップ』で迷わない！
未経験でも挫折しない業界最安級のオンラインスクール
引用：デイトラ
です。
話は戻ってデイトラを途中でやめた理由は、
- デイトラはwebマーケティングや営業スキルがある方の分野
- プログラミングは言語スキルを習得する分野
で違うと思ったから。
そしてデイトラではBootstrapが盛り込まれていたのでそのままやっていましたが、JavaScriptで現場で活躍されているもりけんさん（@terrace_tech）に相談すると…
とアドバイスを頂いたのでデイトラはやめました。
しかし、LP制作はJavaScriptではないのでweb制作においてはお力をお借りしたいと思い動画を見て参考にしつつ作成することに決めました。
自分のスキルや知識がグラグラだと決められるものも決められないものですね…＞＜
スクールデイトラのweb制作の手順①youtubeを開こう
まずはyoutubeを開くことから！
この動画は未経験者でもわかりやすいように実際にその場でコードを書いている場面（ライブコーディング）を見れるのでとても勉強になりました。
・CSSのプロパティの順番どうしよ
という方に是非みていただきたい…実際私も助かったので…
スクールデイトラのweb制作の手順②準備物
web制作で準備が必要なものを揃える。
- VScodeをインストール
- VScodeの拡張機能『Live Server』をインストール
もしそのままデイトラの動画どおりにすすめていく場合は貼り付けてある素材をDownloadしておくこと。
私は今すすめているLPでやっていくのでDownloadはしていません。
スクールデイトラのweb制作の手順③HTMLとCSSを見やすくする
VScodeはHTMLとCSSを横並びにすることができます。
横並びにすることでCSSで装飾がしやすくなりますよ！
方法は
- VScodeの『表示』をクリック
- エディターレイアウト『分割右』
これだけです。
ここの『表示』部分です。
この動画をみるまで知らなかったので見てよかったです。
スクールデイトラのweb制作の手順④CSSのリンクをHTMLのシートに読み込む
HTMLのシートに以下のコードを書きます。
<link rel="stylesheet" href="stylesheet.css">
これに加えてデイトラの動画ではリセットCSSも読み込むと言われますが…
となったので調べました！
リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。
ブラウザ・・・WEBサイトを閲覧するためのソフトウェアでGoogle ChromeやSafari、Internet Explorerなど様々な種類のものがあります。
各ブラウザは固有のCSSを持っています。（デフォルトのCSSと呼びます。）
このデフォルトのCSSの影響で、Webページをデザインするために自分で書いたCSSが本来意図しない表示になることがあります。
CSSは『あとから読み込んだものを優先する』特徴があるので先にリセットCSSを読み込むことがポイントだそうです！
私はリセットCSSは【2019年版】リセットCSSのガイドライン｜基礎から使い方を徹底解説の記事からHTML5 Doctor CSS Resetを拝借しました！
【問題発生】CSSを読み込んでくれない事件
<header>内のHTMLとCSSのコードを書きました。
Live Serverでブラウザに反映されているか確認するとCSSが反映されていませんでした。
何が原因かを探るために調べました。
キーワード「CSS HTML内にリンク 反映されない」
で検索するといつもお世話になっているサルワカさん（@saruwakakun）の記事がでてきたのでこちらを参考にさせていただきました…！（いつもお世話になっています…！）
記事を読むと
- 検証モードでCSSをチェック
- 他のスタイル指定より優先順位が低い
- キャッシュが残っている
- CSSの文法ミス
セレクタの書き間違え
プロパティの書き間違え
値の書き間違え
「;」の書き忘れ
「}」の閉じ忘れ
コメントアウトの閉じ忘れ
だったので一番上から試してみました。
検証モードでCSSをチェック
デベロッパーツール（検証モード）でCSSをチェックすると反映されていませんでした。
CSSの取り消し線もでていないことから、CSSのリンクに問題がある可能性がある思い見比べることに。
みると「css」になっていたので「CSS」と小文字から大文字に変更しましたが改善することはなく…
他のスタイル指定より優先順位が低い
他のreset.cssとの関係かと思いましたがreset.cssも反映されている気配がないのでこれも違う…
キャッシュを削除
キャッシュが残っていることが原因だと思い、キャッシュを削除。
更新ボタンにカーソルを持っていき、右クリックをすると下記のものが表示されます。
一番下にある『キャッシュの削除とハード再読読み込み』をクリックするとキャッシュが削除されます。
これも原因ではなかったので次。
文法のミス
文法のミスではなさそうです…
ここまで問題はなかったので考えられる点で『相対パス』かなと思っています…！
相対パスは現在のページから見てアクセスしたいファイルがどこにあるのかを相対的に示すもの
絶対パスはweb上にあるHTMLファイルにアクセスする際に具体的な「https://~~」で始まるファイルを示すもの
相対パスもあってるけど…明日他の原因を探してみます。
おわりに
なかなかスムーズに進まないLP制作。
だからこそ知らないことに気がつけるので、早々と取り掛かることの大切さを知ったので良かったかな。
スキルをみにつけていこ！
もりけん塾（@terrace_tech）
Thanks：もりけんさん