Web プログラミング

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

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

 

今日のタスクはコレ。

今日はLP制作スタート!

1週間でできるって何かでみたことがあったので、それを基準にしていました!

 

しかしもりけんさん(@terrace_tech)に相談すると「2ヶ月で作成は早足で取り掛からないと間に合わない」とアドバイスをいただいたのでさっそく。

 

LP制作しつつ疑問に思ったことやまとめたほうが今後役立つと思ったので、まとめていきます。

LP制作にあたり必要なもの

LP制作にあたり必要なものを紹介していきます。

無料テキストエディタ『VScode』のメリット・デメリット

Atomやサクラエディタ、CotEditorなど数多くある中でなぜVScodeを選んだかメリット・デメリットでご紹介していきます。

 

決定打はエンジニアで活躍している友人が

VScodeが使いやすいよ

です。

 

VScodeのメリット・デメリットをご紹介していきますね。

メリット5つ

プログラミング初心者の私でもコードが読みやすいVScode。

 

まだ使いこなせていないので今後も追記していきますが、これまでで使ってきてメリットだと感じたことをご紹介していきます。

 

メリット3つ

  1. 拡張機能が豊富
  2. 入力候補が表示される
  3. Emmet機能でコードのスピードアップ

 

それぞれご紹介してきますね。

拡張機能が豊富

tabキーなどを押すとコードが省略される(Auto Close Tag)など自分好みにカスタムできる優れもの。

 

他にも、

  • タグを変更すると終了タグも忘れずに変更してくれる(Auto Rename Tag)
  • カッコに色を色を付けて目で見てわかりやすくしてくれる(Braket Pair Colorizer)
  • コピーやカットするたびに記憶してくれる(Clipboard Ring)
  • コードミスを教えてくれる(Code Spell Checker)
  • HTML上でCSSコードを表示してくれる(CSS Peek)
  • インデントを色わけしてくれる(indent-rainbow)
  • 簡易的ローカルサーバーでブラウザでコード結果を確認できる(Live Server)

など書ききれないほど使いやすい拡張機能が揃っています。

 

入力候補が表示される

「h」と入力すると「html」などhの入力候補が表示されます。

 

長いタブ名でも途中まで打てば表示されるのでとても助かっています。

Emmet機能でコードのスピードアップ

Emmetのチートシートを使えば長いコードを打たなくても省略してくれます。

 

チートシート

 

ただ覚えるものが多いのでよく使いそうな機能から覚えていくとよいかも…

デメリット

デメリットは今の所まだ他のエディターを使ったことがないので、また追記しますね。

 

【LP制作】デザインカンプでパーツ分け

まずはデザインカンプでパーツ分けをしました。

 

東京フリーランス(@Tokyo_FreeIance)さんの以下の画像をお借りしてすすめました。

東京フリーランスの『デイトラ』

こちらと実際に作成するLPのデザインカンプを比較してどこから作成するかを判断しました。

 

また<div>でブロックごとにわけるのにもこの手法は良いなと思いました!

 

東京フリーランス『デイトラ』

 

【LP制作】HTML部分

無料テキストエディタの『VScode』を用いてHTML部分の制作から取り掛かりました。

 

サルワカさんの記事がとてもわかりやすかったので参考にしました。

 

参考▶メタタグとは?SEO効果は?metaタグ一覧と書き方まとめ

LP制作①<head>部分作成

<head>部分を最初に作成しました。

 

Progateではここの部分。

この部分はweb上では表示されない部分です。

 

SEO対策もここの部分でするようです。

 

SEO対策について以下の記事で紹介しています。

こちらもCHECK

【もりけん塾14日目】LP制作までの学習方法

続きを見る

 

LP制作②<footer>部分作成

次に<footer>部分を作成。

 

Progateではこの部分。

この部分は以下の場所にあたります。

LP制作③<main>部分作成

そして<main>部分を作成。

 

progateではこの部分。

この部分は以下です。

 

今日はHTML部分を終わらせました。

 

明日からCSSを調べながら作成する予定です。

 

おわりに

もりけんさんのおかげで作成ながら学習するという方法をとることができました。

 

ただ学ぶよりも実際に手を動かしたほうが楽しいですし、何が必要かを知ることができたので良かったです!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada