【もりけん塾20日目】エンジニア初心者がはじめてつくるLPの手順【6day】

もりけん塾生になって20日目のねこらのん（@nekoranon256）です。

LP制作の手順がわからない人必見【未経験者でも0から5日でWebサイト】手順

依頼されているLPを制作していると…

私

あれ？Progateと違って本当に0からだからわからない…どうしよう

となりHTMLの本を読みつつすすめていました。

作りながら学ぶHTML／CSSデザインの教科書／高橋朋代／森智佳子【1000円以上送料無料】

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

しかし作成している手順や全体像などがわかりにくく

私

アレ？？これなんだっけ？

となったので途方に暮れていました。

そんなときに

ライブコーディング動画出しました！Progateを終えて、その先どうすべきかわからない方へ
一緒にサイトを作って最初の一歩を踏み出しましょう！
分かりやすさ第一で解説しましたー！ https://t.co/wLbJY9VhYL

— しょーご@webエンジニア (@samuraibrass) July 14, 2020

このツイートが流れてきたので早速見つつ実践してみることに‼

スクールデイトラのweb制作について

webを学んでいるときにデイトラを実践してやっていましたが、現在はやっていません。

デイトラとは、

です。

話は戻ってデイトラを途中でやめた理由は、

で違うと思ったから。

そしてデイトラではBootstrapが盛り込まれていたのでそのままやっていましたが、JavaScriptで現場で活躍されているもりけんさん（@terrace_tech）に相談すると…

もりけんさん

Bootstrapはしなくて良いですね

とアドバイスを頂いたのでデイトラはやめました。

しかし、LP制作はJavaScriptではないのでweb制作においてはお力をお借りしたいと思い動画を見て参考にしつつ作成することに決めました。

デイトラのページに行く

自分のスキルや知識がグラグラだと決められるものも決められないものですね…＞＜

スクールデイトラのweb制作の手順①youtubeを開こう

まずはyoutubeを開くことから！

この動画は未経験者でもわかりやすいように実際にその場でコードを書いている場面（ライブコーディング）を見れるのでとても勉強になりました。

私

・何から手を付けたら良いかな？
・CSSのプロパティの順番どうしよ

という方に是非みていただきたい…実際私も助かったので…

スクールデイトラのweb制作の手順②準備物

web制作で準備が必要なものを揃える。

もしそのままデイトラの動画どおりにすすめていく場合は貼り付けてある素材をDownloadしておくこと。

私は今すすめているLPでやっていくのでDownloadはしていません。

スクールデイトラのweb制作の手順③HTMLとCSSを見やすくする

VScodeはHTMLとCSSを横並びにすることができます。

横並びにすることでCSSで装飾がしやすくなりますよ！

方法は

これだけです。

ここの『表示』部分です。

この動画をみるまで知らなかったので見てよかったです。

スクールデイトラのweb制作の手順④CSSのリンクをHTMLのシートに読み込む

HTMLのシートに以下のコードを書きます。

<link rel="stylesheet" href="stylesheet.css">

これに加えてデイトラの動画ではリセットCSSも読み込むと言われますが…

私

リセットCSS？

となったので調べました！

リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。

ブラウザ・・・WEBサイトを閲覧するためのソフトウェアでGoogle ChromeやSafari、Internet Explorerなど様々な種類のものがあります。

各ブラウザは固有のCSSを持っています。（デフォルトのCSSと呼びます。）
このデフォルトのCSSの影響で、Webページをデザインするために自分で書いたCSSが本来意図しない表示になることがあります。

引用：【2019年版】リセットCSSのガイドライン｜基礎から使い方を徹底解説

CSSは『あとから読み込んだものを優先する』特徴があるので先にリセットCSSを読み込むことがポイントだそうです！

私はリセットCSSは【2019年版】リセットCSSのガイドライン｜基礎から使い方を徹底解説の記事からHTML5 Doctor CSS Resetを拝借しました！

【問題発生】CSSを読み込んでくれない事件

<header>内のHTMLとCSSのコードを書きました。

Live Serverでブラウザに反映されているか確認するとCSSが反映されていませんでした。

何が原因かを探るために調べました。

で検索するといつもお世話になっているサルワカさん（@saruwakakun）の記事がでてきたのでこちらを参考にさせていただきました…！（いつもお世話になっています…！）

参考▶CSSが効かない・反映されないときの対処法まとめ

記事を読むと

1. 検証モードでCSSをチェック
2. 他のスタイル指定より優先順位が低い
3. キャッシュが残っている
4. CSSの文法ミス
   セレクタの書き間違え
   プロパティの書き間違え
   値の書き間違え
   「;」の書き忘れ
   「}」の閉じ忘れ
   コメントアウトの閉じ忘れ

引用：CSSが効かない・反映されないときの対処法まとめ

だったので一番上から試してみました。

検証モードでCSSをチェック

デベロッパーツール（検証モード）でCSSをチェックすると反映されていませんでした。

CSSの取り消し線もでていないことから、CSSのリンクに問題がある可能性がある思い見比べることに。

みると「css」になっていたので「CSS」と小文字から大文字に変更しましたが改善することはなく…

他のスタイル指定より優先順位が低い

他のreset.cssとの関係かと思いましたがreset.cssも反映されている気配がないのでこれも違う…

キャッシュを削除

キャッシュが残っていることが原因だと思い、キャッシュを削除。

更新ボタンにカーソルを持っていき、右クリックをすると下記のものが表示されます。

一番下にある『キャッシュの削除とハード再読読み込み』をクリックするとキャッシュが削除されます。

これも原因ではなかったので次。

文法のミス

文法のミスではなさそうです…

ここまで問題はなかったので考えられる点で『相対パス』かなと思っています…！

相対パスもあってるけど…明日他の原因を探してみます。

おわりに

なかなかスムーズに進まないLP制作。

だからこそ知らないことに気がつけるので、早々と取り掛かることの大切さを知ったので良かったかな。

スキルをみにつけていこ！

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ