Web プログラミング

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

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

 

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

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

 

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

 

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

 

 

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

 

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

 

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

 

そんなときに

 

 

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

 

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

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

 

デイトラとは、

1日1題90日でプロのWEBスキルを手に入れよう
もう『学習ステップ』で迷わない!
未経験でも挫折しない業界最安級のオンラインスクール

引用:デイトラ

です。

 

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

  • デイトラはwebマーケティングや営業スキルがある方の分野
  • プログラミングは言語スキルを習得する分野

で違うと思ったから。

 

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

 

もりけんさん
Bootstrapはしなくて良いですね

 

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

 

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

 

デイトラのページに行く

 

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

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

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

 

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

 

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

 

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

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

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

 

  • VScodeをインストール
  • VScodeの拡張機能『Live Server』をインストール

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

 

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

 

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

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

 

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

 

方法は

  1. VScodeの『表示』をクリック
  2. エディターレイアウト『分割右』

これだけです。

 

 

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

 

 

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

 

スクールデイトラの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が反映されていませんでした。

 

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

 

キーワード「CSS HTML内にリンク 反映されない」

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

 

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

 

記事を読むと

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

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

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

 

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

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

 

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

 

 

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

 

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

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

キャッシュを削除

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

 

 

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

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

 

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

 

文法のミス

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

 

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

 

相対パスは現在のページから見てアクセスしたいファイルがどこにあるのかを相対的に示すもの

絶対パスはweb上にあるHTMLファイルにアクセスする際に具体的な「https://~~」で始まるファイルを示すもの

 

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

おわりに

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

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

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

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada